Vuex - 계산에서 getter를 사용할 때 정의되지 않은 오류가 발생함

Vuex - 계산에서 getter를 사용할 때 정의되지 않은 오류가 발생함

vue js 웹 사이트의 데이터는 렌더링 중이지만 콘솔에서 정의되지 않은 오류가 나타납니다.App.vue에서 cms에서 데이터를 얻기 위해 Axios를 호출하고 있습니다.

App.vue

async created() {

const strapiData = await getStrapiData();

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

}

다음 컴포넌트 중 하나에서 vuex에 저장된 데이터를 가져오기 위해 getter에 전화를 걸겠습니다.

정보.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로 가져오고 있지만 하위 구성 요소는 앱의 라이프사이클 후크 이전에 생성되고 있는 것 같습니다.vue:

App.vue 스크립트

components: {
'app-about' : About,

App.vue 템플릿

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

내가 뭘 놓쳤는지 아는 사람?감사해요!

컴포넌트가 처음 생성되었을 때 Axios 호출은 아직 해결되지 않았습니다.aboutData정의되어 있지 않습니다.데이터 관련 콜이 해결되면 바로 렌더링됩니다.정의되지 않은 이벤트와 렌더링은 2개의 후속 이벤트입니다.v-if를 사용하면 다음과 같은 첫 번째 이벤트가 제거됩니다.aboutData컴포넌트가 생성되었을 때 호출되지 않고 Axios 호출이 해결되어aboutData사용할 수 있습니다.

보통 하는 일은 속성을 설정하는 것입니다.loadingdefault를 false로 설정합니다.다음으로 로드를 axios 콜이 시작되면 true로 설정하고 해결되면 false로 설정합니다.또한 템플릿에서 다음과 같이 표시되도록 "메시지 로드 중"을 설정합니다.loading정말이에요.

언급URL : https://stackoverflow.com/questions/64653637/vuex-getting-an-undefined-error-when-using-getter-in-computed