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

【问题标题】：Vuex - getting an undefined error when using getter in computedVuex - 在计算中使用getter时出现未定义的错误
【发布时间】：2021-02-15 14:05:57
【问题描述】：

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

App.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)

我认为这个问题与我的组件的创建顺序有关。我正在将我的所有子组件导入 App.vue 并在那里呈现它们，但我认为子组件是在 app.vue 的 created 生命周期挂钩之前创建的：

App.vue 脚本

components: {
'app-about' : About,

App.vue 模板

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

有人知道我缺少什么吗？谢谢！

【问题讨论】：

你试过img :src="aboutData?aboutData.photo.name:''">吗？
您是否尝试过在等待数据时添加条件渲染？ <img v-if="aboutData"/ :src="aboutData.photo.name"> - 如果这可行，那么你的怀疑是正确的
感谢您的回复。这些建议将使错误消失，但我想了解错误出现的原因以及如何重新组织代码以防止它发生。同样，照片和其余数据正在页面上呈现，所以我不确定错误是什么

标签： javascript vue.js vuex

【解决方案1】：

当第一次创建组件时，axios 调用尚未解决，因此aboutData 未定义。一旦调用解决，aboutData 就会呈现。获取它未定义和渲染是 2 个后续事件。使用 v-if 消除了第一个事件，因为 aboutData 在创建组件时不会被调用，但只有在 axios 调用已解决且 aboutData 可用时才会调用。

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

【讨论】：