Vuejs/Vuex 如何使用突变在 vuex 状态的对象数组中删除（过滤）对象

Question

我试图在我的嵌套（对象->数组->对象）vuex 状态中删除一个对象。

我的应用场景是这样的：

1.我会向后端发送删除记录的请求，然后只返回一条消息的响应。然后提交到 vuex 状态UNASSIGN_COURS_AND_TEACHER_TO_CLASSROOM。这里的一切都很好。

    async unassignCoursandTeacher({ commit }, classroom) {

      let response = await Axios.post(

         "/dashboard/school/unassignCoursandTeacher/" + classroom.id, classroom

      );

      let cls = response.data;

      if (

         response.status == 200 ||

         response.status == 201 ||

         response.status == 204

      ) {

         commit("UNASSIGN_COURS_AND_TEACHER_TO_CLASSROOM", cls);

         return cls;

      }

    }

现在我想在singleClassroom突变的帮助下更新状态。但它不会删除状态中的删除项。仅当我刷新页面时。以下是突变的设置方式。

`UNASSIGN_COURS_AND_TEACHER_TO_CLASSROOM(state, cls) {

    let cours = state.singleClassroom.courses.filter(c => c.id != cls);

    state.singleClassroom.courses = cours;

 }`

这是我在 vuex 状态下的数据结构： 

Answer 1

你的逻辑完全没问题。但是在你的一句话中你提到“我会向后端发送删除记录的请求，然后只返回一条消息的响应。 ”这意味着除了 json 消息之外你没有返回任何数据（我认为）。这意味着cls是空的，你正试图singleClassroom用空值过滤状态。那肯定不行。所以我会建议设置你试图在你的ACTION. 请看下面的代码：改变这个async unassignCoursandTeacher({ commit }, classroom) {  let response = await Axios.post(    "/dashboard/school/unassignCoursandTeacher/" + classroom.id,classroom  );  let cls = response.data; // You are assigning cls to an empty attribute - this where the issue is.  if (     response.status == 200 ||     response.status == 201 ||     response.status == 204   ) {     commit("UNASSIGN_COURS_AND_TEACHER_FROM_CLASSROOM", cls);     return cls;  }}为此async unassignCoursandTeacher({ commit }, classroom) {  let response = await Axios.post(    "/dashboard/school/unassignCoursandTeacher/" + classroom.id,classroom  );    if (     response.status == 200 ||     response.status == 201 ||     response.status == 204   ) {     let cls = classroom.yourCoursID; // Here we are assigning cls value to the cours ID.     commit("UNASSIGN_COURS_AND_TEACHER_FROM_CLASSROOM", cls);     return cls;  }}

Answer 2

我不确定我是否同意@Rodrigo。Vuex 状态作为data组件中的属性是反应性的，我想您在 vuex 状态中定义了 singleClassroom 数据（包括 courses 属性），使其具有反应性。我认为这种情况不适用于此处列出的变更检测警告。我不知道是什么cls，但我怀疑它代表一个 id。这是因为您从response.data. 我强烈怀疑cls是您要删除的课程，并且您正在针对它过滤课程 ID，但它们不是同一类型。我还可以建议您使用严格相等 (===)，因为它可以减少出现错误的机会。我认为问题可能出在这里UNASSIGN_COURS_AND_TEACHER_TO_CLASSROOM(state, cls) {    let cours = state.singleClassroom.courses.filter(c => c.id != cls); // if cls is the course, I think you are filtering the wrong thing    state.singleClassroom.courses = cours;}尝试更改为UNASSIGN_COURS_AND_TEACHER_TO_CLASSROOM(state, cls) {    let cours = state.singleClassroom.courses.filter(c => c.id !== cls.id);    state.singleClassroom.courses = cours;}

Answer 3

尝试使用Vue.set( target, propertyName/index, value )更新您的对象。向响应式对象添加一个属性，确保新属性也是响应式的，从而触发视图更新。这必须用于向反应对象添加新属性，因为 Vue 无法检测正常的属性添加（例如 this.myObject.newProperty = 'hi'）。UNASSIGN_COURS_AND_TEACHER_TO_CLASSROOM(state, cls) {    let cours = state.singleClassroom.courses.filter(c => c.id != cls);    Vue.set(state.singleClassroom, 'courses', cours); }https://v2.vuejs.org/v2/api/#Vue-set