如何从模块访问 Vuex 根突变？答案

【问题标题】：How to access Vuex root mutation from a module?如何从模块访问 Vuex 根突变？
【发布时间】：2021-09-04 09:57:37
【问题描述】：

您好，我打算将我当前的 Vuex 商店分成 3 个模块

auth - 用户登录/注销/注册
帖子 - 添加/删除/更新帖子
图像 - 更新/删除图像

这 3 个模块中的所有操作都会调用 SET_ERROR 突变来更新错误。我将在根存储中保留 SET_ERROR 突变和错误状态。但是如何从模块内部调用根突变？

【问题讨论】：

vuex.vuejs.org/guide/modules.html#namespacing
谢谢，我猜我们通过 { root: true } 来访问根突变。我现在就试试。
@JaromandaX 如何访问另一个模块中存在的模块内的状态？例如const filePath = images/${context.state.user._id}/${file.name} - （重构之前）。如何从我的身份验证模块获取用户状态？
我无法从一行代码中看出 - 抱歉
看起来像 const filePath = images/${context.rootState.auth.user._id}/${file.name} 工作

标签： javascript vue.js vuex

【解决方案1】：

您的问题的答案是在调用中添加{root: true} 作为第三个参数以提交突变，如第26 行所示 - 最后调用commit("setError"。这告诉 Vuex 变异应该从 store 的根目录开始。

这也适用于跨模块通信，将突变从一个命名空间存储提交到另一个（尽管在大多数情况下操作可能更适合这样做）。

以下是您的商店设置示例，最小化为单个命名空间模块 (auth)，我制作了一个操作和几个突变作为示例。

{
  store: {
    error: null,
  },
  mutations: {
    setError(state, message) {
      state.error = message;
    },
  },

  auth: {
    namespaced: true,
    store: { user: null },
    mutations: {
      setUser(state, user) {
        state.user = user;
      },
    },
    actions: {
      async logIn({ commit, dispatch, rootState }) {
        try {
          let response = await fetch("/login");
          let data = await response.json();
          commit("setUser", data);
        } catch (err) {
          commit("setError", err.message, { root: true });
        }
      },
    },
  },
}

【讨论】：