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

Question

我的 vue js 网站上的数据正在渲染，但我在控制台中收到未定义的错误。我正在 App.vue 中进行 axios 调用，以从我的 cms 获取数据：

应用程序.vue

async created() {

const strapiData = await getStrapiData();

// Update Vuex

this.$store.dispatch('setStrapi', strapiData);

}

然后在我的组件之一中，我调用 getter 来检索存储在 vuex 中的数据：

关于.vue

computed: {

    aboutData() {

        return this.$store.getters.strapiData.data.about

    }

}

然后我在模板代码中引用它：

<img :src="aboutData.photo.name">

一切都渲染得很好，但这是我在网络控制台中看到的错误：

TypeError: Cannot read property 'photo' of undefined

at 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。