Vuexの初回ロード時にAjaxでGETしてきたデータがStateに存在してないとエラーになる

Question

実現したいこと

• ページ読み込み時にAjaxでデータを取得
• そのデータをVuexで管理してVue.jsで表示させたい

---

// Vuex
const store = new Vuex.Store({
    state: {
        user: [],
        messages: {},
    },
    getters: {
        getUser(state) {
            return state.user[0];
        },
        getMessageId(state) {
            return state.messages.id;
        },
        getMessage(state) {
            // Error in render: "TypeError: Cannot read property '0' of undefined"
            return state.messages.message[0];
        },
    },
    mutations: {
        setData(state, payload) {
            state.user = payload.user;
            state.messages = payload.messages;
        }
    },
    actions: {
        onLoad({commit}) {
            // AjaxでGET
            setTimeout(() => {
                commit('setData', {
                    user: ['toro', 'jiro', 'hanako'],
                    messages: {
                        id: 1,
                        message: ['message１', 'message２']
                    }
                });
            }, 5000);
        }
    }
})

↑ onLoadでAjaxでGETしますが仮でsetTimeoutにしてます、gettersはただstateの値を返しているだけです。

// Vue.js
new Vue({
    el: '#app',
    created() {
        this.$store.dispatch('onLoad');
    },
    computed: {
        getUser() {
            return this.$store.getters.getUser;
        },
        getMessageId() {
            return this.$store.getters.getMessageId;
        },
        getMessage() {
            return this.$store.getters.getMessage;
        }
    },
    store: store,
})

↑ createdでdispatchして読み込み時に各データを取得しています。

参考url：https://jsfiddle.net/3otwuxaL/

---

質問したいこと
動作はするのですが、gettersのgetMessageメソッドでコンソールエラーが出ます。

state: {
        user: [],
        messages: {
            id: '',
            message: []
        },
    },

state内を最初からこうしておけばエラーは回避出来るのですが、
実際のdataは複雑で、できたら空（messages: {}）のままで設定しておきたいです。
このエラーを解消したいのですが、何かいい方法がありましたらご教示いただけたらと思います。

Answer 1

ajaxのデータが到着したかどうかを表す変数をstateに持っておけばいいのではないでしょうか。

質問文のJSFiddleを改変しました。
DEMO

上で述べた変数をfetchCompleteとして、初期値はfalseにします。

  state: {
    ...,
    fetchComplete: false
  },

setDataのときにtrueにします。

  mutations: {
    setData(state, payload) {
      ...
      state.fetchComplete = true;
    }
  },

vueのインスタンスからfetchCompleteの名前でアクセスできるようにします。

  computed: {
    ...,
    fetchComplete() {
      return this.$store.state.fetchComplete;
    }
  },

trueのときだけメッセージなどを表示するようにしています。v-elseを使ってfetchCompleteがfalseのときにのみ何かを表示することができます。

  <div v-if="fetchComplete">
    <p>{{ getUser }}</p>
    <p>{{ getMessageId }}</p>
    <p>{{ getMessage }}</p>
  </div>
  <div v-else>
    <p>Loading ...</p>
  </div>

ajaxのデータに依存するgetterは、エラーが起きないようにfetchCompleteをチェックするようにしています。

    getUser(state) {
      return state.fetchComplete ? state.user[0] : null;
    },
    getMessageId(state) {
      return state.fetchComplete ? state.messages.id : null;
    },
    getMessage(state) {
      return state.fetchComplete ? state.messages.message[0] : null;
    }

Comments

[dietono]

ご回答ありがとうございます！なるほどフラグを用意して判定させるんですね！参考になりました！