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

【问题标题】：undefined data error on page reload Nuxt.js页面重新加载时未定义的数据错误 Nuxt.js
【发布时间】：2020-12-08 10:05:24
【问题描述】：

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

TypeError: Cannot read property 'data' of undefined

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

编辑：使用 fetch() 时使用 $fetchState.pending 解决

【问题讨论】：

你能告诉我们错误吗？在控制台中，您通常会看到错误出现的位置
我已经设法用 $fetchState.pending 解决了这个错误，感谢您的宝贵时间

标签： vue.js axios fetch vuex nuxt.js

【解决方案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>

【讨论】：

不客气，如果您将此标记为正确答案，我们将不胜感激，谢谢！