在 vuex 中使用 vue 实例的更好方法

Question

我刚开始使用 vuex，我不得不在 vuex 中使用 vue instance。我正在使用一个名为 vue-toasted 的包并在 vue 应用程序中使用它，并在 ma​​in.js

中编写了以下代码

import Toasted from 'vue-toasted';

const ToastedOptions = {
  position: 'bottom-center',
  duration: 1500,
  theme: 'bubble'
};

Vue.use(Toasted, ToastedOptions);

这在 .vue 文件中运行良好。但不能在 store.js 中工作。

然后我尝试在 store.js 中声明相同的代码，但我也没有工作。我必须访问 vue 实例，所以我想出了几个解决方案：

1. 将 vue 实例作为 payload 传递给 actions
2. 通过this._vm直接访问vue instance

这两种模式都运行良好，但必须有更好的方法来实现这一点，一种更简洁的方法来清洁代码。

Answer 1

Vuex 是一个状态管理系统，它的目标是存储您的状态（您的数据；员工、汽车、应用程序状态、用户详细信息等）不是操作 DOM。这就是你拥有 vue 的目的。

如您所见，解决此问题的方法有很多，但我认为解决此问题的最佳通用方法是向 Vue 触发一些“事件”。

例如，在您的状态下拥有一个对象：toast

const state = {
  toast: null,
  cars: [{...}, {...}, {...}]
}

然后，当您要敬酒时，您可以提交（变异）状态中的敬酒，以包含一些您真正敬酒的元数据。

const state = {
  toast: {
    title: 'An important message',
    options: {
      position: 'bottom-center',
      duration: 1500,
      theme: 'bubble'
    }
  },
  cars: [{...}, {...}, {...}]
}

在 vue 中，您可以在 vuex toast 状态上设置一个观察者来等待更改。 一旦state.toast从null变为一个对象，你可以运行函数来触发实际的toast（在vue中），然后当toast完成后，你可以从状态中清除toast对象（告诉vue有没有更多的祝酒词）

伪示例 vue 文件：

import { mapState } from 'vuex';
new Vue({
  computed: {
    ...mapState({
      toast: state => state.toast
    })
  },
  watch: {
    toast(toastData) {
      if (toastData === null) {
        return;
      }
      
      this.toastMessage(toastData);
    }
  },
  methods: {
    toastMessage(toastData) {
      this.toasted.show(toastData.title, toastData.options);
      window.setTimeout(this.resetToast, toastData.options.duration)
    },
    resetToast() {
      this.$store.commit('CLEAR_TOAST'); // mutation in vuex to set state.toast = null
    }
  }
})