実現したいこと
- ページ読み込み時にAjaxでデータを取得
- そのデータをVuexで管理してVue.jsで表示させたい
JavaScript
1// Vuex 2const store = new Vuex.Store({ 3 state: { 4 user: [], 5 messages: {}, 6 }, 7 getters: { 8 getUser(state) { 9 return state.user[0]; 10 }, 11 getMessageId(state) { 12 return state.messages.id; 13 }, 14 getMessage(state) { 15 // Error in render: "TypeError: Cannot read property '0' of undefined" 16 return state.messages.message[0]; 17 }, 18 }, 19 mutations: { 20 setData(state, payload) { 21 state.user = payload.user; 22 state.messages = payload.messages; 23 } 24 }, 25 actions: { 26 onLoad({commit}) { 27 // AjaxでGET 28 setTimeout(() => { 29 commit('setData', { 30 user: ['toro', 'jiro', 'hanako'], 31 messages: { 32 id: 1, 33 message: ['message1', 'message2'] 34 } 35 }); 36 }, 5000); 37 } 38 } 39})
↑ onLoad
でAjaxでGETしますが仮でsetTimeoutにしてます、getters
はただstateの値を返しているだけです。
JavaScript
1// Vue.js 2new Vue({ 3 el: '#app', 4 created() { 5 this.$store.dispatch('onLoad'); 6 }, 7 computed: { 8 getUser() { 9 return this.$store.getters.getUser; 10 }, 11 getMessageId() { 12 return this.$store.getters.getMessageId; 13 }, 14 getMessage() { 15 return this.$store.getters.getMessage; 16 } 17 }, 18 store: store, 19})
↑ created
でdispatchして読み込み時に各データを取得しています。
参考url:https://jsfiddle.net/3otwuxaL/
質問したいこと
動作はするのですが、gettersのgetMessage
メソッドでコンソールエラーが出ます。
JavaScript
1state: { 2 user: [], 3 messages: { 4 id: '', 5 message: [] 6 }, 7 },
state内を最初からこうしておけばエラーは回避出来るのですが、
実際のdataは複雑で、できたら空(messages: {}
)のままで設定しておきたいです。
このエラーを解消したいのですが、何かいい方法がありましたらご教示いただけたらと思います。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/22 02:10