Question

我正在构建一个需要对多个bootstrap-vue模式进行排序的应用程序。具体来说，嵌套组件中的按钮应该打开“manage”模式。 'manage'模式包含按钮，点击后，应关闭'manage'模式并打开另一个模态（例如'edit'，'add'，'complete'等）。

不是上下传递道具/发射事件以便可以从不同的嵌套组件触发这些事件，我希望在我的商店中有一个值this.$store.state.general.activeModal，它决定了哪个模式显示（如果有的话））

问题：如果状态中的值发生变化，如何在主应用页面中创建一组模态？

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

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

e.g。 modal1应该在this.$store.state.general.activeModal设置为'modal1'时显示，并在值更改为其他值时关闭。

我尝试创建一个计算变量“showModal1”，在store.etc.activeModal=='modal1'时为true，否则为false，然后使用v-modal="showModal1"显示/隐藏模态，但它最终创建了两个模态副本每次商店中的值匹配时（当商店中的值发生变化时，显然计算的值会触发两次？）

任何帮助都会很棒！

Answer 1

我建议你在观察者中使用b-modal组件的方法：.show（）和.hide（）来捕捉你的状态突变：

<template>
    <div>
        <b-modal ref="modal1" id="modal1"></b-modal>
        <b-modal ref="modal2" id="modal2"></b-modal>
        <b-modal ref="modal3" id="modal3"></b-modal>
    </div>
</template>

不要注意mapGetters，你必须看你的商店getter / state。这里假设activeModal是你的州值。

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()
    }

}

Answer 2

虽然不是bootstrap-vue，但我们使用简单的v-if指令成功使用了Bootstrap Modals。如果条件为真，则模态仅显示/呈现。

使用Vuex，您可以拥有activeModal的计算属性和v-if="activeModal == 'modalName'"的每个模态的v-if。在我们的模态中，我们使用Vue生命周期mounted来显示我们的模态，并注册一个emit（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 })

Answer 3

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

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指令，关闭按钮或其他方法来关闭模态：

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

管理哪个bootstrap-vue模式通过vuex状态打开

3 个答案: