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

Question

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

但是……

首先 - 似乎没有命名空间的模块不能拥有自己的state。 此外 - 当他们尝试使用 state 传递给动作/突变时，他们失败了，因为他们无法直接与根状态通信（仅使用 rootState 参数，这不是我所期望的）。

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

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

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

Answer 1

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

Answer 2

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

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

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

简单示例：

// message.js

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

    // add message or something
  },
};