如何将两个不同项目的Vuex store合并为单个独立store

问题原因 #

你使用Object.assign直接合并两个store配置对象属于浅合并行为，state、actions、mutations、getters、modules这些顶层配置键会被后传入的StoreB直接覆盖StoreA的对应值，StoreA内的Login模块被StoreB的workflow模块覆盖后，读取对应模块下的属性自然会抛出undefined报错。

正确合并方案 #

需要对store的各层配置分别做合并处理，实现代码如下：

import StoreA from 'storeA.js';
import StoreB from 'storeB.js';

// 合并根级state
const combinedState = () => {
  return {
    ...StoreA.state(),
    ...StoreB.state()
  }
}

// 合并根级actions、mutations、getters
const combinedActions = {
  ...StoreA.actions,
  ...StoreB.actions
}
const combinedMutations = {
  ...StoreA.mutations,
  ...StoreB.mutations
}
const combinedGetters = {
  ...StoreA.getters,
  ...StoreB.getters
}

// 合并所有模块
const combinedModules = {
  ...StoreA.modules,
  ...StoreB.modules
}

// 生成最终合并后的store实例
const combinedStore = new Vuex.Store({
  state: combinedState,
  actions: combinedActions,
  mutations: combinedMutations,
  getters: combinedGetters,
  modules: combinedModules
})

注意事项 #

• 若两个store存在重名的根action、mutation、getter，或者重名的模块，后引入的配置会覆盖先引入的配置，出现异常可优先检查是否存在命名冲突
• 如果你导入的StoreA、StoreB是已经实例化完成的Vuex Store对象，而非配置对象，需要先通过实例的私有属性取出对应配置再做合并，更推荐两个store都直接导出配置对象，合并的兼容性更高

内容的提问来源于stack exchange，提问作者EaB