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

Posted 2023-02-23

【中文标题】Vue/Vuex 在创建的钩子中等待异步调度

【英文标题】：Vue/Vuex wait for async dispatch in created hook

【发布时间】：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);
    
  ,
,

【参考方案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 的属性时可能会引发错误。