如何解决Vuex突变未更新状态
我这里有点问题。直到刷新页面,我的突变才会更新状态。
操作
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;
}
解决方法
问题是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) );
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。