いつも大変お世話になっております。
Storeで管理しているデータをgettersで取得し、
コンポーネント側のdataに追加したいと思っています。
現在以下のようにソースを書いているのですが全く表示がされません。
dataは https://jsonplaceholder.typicode.com から取得したデータになるのですが、
あらかじめstoreのdataに手動で値を入れておけば問題なく表示ができるのですが、
apiを利用したデータは表示することができません。
どなたかどうすれば良いかわかる方がいらっしゃればご教授いただけますと幸いです。
※またstackoverflowでも同様の質問をしています。
どちらかで解決ができればその旨を追記致します。
ソースコード
javascript
1 2// store/index.js 3 4import { createStore } from 'vuex' 5import axios from 'axios' 6 7export default createStore({ 8 9 state : { 10 11 isLoading : true, 12 data : "" 13 14 }, 15 16 getters : { 17 18 isLoading : (state) => state.isLoading, 19 data : (state) => state.data 20 21 }, 22 23 mutations : { 24 25 setData(state, { data }){ 26 27 state.data = data 28 29 } 30 31 }, 32 33 actions : { 34 35 async fetchData({ commit, state }){ 36 37 const url = `https://jsonplaceholder.typicode.com/users/1`; 38 const rowData = await axios.get(url) 39 const data = rowData.data 40 41 state.isLoading = false 42 43 commit('setData', { data }) 44 45 } 46 } 47 48}) 49 50
// App.vue <template> <div> <template v-if="isLoading"> <p>Loading...</p> </template> <template v-else> {{ data }} </template> </div> </template> <script> import { mapGetters, mapActions } from "vuex"; export default { data(){ return { data : this.$store.getters.data } }, created(){ this.fetchData(); }, computed : { ...mapGetters([ 'isLoading' ]) }, methods : { ...mapActions([ 'fetchData' ]) } } </script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/08/05 04:17