Hi i have a requirement of combining 2 vuex store into a single store (both stores are of different projects)

import storeA from '/path';

import storeB from '/path';

now combined both store

const combinedStore = //combine logic as i don't know this logic

I searched a lot on stackoverflow to combine 2 vuex store but i did not find any solution so posted.

here is how my vuex store will look like in both the stores

Store 1:

   // storeA.js
    
    const store = {
        state(){return {}},
        actions: {async getData(){...}},
        mutations: {},
        getters: {}, 
        modules:{ 
           Login
        }
    }

Store 2:

   // storeB.js
    
    const store = {
        state(){return {}},
        actions: {async getUsers(){...}},
        mutations: {},
        getters: {}, 
        modules:{ 
           workflow
        }
    }

Here is how i tried:

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

const newStoreData = Object.assign({},StoreA,StoreB)

const newStore = new Vuex.Store({
    ...newStoreData
});

Now only 1 store will work other will throw error like

reading first_name name of undefined (i,e state.[module].first_name)

Problem can be re-produced here: https://codesandbox.io/s/vuex-playground-forked-1h344?file=/src/main.js

Original working fork: https://codesandbox.io/s/k012qvkmnv?file=/src/main.js