Firestore에서 문서가 삭제되지 않음

Firestore에서 문서가 삭제되지 않음

웹 앱에서 상태 관리에서 Vuex를 사용하고 있습니다.파이어스토어 데이터베이스에서 문서를 삭제하려고 했지만 버튼을 클릭해도 아무 일도 일어나지 않습니다.

삭제 아이콘으로 카드 헤더를 구분하므로 클릭하면 문서가 삭제됩니다.

<div class="card">
      <div class="card-header card-head-color">
        <span class="card-header-text"
          >{{ stock.name }} <small>(Price: {{ stock.price }})</small></span
        >
        <i
          class="fa fa-trash-alt float-right trash-icon"
          aria-hidden="true"
          @click="deleteStock(stock.key)"
        ></i>
      </div>

재고 삭제 변환은 다음과 같습니다.

DELETE_STOCK(id) {
    db.collection("stocks")
      .doc(id)
      .delete()
      .then(() => {
        console.log("Document Deleted!");
      });
  },  

재고 삭제 작업은 다음과 같습니다.

  deleteStock: ({ commit }, id) => {
    commit("DELETE_STOCK", id);
  },

여기서 메서드 내의 템플릿에서 스톡 삭제 액션이 호출됩니다.

   deleteStock(id) {
      this.$store.dispatch("deleteStock", id);
    },

그러나 아이콘을 클릭해도 아무 일도 일어나지 않습니다.

vuex의 돌연변이 내부에서 비동기 함수를 사용하고 있지만 vuex 설명서에는 다음과 같이 명시되어 있습니다.

돌연변이는 동기화되어야 합니다.

이 문제를 해결하려면 액션 내의 DB에 비동기 호출을 실행해야 합니다.

  deleteStock: ({ commit }, id) => {
       db.collection("stocks")
         .doc(id)
         .delete()
         .then(() => {
            console.log("Document Deleted!");
            //now you can commit and remove it from the state
            commit("DELETE_STOCK", id);
           });
  },

언급URL : https://stackoverflow.com/questions/62782027/document-not-getting-deleted-in-firestore