Vuex -在computed中使用getter时出现未定义的错误
Vuex -在computed中使用getter时出现未定义的错误
提问于 2020-11-03 05:32:21
我的vue js网站上的数据正在渲染，但我在控制台中收到了一个未定义的错误。我在App.vue中调用axios从我的cms中获取数据：
App.vue
async created() {
const strapiData = await getStrapiData();
// Update Vuex
this.$store.dispatch('setStrapi', strapiData);}
然后在我的一个组件中，我调用getter来检索存储在vuex中的数据：
About.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的创建生命周期钩子之前创建的：
App.vue脚本
components: {
'app-about' : About,App.vue模板
<template>
<div id="app">
<app-about></app-about>
</div>
</template>有人知道我错过了什么吗？谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-11-03 09:57:23
在第一次创建组件时，axios调用还没有被解析，所以aboutData是未定义的。一旦调用被解决，aboutData就会被呈现。未定义和渲染是两个后续事件。使用v-if可以消除第一个事件，因为在创建组件时不会调用aboutData，而是仅在axios调用已解决且aboutData可用时调用。
您通常要做的是将默认属性loading设置为false。然后，在axios调用开始时将loading设置为true，在解析时将其设置为false。在你的模板中，你设置了一些在loading为真时显示的“加载消息”。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64653637
复制相关文章
相似问题
腾讯云开发者
