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

77

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

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

在模块中loading，我有一个saving可以设置true或的属性，false并且还有一个名为TOGGLE_SAVING该属性的突变函数。

在模块中posts，在获取帖子之前和之后，我想更改property saving。我是通过commit('TOGGLE_SAVING')从posts模块中的操作之一进行调用来实现的。

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

当它尝试提交时，控制台中出现以下错误

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

如何使用来更改另一个模块中的状态commit？

vue.js vuejs2 vuex

— 费泽汗
source

133

按照此处建议的以下参数进行尝试；

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

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

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

— 索拉卜
source

10

如果您使用的是模块和名称空间，请不要忘记将名称空间添加到中commit，就像这样commit('namespace/TOGGLE_SAVING', null, { root: true })，否则它将无法正常工作。

— 脑袋

1

这对我不起作用。我只是得到“未知突变类型”。

— geoidesic '18

我有类似的需求，您的回答解决了我的问题。谢谢。

— jedi

非常感谢！它帮助了我

— Valary o

2

您可以使用操作来提交另一个模块中定义的突变，然后在另一个模块中修改状态。

像这样：

posts: {
  actions: {
    toggleSavingActions(context) {
      // some actions 
      context.commit("TOGGLE_SAVING"); // defined in loading module
    }
  }
}

— 朱利安
source

这就是我所做的事情。我还在两个模块中都设置了“ namespace：true”。但是我得到了[vuex] unknown local mutation type: TOGGLE_LOADING, global type: posts/TOGGLE_LOADING

— 费扎尔汗

1

哦，是的。默认情况下，模块内的动作，突变和吸气剂仍会在全局名称空间下注册。因此，您可以删除名称空间属性，或使用commit（'someMutation'，null，{root：true}）

— Julien

1

就我而言，如果我使用namespace: true，则需要执行下一个：commit('my_module_name/someMutation', null, { root: true })

— TitanFighter

提交是同步的，而操作是异步的，因此，您不应该使用操作来提交突变。

— omarjebari

0

您也可以像通常在任何js文件中一样导入和使用商店。例如：

// src/state/modules/posts.js

import store from '@/state/store'
...
store.commit('posts/TOGGLE_LOADING')
...

这工作得很好，唯一的缺点是很难隔离测试或模型。

版本：最近，由于测试问题，我已经使用我提到的技术消除了所有代码。实际上，您始终可以按照建议的方式更改其他模块的状态，如本例所示。如果您在非重复模块中管理身份验证和配置文件，则非常有用。

logout: context => {
  return new Promise((resolve) => {
    // Clear token in all axios requests
    axios.defaults.headers.common['Authorization'] = ''
    // Logout from firebase
    firebase
      .auth()
      .signOut()
      .then(() => {
        // Update state in profile module
        context.commit('profile/SET_USER', null, {
          root: true
        })
        resolve()
      })
      .catch(error => reject(error))
  })
}

— 伊戈尔·帕拉（Igor Parra）
source