从 vuex 操作访问 $root 实例答案

【问题标题】：Access $root instance from vuex actions从 vuex 操作访问 $root 实例
【发布时间】：2020-07-03 14:19:29
【问题描述】：

我有一个加载器组件，它将在其中执行

created() {
    this.$root.$on('show-loading', (vars) => {
        this.loading = vars;
        console.log('loader executed');
    });
},

目前我可以从一个 vue 组件执行 show-loading 到 this.$root.$emit('show-loading', true);。

但是，我现在正尝试从我的 vuex 模块文件中执行代码。我得到一个错误

类型错误：“_this.$root 未定义”

有人知道从 vuex 访问根实例的正确方法吗？

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

不要将事件处理程序放在 Vuex 存储中。它们不属于那里，它们永远不会按预期工作。在存储中，您有 getter（从存储中获取值的方法）、突变（同步设置器）、操作（异步设置器）和状态（您的数据）。

监听器属于一个 Vue 实例，例如一个组件。除此之外，我还建议避免像瘟疫一样避免this.$root 和this.$parent。在您的代码中包含这些通常表明您正在更改其实际组件文件之外的组件，这会导致神奇的行为，即在您不希望它们发生变化的地方发生变化。

在您的情况下，您想要做的事情可以通过单个存储突变或操作更轻松地完成。

在您的商店中创建一个突变

const mutations = {
  showLoading(state, data) {
    state.loading = data;
  }
};

现在在你的组件中使用this.$store.commit('showLoading', true);。不需要事件总线。没有在根组件中神奇地出现的事件。只需一个同步设置器。

如果您需要全局事件处理，您可以改用总线。

const $bus = new Vue();

Vue.prototype.$bus = $bus;

在组件中，您可以使用this.$bus.$on(...) 监听事件或使用this.$bus.$emit(...) 发出事件。如果您需要完全在 Vue 之外做一些事情，您可以使用以下模式在组件之外创建事件侦听器。

$bus.$on('show-loading', (vars) => {
    // Do something
});

从技术上讲，它甚至可以让您使用 import store from '../path/to/store' 和 store.commit(...) 加载商店。

【讨论】：