Vuex-在计算中使用getter时得到一个未定义的错误

Question

我的vue js网站上的数据正在渲染，但控制台中出现了一个未定义的错误。我正在应用程序中进行axios呼叫。vue从我的cms获取数据：

一个pp.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">

一切都呈现良好，但这是我在web控制台中看到的错误：

TypeError: Cannot read property 'photo' of undefined
at a.r (About.vue?3e5e:1)

我认为这个问题与我的组件的创建顺序有关。我正在将所有子组件导入应用程序。vue在那里渲染它们，但我认为子组件是在创建应用程序的生命周期挂钩之前创建的。vue：

应用程序。vue脚本

components: {
'app-about' : About,

应用程序。vue模板

<template>
  <div id="app">
    <app-about></app-about>
  </div>
</template>

有人知道我错过了什么吗？非常感谢。

Answer 1

第一次创建组件时，axios调用尚未解析，因此未定义aboutData。调用解决后，将立即呈现aboutData。未定义和渲染是两个后续事件。使用v-if可消除第一个事件，因为创建组件时不会调用aboutData，只有在axios调用已解决且aboutData可用时才会调用。

您通常要做的是设置一个属性加载，默认为false。然后，在axios调用启动时将加载设置为true，在解析时将加载设置为false。在您的模板中，您设置了一些“加载消息”来显示加载为真。