Question

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

很明显，我无法在vuex商店中使用this，因此无法使用：

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

我也尝试过这样调用模式

import Vue from 'vue';

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

但是控制台会向我发出以下警告：

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

有什么想法可以直接从vuex动作中调用模式和吐司吗？

Answer 1

我认为一种更好的方法是防止处理来自商店的UI。因此，您可以添加商店属性，并注意组件中的更改。

在下面的示例中，我在toastMessages属性中添加了一个数组state和一个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");
    }
  }
});

Answer 2

在这里找到解决方案：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

Answer 3

尝试致电this._vm.$bvModal.show('modalId');。 Reference。

Answer 4

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

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

您可以在此处找到完整的演示：https://github.com/Uraharadono/CallbackFromVuexAction

Answer 5

尝试调用此。_vm。 $ root 。$ bvModal.show（'modalId'）;

如何从vuex动作中调用bootstrap-vue模态和敬酒？

5 个答案: