Vuejs/Vuex如何使用突变移除(过滤)对象数组中的对象

Question

我试图删除嵌套( Object ->Array->Objcet) vuex状态中的对象。

我的应用程序的场景如下：

1. I将向后端发送请求以删除记录，然后只返回一条消息。然后提交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;
      }
    }

1. 现在，我想通过突变来更新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中筛选的课程的ID。请参阅以下代码：

更改此

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

我不确定我是否同意罗德里戈的说法。Vuex状态在组件中作为data属性是反应性的，我认为您在vuex状态下定义了singleClassroom数据(包括courses属性)，使其成为反应性的。我不认为这种情况适用于这里列出的变更检测警告。

我不知道cls是什么，但我怀疑它代表一个id。这是因为您从response.data获得cls。我强烈怀疑cls是您要删除的课程，并且您正在针对它过滤课程Id，并且它们不是相同类型的。我还建议您使用严格的等式(===)，因为它减少了出现bug的可能性。

我想问题就在这里

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