vue.js - 通过 vuex state 管理打开哪个 bootstrap-vue modal

Question

我正在构建一个需要对多个 bootstrap-vue 模态进行排序的应用程序。具体来说，嵌套组件中的按钮应该打开“管理”模式。 “管理”模态包含按钮，单击这些按钮时应关闭“管理”模态并打开另一个模态(例如“编辑”、“添加”、“完成”等)。

与其上下传递 Prop /发射事件以便它们可以从不同的嵌套组件触发，我希望在我的商店中有一个值，this.$store.state.general.activeModal，确定显示哪个模式(如果有)

问题:如何在我的主应用程序页面中创建一组模式，以便在状态值发生更改时呈现？

我的主应用看起来像这样:

<template>
   <app-stuff />
   <b-modal id="modal1" />
   <b-modal id="modal2" />
   <b-modal id="modal3" />
</template>

例如modal1 应在 this.$store.state.general.activeModal 设置为“modal1”时显示，并在值更改为其他值时关闭。

我尝试创建一个计算变量“showModal1”，当 store.etc.activeModal=='modal1' 时为真，否则为假，然后使用 v-modal="showModal1" 来显示/隐藏模态，但每次商店中的值匹配时，它最终都会创建模态的两个副本(显然，当商店中的值更改时，计算值会触发两次？)

任何帮助都会很棒!

Answer 1

您可以为每个模式的可见性创建一个计算属性，例如:

computed: {
  modal1Visible() {
    return this.$store.state.activeModal === 'modal1';
  }
}

然后设置b-modal的visible属性:

<b-modal :visible="modal1Visible" id="modal1">

要处理关闭模式，您可以将 hide 事件与设置 this.$store.state.activeModal 值的存储操作或突变结合使用，例如:

<b-modal :visible="modal1Visible"
         @hide="$store.commit('activeModalSet', null)"
         id="modal1"
</b-modal>

这意味着如果您通过 v-b-modal 指令、关闭按钮或其他一些方法关闭模式:

1. 模态框会发出一个hide事件
2. 将触发 activeModalSet 突变，将 this.$store.activeModal 设置为 null
3. modal1Visible 计算属性现在将评估为 false
4. 模态框的 visible 属性将为 false，因此模态框将被隐藏。