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

【问题标题】：Managing which bootstrap-vue modal is open through vuex state通过 vuex 状态管理打开哪个 bootstrap-vue 模态
【发布时间】：2018-08-31 20:18:08
【问题描述】：

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

我希望在我的商店中有一个值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" 显示/隐藏模态，但每次值时它都会创建模态的两个副本在商店中匹配（显然计算值在商店中的值更改时触发两次？）

任何帮助都会很棒！

【问题讨论】：

标签： vue.js vuejs2 bootstrap-modal vuex bootstrap-vue

【解决方案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 指令、关闭按钮或其他方法关闭模式：

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

【讨论】：

【解决方案2】：

虽然不是 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 })

【讨论】：

【解决方案3】：

我建议您使用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，你必须注意你的商店 getters/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()
    }

}

【讨论】：