将 Vuex 模块拆分为同一命名空间中的多个文件

Question

我正在尝试将我的 Vuex 模块拆分成块。除了创建多个命名空间模块（namespaced: true）之外，我还想扩展变得非常长的全局模块。似乎在某些情况下，最好将我的一些 actions/mutations 保留在全局模块中，因为它们相互通信并且过于耦合，但是每次我需要执行时都使用 { root: true } 选项在我看来，一个动作或突变感觉不够好。因此，就我而言，不将 namespaced 设置为 true 听起来是完美的解决方案。

但是...

首先 - 似乎非命名空间模块无法容纳自己的 state。此外 - 当他们尝试使用传递给 actions/mutations 的 state 时，他们失败了，因为他们无法直接与根状态通信（仅使用 rootState 参数，这不是我想要的期待）。

我能想到的另一种可能的解决方案是像这样初始化我的 Vuex 存储：

export default new Vuex.Store({
  namespaced: true,
  state: {},
  getters: {},
  mutations: {},
  actions: {
    ...actionsFromFile1,
    ...actionsFromFile2
  }
});

但这个解决方案似乎还不是最好的。我还缺少其他解决方案吗？

Answer 1

你应该在你的模块中保留你的动作和突变。

正如您提到的，您可以使用 root 来分派其他模块的操作。为什么要使用它，很简单。可见性 - 如果您需要从另一个商店分派一个动作，请将其保存在您期望的模块中，将代码拆分到您的全局商店和模块中将使跟踪事情的来源变得困难。

您的全球商店也会增长，您以后将很难找到想要的东西。

简单示例：

// message.js

const actions = {
  add({ dispatch }, message) {
    dispatch("chat/initializeChat", {}, { root: true });

    // add message or something
  },
};

Answer 2

您可以为单独的模块使用单独的文件：https://vuex.vuejs.org/guide/structure.html

将 Vuex 模块拆分为同一命名空间中的多个文件

Splitting Vuex module into multiple files in the same namespace

javascript

store

vue.js

vuex