从 Vuex 中的一个模块更改另一个模块状态

Question

我的 vuex 商店中有两个模块。

 var store = new Vuex.Store({
    modules: {
        loading: loading
        posts: posts
    }
});

In the module loading , I have a property saving which can be set either true or false and also have a mutation function named TOGGLE_SAVING 设置此属性。

在模块 posts 中，在获取帖子之前和之后，我想更改属性 saving 。我通过从 posts 模块中的一项操作调用 commit('TOGGLE_SAVING') 来做到这一点。

 var getPosts = function (context) {
    context.commit(TOGGLE_LOADING);
};

当它尝试提交时，我在控制台中收到以下错误

[vuex] unknown local mutation type: TOGGLE_LOADING, global type: posts/TOGGLE_LOADING

如何使用 commit 在另一个模块中改变状态？

原文由 Fizer Khan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

按照 这里 的建议尝试以下参数；

 commit('TOGGLE_LOADING', null, { root: true })

如果您将 namespaced 设置为 true（在 Nuxt 中，这是在模块模式下的默认设置），则变为：

 commit('loading/TOGGLE_LOADING', null, { root: true })

原文由 Saurabh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您在模块中使用了 namespaced: true ，有两种方法：

1-您应该添加 { root: true } ：

 commit('TOGGLE_LOADING', null, { root: true })

2-定义如下全局操作（例如 globalToggleLoading ）并通过 dispatch('globalToggleLoading') 从您想要的任何模块调用它

globalToggleLoading: {
    root: true,
    handler({ commit }) {
      commit('TOGGLE_LOADING')
    }
  }

如果您的模块是 not namespaced ，您可以通过调用 commit、dispatch 来调用任何突变或操作：

 commit('TOGGLE_LOADING')

原文由 rebinnaf 发布，翻译遵循 CC BY-SA 4.0 许可协议