VueX를 통한 데이터 액세스

VueX를 통한 데이터 액세스

VueX를 사용하여 VueJS 프로젝트에 데이터를 저장하고 싶다.

여기 my index.js

import axios from 'axios'
import { createStore } from 'vuex'
export default createStore({
  state: {
    tuto: [],
    data: [] 
  },
  
  actions: {
    getData({commit}){
      axios.get('data/mock.json')
      .then(res => {
        commit('SET_DATA', res.data)
      })
    },
    getTutoriel({commit}){
      axios.get('data/tutoriel.json')
      .then(res => {
        commit('SET_TUTORIEL', res.data)
      })
    },
    
  },
  mutations: {
    SET_DATA(state, data){
      state.data = data.data
    },
    SET_TUTORIEL(state, tuto){
      state.tuto = tuto.data
    },
  },
  modules: {
  }
})

집에서 할 때.동작하고 있습니다.

<template>
{{data}}
</template>

<script>


export default {
computed:{
  data(){ 
    return this.$store.state.data ;
  }
},
mounted(){
  this.$store.dispatch("getData");
}
}
</script>

하지만 내가 그렇게 했을 때:

<template>
{{tuto}}
</template>

<script>


export default {
computed:{
  data(){ 
    return this.$store.state.tuto ;
  }
},
mounted(){
  this.$store.dispatch("getTutoriel");
}
}
</script>

콘솔에 다음 오류가 표시됩니다.

Vue warn] :렌더링 중에 속성 "tuto"에 액세스했지만 인스턴스에서 정의되지 않았습니다.

하지만 둘 다 같은 일을 하고 있다고 생각했는데, 왜 튜토리얼이 아니라 데이터로 작동하는지 이해할 수 없습니다.

감사합니다.

스토어 상태 속성은 계산된 속성으로 반환되어야 합니다. 각 이름을 사용하여 상태를 반환해 보십시오.

<template>
{{tuto}}
</template>

<script>


export default {
computed:{
  tuto(){ 
    return this.$store.state.tuto ;
  },
  data(){ 
    return this.$store.state.data ;
  }
},
mounted(){
  this.$store.dispatch("getTutoriel");
}
}
</script>

언급URL : https://stackoverflow.com/questions/68358545/data-access-with-vuex