Vue/Vuex 在创建的钩子中等待异步调度答案

【问题标题】：Vue/Vuex wait for async dispatch in created hookVue/Vuex 在创建的钩子中等待异步调度
【发布时间】：2021-05-06 04:16:12
【问题描述】：

我无法使从 firebase 获取数据的函数异步：

当组件被创建时，我有：

created(){
  this.$store.dispatch("fetchSections"); 
}

Vuex 动作：

actions: {
  async fetchSections({ commit }) {
    var sectionsRef = db.collection("sections");
    try {
      await sectionsRef.get().then((querySnapshot) => {
        var collect = querySnapshot.docs.map((doc) => doc.data());
        commit("addToSections", collect);
      });
    } catch (error) {
      console.log(error.message + " -- " + error.statusText);
    }
  },
}

问题：在我们获取数据之前创建了另一个组件。

我也试过这个：

actions: {
  async fetchSections({ commit }) {
    var sectionsRef = db.collection("sections");
    try {
      let allSections = await sectionsRef.get();
      for (const doc of allSections.docs) {
        var collect = doc.data();
        commit("addToSections", collect);
      }
    } catch (error) {
      console.log(error.message + " -- " + error.statusText);
    }
  },
},

【问题讨论】：

标签： javascript vue.js async-await vue-component vuex

【解决方案1】：

组件的created钩子不允许延迟渲染，只提供一些代码在组件生命周期的那个时刻运行。

当使用钩子对数据进行异步调用时，您可以使用v-if 来防止依赖该数据的子元素出错：

<div v-if="someData && someData.length">
  <div v-for="item in someData" :key="item.id">
    {{ item }}
  </div>
</div>
<div v-else>
  Loading...
</div>

没有v-if，v-for 将尝试访问可能尚不存在的someData，并且在访问someData 的属性时可能会引发错误。

【讨论】：