【发布时间】:2022-01-03 22:01:32
【问题描述】:
您好,我需要将 2 个 vuex 商店合并为一个商店(两个商店属于不同的项目)
import storeA from '/path';
import storeB from '/path';
现在合并了两个商店
const combinedStore = //combine logic as i don't know this logic
我在stackoverflow上搜索了很多以结合2个vuex商店,但我没有找到任何发布的解决方案。
这是我的vuex 商店在stores 中的样子
商店 1:
// storeA.js
const store = {
state(){return {}},
actions: {async getData(){...}},
mutations: {},
getters: {},
modules:{
Login
}
}
商店 2:
// storeB.js
const store = {
state(){return {}},
actions: {async getUsers(){...}},
mutations: {},
getters: {},
modules:{
workflow
}
}
这是我的尝试:
import StoreA from 'storeA.js';
import StoreB from 'storeB.js';
const newStoreData = Object.assign({},StoreA,StoreB)
const newStore = new Vuex.Store({
...newStoreData
});
现在只有 1 个商店可以工作,其他商店会抛出类似的错误
读取未定义的名字(即
state.[module].first_name)
问题可以在这里重现:https://codesandbox.io/s/vuex-playground-forked-1h344?file=/src/main.js
原始工作分叉: https://codesandbox.io/s/k012qvkmnv?file=/src/main.js
【问题讨论】:
-
你不能合并两个上下文错误的存储,但是你可以合并两个模块,其中每个模块可以有自己的状态、getter、突变和动作。
-
在此示例中创建了 2 个单独的商店,这正在重现我的问题 codesandbox.io/s/vuex-playground-forked-1h344?file=/src/App.vue 此处的原始工作代码 codesandbox.io/s/k012qvkmnv