时间戳

首页 > 解决方案 > Vuex：在不同模块中共享嵌套模块而不重复

javascript - Vuex：在不同模块中共享嵌套模块而不重复

问题描述

我正在使用 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在动作的主体中插入 a 来证明这一点：

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

即使我仅从另一个console.log将打印两次的单个模块触发该操作。

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

标签： javascriptvue.jsvuex

解决方案

vuex 不支持共享嵌套模块。

您仍然可以毫无问题地从其他模块中提交和分派给它们，所以我认为这甚至不是必要的功能。

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

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

推荐阅读