如何从模块访问 Vuex 根突变?

嗨,我打算将我当前的 Vuex 商店分成 3 个模块

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

这 3 个模块中的所有操作都将调用更新错误的 SET_ERROR 突变。我将在根存储中保留 SET_ERROR 突变和错误状态。但是我怎样才能从我的模块内部调用根突变呢?

stack overflow How to access Vuex root mutation from a module?
原文答案
author avatar

接受的答案

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

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

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

{
  state: {
    error: null,
  },
  mutations: {
    setError(state, message) {
      state.error = message;
    },
  },
  modules: {
    auth: {
      namespaced: true,
      state: { 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 });
          }
        },
      },
    },
  },
}

答案: