Question

我目前正在使用Nuxt.js开发通用应用程序，大部分页面上的数据都是使用fetch挂钩和vuex存储库从API检索的。我开始注意到页面重新加载/刷新时出现错误，有时当我从导航栏访问页面时出现错误。页面错误是：

TypeError: Cannot read property 'data' of undefined

其中数据是从API检索的对象。我在互联网上搜索了此内容，发现它与未完全加载数据或未加载数据或页面呈现有关。我通过在模板上使用v-if来检查数据是否已设置，然后显示内容，从而找到了解决方法。我的问题是，是否有办法实现这一目标，我尝试使用async / await关键字，但这无济于事，我觉得v-if方法不是处理此问题的最佳方法。

编辑：使用fetch（）时使用$ fetchState.pending解决

Answer 1

如果在模板中立即显示从API检索到的数据，那么确实使用v-if是正确的方法。

如果您正在使用新的fetch()挂钩，则可以在模板中使用$fetchState.pending检查加载是否完成，例如：

<div v-if="$fetchState.pending"> 
 <p> Content is loading... </p>
</div>

<div v-else>
 <p> Content has loaded! {{data}}</p>
</div>

<script>
 export default{
  data(){
   return{
    data: null
   }
  }

  async fetch(){
   this.data = await getSomeAPI
  }
 }
</script>

页面上未定义的数据错误重新加载Nuxt.js

1 个答案: