关于vue.js：管理通过vuex状态打开的bootstrap-vue模态


Managing which bootstrap-vue modal is open through vuex state

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

我不想上下传递道具/发射事件，以便可以从不同的嵌套组件中触发这些事件，我想在我的商店中找到一个值，this.$store.state.general.activeModal，它确定显示哪个模态(如果有)<铅>

问题：如果状态值发生更改，如何在我的主应用程序页面中创建一组渲染模式？

我的主应用程序将如下所示：

1
2
3
4
5
6
<template>
   
   <b-modal id="modal1" />
   <b-modal id="modal2" />
   <b-modal id="modal3" />
</template>

例如当this.$store.state.general.activeModal设置为'modal1'时，应该显示modal1；当将该值更改为其他值时，modal1应该关闭。

我尝试创建一个计算变量" showModal1"，当store.etc.activeModal=='modal1'时为true，否则为false，然后使用v-modal="showModal1"来显示/隐藏模态，但最终每次值创建时都会创建模态的两个副本

中匹配的存储中的值(当存储中的值更改时，显然计算出的值会触发两次？)

任何帮助都会很棒！

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

1
2
3
4
5
computed: {
  modal1Visible() {
    return this.$store.state.activeModal === 'modal1';
  }
}

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

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

要处理关闭模态，可以将hide事件与设置this.$store.state.activeModal值的存储动作或变异结合使用，例如：

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

这意味着如果通过v-b-modal指令，关闭按钮或其他方法关闭模态：

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

    • 尽管不是bootstrap-vue，但我们已经通过简单的v-if指令在Bootstrap Modals中取得了成功。模态仅在条件为真时显示/渲染。

    使用Vuex，您可以为activeModal具有计算属性，而对于v-if="activeModal == 'modalName'"的每个模态可以具有v-if。在我们的模态中，我们使用Vue生命周期mounted来显示我们的模态，并注册一个发射(bootstrap-vue可能以不同的方式处理...)


    $('#' + this.modalId).on('hide.bs.modal', () => {
    this.$emit('closeModal')
    //this would set the v-if in parent Component to false, un-rendering the modal component
    })

    我建议您在观察器中使用b-modal组件的方法：.show()和.hide()，它们将捕获状态突变：

    1
    2
    3
    4
    5
    6
    7
    <template>
       
            <b-modal ref="modal1" id="modal1"></b-modal>
            <b-modal ref="modal2" id="modal2"></b-modal>
            <b-modal ref="modal3" id="modal3"></b-modal>
       
    </template>

    不要关注mapGetters，您必须注意商店的getters / state。假设在这里activeModal是您的状态值。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    computed : {
        ...mapGetters([
            'activeModal'
        ])
    },
    watch : {
        activeModal(newActiveModal, oldActiveModal) {
            // If an old value was setted, we want to hide it in anyway.
            if (oldActiveModal) this.$refs[oldActiveModal].hide()
            // If the new value is falsy, do nothing
            if (!newActiveModal) return

            this.$refs[newActiveModal].show()
        }

    }