前提・実現したいこと
実現したいことは「vue.js」「vuex」構成にて、「Axios」でデータを取得後に「storeのstate」に取得データを格納後、componentへ取得データを表示したいです。
下記ソースにて実行したのですが、画面上にはなにも表示されません。
画面描写と情報の取得と格納の順番が前後してうまく表示できてない様に思えるのですが、対応方法などアドバイス頂ければと考えております。
試したこと
問題がAPI側にあったり、「store」の定義にないか確認する為にデータ取得後に「console.log」で「store」の「state」情報を確認しましたが、API上から取得されたデータが表示されるのでstore格納までは行えている様に思えます。
store定義
JavaScript
1const store = new Vuex.Store({ 2 state: { 3 detail: '初期化' 4 }, 5 mutations: { 6 setDetail(state, payload) { 7 state.detail = payload 8 } 9 }, 10 actions: { 11 getDetail({dispatch}) { 12 return axios.get('http://localhost:8000/api/detaile/',{}) 13 }, 14 }, 15 getters: { 16 detail(state) { return state.detail } 17 } 18})
component(XXXX.vue)定義
JavaScript
1<template> 2<div>{{detail}}</div> 3</template> 4 5<script> 6export default { 7 name: 'listcard', 8 props: ['post'], 9 data () { 10 return { 11 msg:{} 12 }, 13 computed: { 14 detail() { 15 this.$store.dispatch('getDetail').then((res)=>{ 16 this.$store.commit('setDetail', res.data ) 17 var detail = this.$store.state.detail 18 // データが格納され、「store」の「state」に格納されているか確認 19 console.log(detail) 20 return detail; 21 }); 22 } 23 } 24} 25</script> 26
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/17 17:54