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