Vuex - 在计算中使用 getter 时出现未定义的错误

Question

我的 vue js 网站上的数据正在渲染，但我在控制台中收到未定义的错误。我正在 App.vue 中进行 axios 调用，以从我的 cms 获取数据：应用程序.vueasync created() {const strapiData = await getStrapiData();// Update Vuexthis.$store.dispatch('setStrapi', strapiData);}然后在我的组件之一中，我调用 getter 来检索存储在 vuex 中的数据：关于.vuecomputed: {    aboutData() {        return this.$store.getters.strapiData.data.about    }}然后我在模板代码中引用它：<img :src="aboutData.photo.name">一切都渲染得很好，但这是我在网络控制台中看到的错误：TypeError: Cannot read property 'photo' of undefinedat a.r (About.vue?3e5e:1)我认为这个问题与我的组件的创建顺序有关。我将所有子组件导入到 App.vue 中并在那里渲染它们，但我认为子组件是在 app.vue 创建的生命周期挂钩之前创建的：应用程序.vue脚本components: {'app-about' : About,App.vue模板<template>  <div id="app">    <app-about></app-about>  </div></template>有人知道我缺少什么吗？谢谢你！

Answer 1

当第一次创建组件时，axios 调用尚未解析，因此aboutData未定义。一旦调用被解析，aboutData 就会被渲染。使其未定义和渲染是两个后续事件。使用 v-if 消除了第一个事件，因为aboutData在创建组件时不会调用第一个事件，而是仅在 axios 调用已解决且aboutData可用时调用。

您通常所做的是将一个属性设置loading为默认值 false。然后，当axios调用开始时，将loading设置为true，并在resolved时将其设置为false。在您的模板中，您设置了一些“加载消息”来显示 whileloading为 true。