VueJS - Dynamic State Management multiple instances

Question

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?

tagurit · Accepted Answer · 2022-01-11 07:32:02Z

3

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

edited Jan 11, 2022 at 7:32

tagurit

5786 silver badges16 bronze badges

answered Apr 28, 2018 at 17:53

Roland

28.1k9 gold badges108 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Phorce Over a year ago

thanks for this however I'm looking for an effective way when calling this dispatch and then the computed this way looks like I would have to use if statements to determine which store to call?

Roland Over a year ago

but i cant understand what you want to do.It is weird.It looks that you are using the vuex store in wrong way.Why you store the prop you get,in vuex store,and then again you retrieve it from there?it is weird for me

Roland Over a year ago

As i can understand from you question you want to use the MessageApp component to show the message you are passing as props.If that the case then you dont have why to use vuex.Just display the props as soon as they are ready.

Collectives™ on Stack Overflow

VueJS - Dynamic State Management multiple instances

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related