

Storeで管理しているデータをgettersで取得し、  
コンポーネント側のdataに追加したいと思っています。

現在以下のようにソースを書いているのですが全く表示がされません。

dataは <https://jsonplaceholder.typicode.com> から取得したデータになるのですが、  
あらかじめstoreのdataに手動で値を入れておけば問題なく表示ができるのですが、  
apiを利用したデータは表示することができません。

どなたかどうすれば良いかわかる方がいらっしゃればご教授いただけますと幸いです。

※またteratailでも同様の質問( <https://teratail.com/questions/352240> )をしています。  
どちらかで解決ができればその旨を追記致します。

### ソースコード

[code]

    // store/index.js
    
    import { createStore } from 'vuex'
    import axios from 'axios'
    
    export default createStore({
        
        state : {
            
            isLoading : true,
            data      : ""
            
        },
        
        getters : {
            
            isLoading : (state) => state.isLoading,
            data      : (state) => state.data
            
        },
        
        mutations : {
            
            setData(state, { data }){
                
                state.data = data
                
            }
            
        },
        
        actions : {
            
            async fetchData({ commit, state }){
                
                const url = `https://jsonplaceholder.typicode.com/users/1`;
                const rowData = await axios.get(url)
                const data = rowData.data
                
                state.isLoading = false
                
                commit('setData', { data })
                
            }
        }
        
    })
    
    
    
[/code]

[code]

    // 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>
    
[/code]


CC BY-SA 4.0
2021-08-01T05:59:51.360
80513
2021-08-01T11:11:58.890
2021-08-01T11:11:58.890
3060
42269
question
vue.js vuex
gettersで取得したデータをコンポーネント側のdataに追加したい