vue.js - 使用 VueX 访问数据

Question

我想用 VueX 将我的数据存储在我的 VueJS 项目中。

这是我的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: {
  }
})

当我在 Home.vue 中这样做时，它正在工作：

<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警告]：在渲染期间访问了属性“tuto”，但未在实例上定义。

但是我认为我在做同样的事情，我不明白为什么它使用数据而不是教程。

谢谢

Answer 1

存储状态属性应作为计算属性返回，尝试返回具有相应名称的状态：

<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>