Vuejs / Vuex如何使用突變在vuex state中的對象數組中刪除（過濾）Object

Question

我正在嘗試在我的嵌套（對象->數組->對象）vuex state 中刪除 Object。

我的應用場景是這樣的：

1.我將請求發送到后端刪除一條記錄，然后返回一個響應，只包含一條消息。 然后提交到 vuex state 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 State。 但它不會刪除 State 中的刪除項。 只有當我刷新頁面時。 以下是突變的設置方式。

    `UNASSIGN_COURS_AND_TEACHER_TO_CLASSROOM(state, cls) { let cours = state.singleClassroom.courses.filter(c => c.id;= cls). state.singleClassroom;courses = cours; }`

這是我在 vuex state 中的數據的限制：

Answer 1

我不確定我是否同意@Rodrigo。 Vuex state 作為組件中的data屬性是反應性的，我想您在 vuex state 中定義了 singleClassroom 數據（包括課程屬性），使其具有反應性。 我認為這種情況不適用於此處列出的變更檢測警告。

我不知道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

你的邏輯非常好。 但是在您的一句話中，您提到“我會將請求發送到后端以刪除一條記錄，然后僅返回一條消息的響應。 ”這意味着您不會返回除 json 消息之外的任何數據（I認為）。 這意味着cls為空，您正在嘗試使用空值過濾singleClassroom State。 那肯定行不通。

所以我建議在你的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 3

嘗試使用Vue.set( target, propertyName/index, value )來更新您的 object。

將屬性添加到反應式 object，確保新屬性也是反應式的，因此會觸發視圖更新。 這必須用於向反應對象添加新屬性，因為 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