CODEWITHSUNDEEP
vue.jsvuejs2vuexnuxt.js
adamb
adamb

Reputation: 427

Update data in Vuex store rather than replace it

I have the follow data in my Nuxt store/index.js file:

export const state = () => ({
    user: {
        status: 'signedin',
        data: {
            'salutation': 'Mr',
            'firstname': 'Test',
            'lastname': 'Person',
            'emailaddress': '[email protected]'
        }
    }
});

I want to update certain values within the 'data' section but not other values...e.g. I want to change 'firstname' to 'David' but keep the rest of the data the same. Please can someone point me in the right direction of how to do so?

Upvotes: 2

Views: 628

Answers (2)

adamb
adamb

Reputation: 427

I believe I've worked this out. My mutation looks like this:

{
...
  mutations: {
    UPDATE_USER_DATA(state, value)
    {
        for(const value in values)
        {
            state.user.data[value] = values[value];
        }
    }
  }
...
}

I can then update certain data by using the following:

this.$store.commit('UPDATE_USER_DATA', {'firstname': 'New'});

This will update 'firstname' to 'New' but then keep the rest of the data as is.

I can also update data dynamically, such as if I have a child component that is using the mutation to set a field within my 'data' based on a prop. E.g. if my prop 'field' is set to 'firstname', I can pass that to my mutation by using the following:

this.$store.commit('UPDATE_USER_DATA', {this.field: 'New'});

This will also update 'firstname' to 'New' but then keep the rest of the data as is.

Upvotes: 0

Tanner
Tanner

Reputation: 2411

You should be able to do this with a mutation. An example of updating a child property can be found here: CodePen

In your case, your mutation would look something like this: 

{
...
  mutations: {
    UPDATE_FIRST_NAME(state, value) {
      state.user.data.firstname = value;
    }
  }
...
}
// Call the mutation
this.$store.commit('UPDATE_FIRST_NAME', 'David')

Upvotes: 1

Related Questions