Vuex：在不同模块中共享嵌套模块，无需重复

Question

我正在使用Vuex作为状态管理器构建Vue.js应用程序。由于各种原因，我有一些必须在不同组件之间共享的状态，因此我创建了一个包含所有公共信息的嵌套状态，以便将其导入两个不同的模块。

例如，让我留下我需要在两个不同的其他模块中使用fileId，我的方法如下：

// common file id store:
export default {
  state: {
    fileId: '',
  },
  actions: {
    setFileId({commit}, id) {
      commit('mutateFileId', id);
    },
  },
  mutations: {
    mutateId(state, id) {
      state.fileId = id;
    },
  },
};

然后我将该模块导入其他模块，例如：

// store 1 where I need the file id:
import fileIdModule from '@/store/modules/fileIdModule';

export default {
  modules: {
    fileIdModule,
  },
  actions: {
    whatEver({commit, dispatch}, param) {
      ...
      dispatch('setFileId', 1);
    },
  },
};

在另一个我仍然需要该文件的商店里：

// store 2 where I need the file id:
import fileIdModule from '@/store/modules/fileIdModule';

export default {
  modules: {
    fileIdModule,
  },
  actions: {
    whatEver2({commit, dispatch}, param2) {
      ...
      dispatch('setFileId', 2);
    },
  },
};

我这样做的原因主要是这条信息只需要2到3个商店，我的应用程序已经有8/9而且它会变得更大......

这种方法的问题在于，由于我在两个不同的位置导入相同的模块，当我从该模块触发一个操作将被复制时，如果我在三个不同的位置导入模块，那么操作将被执行三次等等......如果我在动作的主体中插入一个console.log来证明这一点：

  actions: {
    setFileId({commit}, id) {
      console.log('mutating file id');
      commit('mutateFileId', id);
    },
  },

即使我从另一个单一模块触发该动作，console.log将被打印两次。

有一种方法可以共享嵌套模块而不重复它们吗？

Answer 1

vuex不支持共享嵌套模块。

你仍然可以在其他模块中提交和发送给他们没有问题，所以我认为它甚至不是必要的功能。

请记住，在{root: true}模块中提交/调度时，需要将namespaced: true作为第三个参数传递：

commit('setFileId', 2, {root: true})

Answer 2

是的，你绝对可以！

使用命名空间...这将定义您正在运行的模块版本...例如......

如果你有一个FileIdModule附加到ImageModule和DocumentModule ...

使用命名空间，您可以定义每个调度（'ImageModule / fileIdModule / setId'）

等等...