Question

我尝试在嵌套（Object-> Array-> Objcet）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状态。但是它不会在State中删除删除项。仅在刷新页面时。下面是设置突变的方式。

`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

我不确定我是否同意@Rodrigo。 Vuex状态在组件中作为data属性是反应性的，并且我想您在vuex状态中定义了singleClassroom数据（包括Courses属性），从而使其成为反应性的。我认为这种情况不适用于此处列出的change detection caveats。

我不知道cls是什么，但我怀疑它代表id。这是因为您从response.data获得了cls。我强烈怀疑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 2

尝试使用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://vuejs.org/v2/api/#Vue-set

Answer 3

您的逻辑很好。但是在您的一句话中，您提到“ 我会将请求发送到后端以删除记录，然后仅返回一条消息返回一个响应。 ”表示除了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;
  }
}

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

3 个答案: