Javascript 未在firestore中删除文档

我正在我的web应用程序中使用Vuex form my state management。我想从firestore数据库中删除一个文档，但当我单击该按钮时，什么也没有发生

这是带有删除图标的卡片标题部分，因此当单击时会删除文档：

<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>

删除库存操作是：

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

这是在方法内的模板中调用delete stock操作的地方：

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

---

但是每当我单击图标时，什么都不会发生。

原因是您在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);
           });
  },

---

但是我已经为这个变异设置了一个操作，这个操作执行异步操作，然后提交这个变异。@Raffobaffo提供了更多的书面解释和一个简单的示例，让你的答案更好，这样我就可以投票支持你了。你在右边track@KickButtowski成功了。谢谢你的头up@RaffobaffodeleteStock不需要在其中异步等待吗？因为是asyncrouns？突变只是操纵vuex。Firestore的东西需要在行动部分。Raffobaffo提到的同步问题是关键

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