Блог

Привет у меня есть требование объединить 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 магазин, другой выдаст ошибку, такую как

чтение имени пользователя имя неопределенного (i,e state.[module].first_name )

Проблему можно воспроизвести заново here:https://codesandbox.io/s/vuex-playground-forked-1h344?file=/src/main.js

Оригинальная работа fork:https://codesandbox.io/s/k012qvkmnv?file=/src/main.js

Vue 3

у версий для любовников, вероятно, тоже есть этот метод, но я не уверен.

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

const newStore = new Vuex.Store(storeA);

newStore.registerModule('', storeB)
 

Я просто изменил store2.js и main.js файлы

ссылка на решенную проблему: https://codesandbox.io/s/vuex-playground-forked-6pg4w?file=/src/main.js

Вот документация об этом: https://vuex.vuejs.org/guide/modules.html#dynamic-module-registration