상태가 렌더링되기 전에 Vue.js/vuex getters 오류가 발생했습니다.

상태가 렌더링되기 전에 Vue.js/vuex getters 오류가 발생했습니다.

웹 팩 vue 템플릿 및 vuex 사용.내 가게에 돌연변이가 있어

const mutations = {
addWeekDataList(state, a) {
    state.weekDataList = a;
},}

컴포넌트 내의 Ajax 요구 내에서 커밋되고 있습니다.

axios.get('URL').then(function (response) {
let weekDataList = _.values(response);
that.$store.commit('addWeekDataList', weekDataList);});

그리고 내 가게에 게터가 있다.

const getters = {
getWeekRunData: state => {
    return state.weekDataList[state.currentWeek].filter(activity => activity.type === 'Run' );
},
}

컴포넌트의 계산된 속성 내부에서 호출됩니다.

computed: {
    weekRunDataTime: function() {
        return Utils.convertSecsToHrsMins(Utils.addFields(this.weekRunData, 'moving_time'));
    },
    ...mapGetters({
        weekRunData: 'getWeekRunData',
    }),
},

아직까지는 오류가 없습니다. 계산된 속성은 데이터가 준비되면 해당 데이터를 반환합니다.그러나 컴포넌트 템플릿 내에서 다음 작업을 하면 오류가 발생합니다.

{{ weekRunDataTime }}
TypeError: state.weekDataList[state.currentWeek] is undefined

계산된 속성, 그리고 {{ weekRunDataTime }}이(가) 최종적으로 렌더링되지만 처음에 오류가 표시됩니다.어떻게 하면 이 문제를 해결할 수 있을까요?데이터를 사용할 수 있는 경우에만 Getter를 실행하시겠습니까?

이 에러는state.weekDataList로딩되어 있지 않기 때문에state.weekDataList[0]정의되지 않습니다.저는 두 가지 솔루션을 발견했는데, 그 중 하나는 @AmreshVenugopal의 솔루션이었습니다.하나는 샘플 데이터 세트를 어레이에 추가하는 것이고, 두 번째는 가장 바람직한 데이터 세트를 추가하는 것입니다.if데이터가 로드된 후에만 로드되도록 getter에 명령문을 입력합니다.이제 모든 것이 오류 없이 정상적으로 로딩됩니다.

const getters = {
getWeekRunData: state => {
    if(state.weekDataList.length) return state.weekDataList[state.currentWeek].filter(activity => activity.type === 'Run' );
}}

초기 데이터를 추가하면 문제가 해결됩니다.

const state = {
      user: something
    };

언급URL : https://stackoverflow.com/questions/43218643/vue-js-vuex-getters-error-before-state-rendered