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

在另一个我仍然需要该fileId的商店中：

// 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'）

等...

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

2 个答案: