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

如何解决在同一个命名空间中将Vuex模块拆分为多个文件

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

但是...

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

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

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

但是这种解决方案似乎并不是最好的。我还有其他解决方案吗？

解决方法

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

您应该将自己的动作和变异保留在模块中。

如前所述，您可以使用root来调度其他模块的操作。为什么要使用此功能很简单。可见性-如果您需要从其他商店分派操作，请将其保存在您期望的模块中，则将代码拆分到全局存储和模块中将使您很难跟踪事物的来源。

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

简单的例子：

// message.js

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

    // add message or something
  },};

您必须导入要导入的文件，将这些文件声明为主存储文件的modules对象为

//getters,actions and mutaions for main store
import getters from "./getters";
import mutations from "./mutations";
import actions from "./actions";
import module1 from "./modules/module1";
import module2 from "./modules/module2";

const myDefaultStore = () => {
  return new Vuex.Store({
    modules: {
      module1,module2
    },state,actions,mutations,getters,});
};

export default myDefaultStore;

以及其他存储文件（即module1 / index.js）中，您必须声明make namespace：true，如下所示：

    //getters,actions and mutaions for modules
    import getters from "./getters";
    import mutations from "./mutations";
    import actions from "./actions";
    export default {
     namespaced: true,};