CODEWITHSUNDEEP
vue.jsvuejs2vuexvuex-modules
livreson ltc
livreson ltc

Reputation: 733

Vuex Mutation not Updating State

I'm having a little of issue here. My mutation doesn't update the state until I refresh the page.

Action

async restoreDeletedCours({ commit }, cours) {
  let response = await Axios.post("/dashboard/school/cours/restoreDeletedCours", cours);
  let crs = response.data.data;
  if (response.status == 200 || response.status == 201) { 
    commit("REMOVE_COURS_FROM_DELETED_LIST", crs);
    commit("RESTORE_SCHOOL_DELETED_COURS", crs);
    return response.data;
  }
}

MUTATION

REMOVE_COURS_FROM_DELETED_LIST(state, crs) {
   // Let's remove the restored Item from deleted List
   let removeFromDeletedList = state.deletedCourses.filter(c => c.id != crs.id);
   state.deletedCourses = removeFromDeletedList;
}

enter image description here

Upvotes: -1

Views: 761

Answers (1)

yuri
yuri

Reputation: 3400

The problem is the reactivity of the Mutation, the way you are mutating the array is not reactive, arrays are reactive when treated well, whether they are local variables from a component or Vuex states they have the same behavior:

This assignation is not reactive for arrays

state.deletedCourses = removeFromDeletedList;

Try this instead:

Mutation:

REMOVE_COURS_FROM_DELETED_LIST(state, crs) {

  //We get the indexes that we have to remove

  let indexArr = state.reduce(function(acc, val, index) {
    if (val != crs.id) {
      acc.push(index);
    }
    return acc;
  }, []);

  //We iterate this indexes and mutate properly the state array so changes are reactive

  indexArr.forEach( i => state.deletedCourses.splice(i,1) );

}

Upvotes: 0

Related Questions