Vuex state not updating after mutation

Question

I'm trying to set some values to the state using a mutation in my Vue/Vuex application.

component.vue

created() {
    let clubId = {'clubId': 31};
    this.$store.dispatch(
    "clubConfiguration/getClub",
    clubId 
  );
}

action.js

getClub(context, payload) {
    ApiService().post('/club/getSingleClub', {
        "ClubId": payload.clubId
    })
     .then(res => {
          context.commit('GET_CLUB_INFORMATION', res.data.data[0]);
     })
     .catch(err => {
           console.log(err)
    })
}

mutation.js

GET_CLUB_INFORMATION(state, payload) {
    state.Name = payload.Name
    console.log(state);
}

state.js

Name: '',
mapLocation: { lat: 39.585693, lng: 2.622868, zoom: 18 },
courts: [
    {
        id: 0,
        number: 1,
        name: 'Court 1',
        map: null
    }
]

Now, in the console.log i have in the mutation shows that 'Name' in the payload have attached to the state along with other state properties. But when i am checking in the Vue dev tools or tried to access the state.Name from the component it shows the state.Name property in the state as undefined. What did I do wrong?

let me know if the answer below works, it worked for me when I just passed the name, make sure you pass the name here: context.commit('GET_CLUB_INFORMATION', res.data.data[0]); maybe 'res.data.data[0].name', also you might add an if (res.data.data[0] && res.data.data[0].name), just for precaution — Sdpotts93
What does the data returned by the server look like? How are you accessing Name in the component? If you check mapLocation and courts do you see their initial state populated correctly? — skirtle

Sdpotts93 Sdpotts93 · Accepted Answer · 2019-07-22T14:24:58

Found it! Your mutation should be

 GET_CLUB_INFORMATION(state, payload) {
  state.Name = payload
  console.log(state);
 }

cause you are passing just the name, not the whole payload

Vuex state not updating after mutation

1 Answers