使用 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 warn]: Property "tuto" was accessed during render but is not defined on instance.

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

谢谢

Answer 1

存储状态属性应该return编辑为计算属性，尝试return具有各自名称的状态：

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

使用 VueX 访问数据

Data access with VueX

vue.js

vuex

vue-cli

vuejs3

vuex4