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

时间:2017-03-05 08:21:36

标签: vue.js vuejs2 vuex

我的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变异另一个模块中的状态?

3 个答案:

答案 0 :(得分:39)

按照建议的here;

使用以下参数进行尝试
files <- list.files(path=path, pattern="*.csv", full.names = TRUE)
lst <- lapply(files, read.csv, stringsAsFactors=FALSE)

如果您将commit('TOGGLE_LOADING', null, { root: true }) 设置为true(在Nuxt中,这是模块模式下的默认设置),则会变为:

namespaced

答案 1 :(得分:2)

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

像这样:

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

答案 2 :(得分: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))
  })
}