如何从 vuex 动作调用 bootstrap-vue 模态和吐司？

Question

有没有人尝试过将 boostrap-vue 与 vuex 结合使用？我很难从 vuex 操作中调用模态和吐司。

显然我不能this从 vuex 商店使用，因此我不能使用：

this.$bvModal.show('modalId');

我也试过像这样调用模态

import Vue from 'vue';

Vue.prototype.$bvModal.show('transaction');

但是控制台给了我以下警告：

BootstrapVue 警告]：必须从 Vue 实例“this”上下文访问“$bvModal”

知道如何直接从 vuex 动作调用模态和吐司吗？

Answer 1

试着打电话this._vm.$bvModal.show('modalId');。 参考。

Answer 2

我认为更好的方法是防止从 Store 处理 UI。因此，您可以添加 store 属性并观察组件的更改。

在下面的示例中，我toastMessages在state属性中添加了一个数组，并ADD_TOAST_MESSAGE添加了一个更改来添加一些 toastMessage。然后，您可以ADD_TOAST_MESSAGE从另一个更改或操作提交更改。

在顶级组件 ( App.vue) 中，您可以观察toastMessages状态属性的变化并显示最后推送的项目。

应用程序

<script>
export default {
  name: "App",
  created() {
    this.$store.watch(
      state => state.toastMessages,
      toastMessages => {
        this.$bvToast.toast(this.toastMessages.slice(-1)[0]);
      }
    );
  }
}
</script>

商店.js

export default new Vuex.Store({
  state: {
    toastMessages: []
  },
  mutations: {
    ADD_TOAST_MESSAGE: (state, toastMessage) => (state.toastMessages = [...state.toastMessages, toastMessage]),
  },
  actions: {
    myActionThatDoSomething({commit}, params) {
      // Do something
      commit('ADD_TOAST_MESSAGE', "Something happened");
    }
  }
});