文檔未在 Firestore 中刪除

Question

我在我的 web 應用程序中使用 Vuex 表單我的 state 管理。 我想從我的 firestore 數據庫中刪除一個文檔，但是當我單擊該按鈕時沒有任何反應。

這是卡 header 的片段，帶有刪除圖標，因此單擊它會刪除文檔：

<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);
    },

但是每當我單擊圖標時，什么都沒有發生。

Answer 1

原因是您在 vuex 的突變中使用了異步 function，但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);
           });
  },