Vuex 突变未更新状态答案

【问题标题】：Vuex Mutation not Updating StateVuex 突变未更新状态
【发布时间】：2020-12-18 08:46:18
【问题描述】：

我在这里遇到了一点问题。在我刷新页面之前，我的突变不会更新状态。

动作

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

【问题讨论】：

你的突变在刷新页面之前不会更新是什么意思？您的意思是 deletedCourses 的状态正在发生变化，而您只是没有看到渲染？如果是这样，您可能需要使用 this.$nextTick 来更新 DOM。使用 deletedCourses 查看组件代码可能会帮助我提供更好的答案。
我的意思是该操作成功地将有效负载提交到突变，但突变不会更新已删除的课程状态。刷新页面将使用来自后端的新数据设置状态。我真正需要的是，当我恢复已删除的记录时，deletedCourses 状态应该通过删除恢复的记录来更新，该记录是从后端返回的对象数组，如上所示。
这是要考虑的参考：vuex.vuejs.org/guide/… 一般来说，我会在操作内部进行过滤并将新过滤的数组提交到已删除课程状态。这个想法是用一个新的对象替换对象（在这种情况下是一个数组）。

标签： vue.js vuejs2 vuex vuex-modules

【解决方案1】：

问题是reactivity of the 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) );

}

【讨论】：

感谢您抽出宝贵时间回答这个问题。我尝试了您的方法，它使状态为 Reactive，但首先我必须更改这部分代码 state.deletedCourses.reduce。但最大的问题是，当我删除恢复记录时，它不会从deletedCourses 状态中删除恢复的记录，而是会删除状态中的一半对象。例如，如果有对象数组 [0,1,2,3,4,5,6,7]，它将删除 [0,2,4,6]。我试图修复但没有成功。
我不太明白你在说什么。编辑问题并添加有关您现在遇到的问题的更多信息，以便我们尝试提供帮助。