[Vuejs]-Separated Vuex for each Vue instance on the page

by

3👍

✅

The problem isn’t Vuex store being shared across multiple Vue instances, it is actually the Address module’s state getting shared across multiple Vuex stores.

Vuex docs address this issue: https://vuex.vuejs.org/guide/modules.html#module-reuse

If we use a plain object to declare the state of the module, then that state object will be shared by reference and cause cross store/module state pollution when it’s mutated.

Just change your address module state declaration from plain object definition to function definition:

const state = () => ({
  address: null
});

And you’re good to go!

👤Mythos

Leave a comment