How to combine 2 vuex stores into a single store

Question

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

Spearing

You can't combine two stores which is of wrong context but you can combine two modules wherein each module can have its own states, getters, mutations and actions. – Leann

created 2 separate store in this example which is re-producing my problem codesandbox.io/s/vuex-playground-forked-1h344?file=/src/App.vue Original working code here codesandbox.io/s/k012qvkmnv – Spearing

Answer 1

Vue 3+

Lower versions probably have this method too but I’m not sure.

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

const newStore = new Vuex.Store(storeA);

newStore.registerModule('', storeB)

I just modified store2.js and main.js files

link to solved problem: https://codesandbox.io/s/vuex-playground-forked-6pg4w?file=/src/main.js

Here is a documentation about it: https://vuex.vuejs.org/guide/modules.html#dynamic-module-registration

Stormi

getting Error Uncaught TypeError: Object(...) is not a function despite following your steps – Spearing

@Spearing Are you using vuex 4+ ? – Stormi

...@Stormi i'm using "vuex": "^3.6.0" – Spearing

@Spearing Edited for version 3.x – Stormi

...@Stormi this approach of combining 2 modules i already know. this solution is not flexible if i already have dedicated modules for each plugins. in core side again we need to define module. then change whole code in plugin (to access like this store.state.a). not flexible solution if we keep in mind that my plugin can be used with anywhere. – Spearing

created 2 separate store in this example which is re-producing my problem codesandbox.io/s/vuex-playground-forked-1h344?file=/src/App.vue Original working code here codesandbox.io/s/k012qvkmnv – Spearing

@Spearing Edited post this way you can extend your main store with modules and actions will work. – Stormi