I have a situation where I am creating multiple Vue apps on the same page:
import Vue from "vue";
import App from "./App.vue";
import useStore from "./store";
const arr = [1, 2];
for (const index of arr) {
const store = useStore();
new Vue({
router,
store,
render: (h) => h(App)
}).$mount(`#app$_{index}`);
}
The structure of my store file is as follows:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
import address from "./modules/address";
export default function useStore() {
return new Vuex.Store({
modules: { address }
});
}
And here is the implementation of the address module:
const state = {
address: null
};
const getters = {
address(state) {
return state.address;
}
};
const mutations = {
setAddress(state, address) {
state.address = address;
}
};
export default {
namespaced: true,
state,
getters,
mutations
};
Even though I am creating a new instance for each Vue app, it seems like the store is being shared across all instances. Can someone explain why this might be happening?
Thank you