Vuex 突變未更新狀態

Question

我這里有點問題。 在我刷新頁面之前，我的突變不會更新狀態。

行動

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;
  }
}

突變

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;
}

Answer 1

問題是Mutation 的反應性，你改變數組的方式不是反應性的，如果處理得當，數組是反應性的，無論它們是來自組件的局部變量還是 Vuex 狀態它們具有相同的行為：

此分配對數組沒有反應

state.deletedCourses = removeFromDeletedList;

試試這個：

突變：

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) );

}