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

Question

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

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

在模块 loading 中，我有一个属性 saving 可以设置为 true 或 false 并且还有一个名为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 改变另一个模块中的状态？

Answer 1

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

像这样：

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

Answer 2

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

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

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

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

Answer 3

您也可以导入商店，就像您通常在任何 js 文件中所做的那样并使用它。例如：

// src/state/modules/posts.js

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

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

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

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))
  })
}

Answer 4

如果你在模块中使用了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')

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

Change another module state from one module in Vuex

vue.js

vuejs2

vuex