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

问题描述 投票:62回答:3

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

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

在模块loading中,我有一个属性saving,可以设置truefalse,也有一个名为TOGGLE_SAVING的变异函数来设置此属性。

在模块posts中,在获取帖子之前和之后,我想更改属性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
3个回答
108
投票

尝试使用建议的以下参数作为here

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

如果您将namespaced设置为true(在Nuxt中,则为模块模式下的默认值),它将变为:

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

2
投票

您可以使用action提交另一个模块中定义的突变,然后您将在另一个模块中修改状态。

像这样:

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

0
投票

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

// src/state/modules/posts.js

import store from '@/state/store'
...
store.commit('posts/TOGGLE_LOADING')
...
© www.soinside.com 2019 - 2024. All rights reserved.