如何从 vuex 操作中调用 bootstrap-vue 模态和 toast？答案

【问题标题】：How to call bootstrap-vue modals and toasts from vuex actions?如何从 vuex 操作中调用 bootstrap-vue 模态和 toast？
【发布时间】：2019-12-18 06:09:06
【问题描述】：

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

显然我不能使用来自 vuex 商店的this，因此我不能使用：

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

我也试过这样调用模态

import Vue from 'vue';

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

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

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

知道如何从 vuex 操作中直接调用模态和 toast 吗？

【问题讨论】：

如果您从组件调用操作，您可以传递组件 Vue 实例。 this.$store.dispatch('myAction', { vm: this })，然后您可以使用它在您的操作中访问 $bvModal

标签： vue.js vuex bootstrap-vue

【解决方案1】：

尝试拨打this._vm.$bvModal.show('modalId');。 Reference.

【讨论】：

我试过了，但它不起作用。刚刚意识到我可以在引导模式上使用 v-model，所以我只需将 state 设置为 true 以显示模式
虽然我需要一个 nuxt 应用程序来显示祝酒词，但 ._vm 对我有用，谢谢。
这对我也不起作用。 this._vm.$bvModal 存在，但 .show('id' 什么都不做。

【解决方案2】：

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

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

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

App.vue

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

store.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");
    }
  }
});

【讨论】：

【解决方案3】：

在这里找到了解决方案：https://github.com/vuejs/vuex/issues/1399#issuecomment-491553564

import App from './App.vue';

const myStore = new Vuex.Store({
    state: {
        ...
    },
    actions: {
        myAction(ctx, data) {
           // here you can use this.$app to access to your vue application
              this.$app.$root.$bvToast.toast("toast context", {
                 title: "toast!"
              });
        }
    }
});

const app = new Vue({
    el: '#my-div',
    render: h => h(App),
    store: myStore
});

myStore.$app = app; // <--- !!! this line adds $app to your store object

【讨论】：

【解决方案4】：

使用@eroak 的想法，我为vue-sweetalert2 实现了同样的事情。

我还为我的 Sweet Alert Toaster 创建了一个商店，然后我正在查看一个名为 ticks 的属性，该属性会在烤面包机的状态更新时更新。我正在使用ticks，因为我的状态中只有一条消息，而ticks 只是触发操作时的时间戳。

你可以在这里找到完整的演示：https://github.com/Uraharadono/CallbackFromVuexAction

【讨论】：

【解决方案5】：

尝试调用 this._vm.$root.$bvModal.show('modalId');

【讨论】：