VueJS - Dynamic State Management multiple instances

I am creating an app and I have a component "Message" which uses a store to get data back from a JSON file (this will be eventually a database) and the component is as follows:

export default  {
   props: ['message'],

   mounted: function() {    
       this.$store.dispatch("FETCHMESSAGE", this.message);
   },

   computed: {
       title: function() {
          return this.$store.state.message;
       }
   }
}

I have the following mutation:

FETCHMESSAGE: function (context, type)
{
     var data = json.type; // Get the data depending on the type passed in
     // COMMIT THE DATA INTO THE STORE 
}

And I use it as the following:

<MessageApp message="welcome"></MessageApp>

This works for the most part and the correct message is displayed. The issue is when I have multiple instances of MessageApp being called on the same page. They both show the same message (of the last message) being called. E.g.

<MessageApp message="welcome"></MessageApp>
<MessageApp message="goodbye"></MessageApp>

They will each show the goodbye message. I know why this is happening but is it possible to have multiple instances of the store so that this does not happen?

Vuex is "a centralized store for all the components in an application," as the docs say.

So imagine that you have a variable (or many) which you can use and change from all your components.

Also when you want to get properties from state, it is recommended to use getters.

I can't understand what you want to do, but if you want, you can have multiple states, getters, mutations and actions and use them as modules in the store (read more). See below example from Vuex docs:

const moduleA = {
  state: { title: '' },
  mutations: { changeTitle(state, payload) { state.title = payload } },
  actions: { changeTitle({commit}, payload) { commit('changeTitle', payload) } },
  getters: { getTitle(state) { return state.title } }
}

const moduleB = {
  state: { title: '' },
  mutations: { changeTitle(state, payload) { state.title = payload } },
  actions: { changeTitle({commit}, payload) { commit('changeTitle', payload) } },
  getters: { getTitle(state) { return state.title } }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> `moduleA`'s state
store.state.b // -> `moduleB`'s state

VueJS - Dynamic State Management multiple instances

Related

Recent Posts