文档未在 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);
           });
  },