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

Posted 2023-02-16

【中文标题】如何从 vuex 操作中调用 bootstrap-vue 模态和 toast？

【英文标题】：How to call bootstrap-vue modals and toasts from vuex actions?

【发布时间】：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

【参考方案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');