VueJS项目使用VueX存储数据时访问tuto属性未定义报错如何解决

你第二个异常组件的computed配置中仅声明了名为data的计算属性，返回值是Vuex里的tuto状态，但模板里调用的是{{tuto}}，当前组件实例上没有绑定名为tuto的属性，因此触发对应报错。

推荐修改计算属性的名称，和模板调用的变量名保持语义对齐，修改后代码如下：

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

<script>
export default {
computed:{
  // 原属性名data改为tuto，和模板中调用的变量名对应
  tuto(){ 
    return this.$store.state.tuto ;
  }
},
mounted(){
  this.$store.dispatch("getTutoriel");
}
}
</script>

如果修改后仍有异常可以再核对两个细节：

• 确认data/tutoriel.json接口返回的结构符合预期，res.data.data字段存在，避免Mutation赋值后state.tuto出现非预期的空值
• 确认Vuex实例已经在项目入口文件（通常是main.js）中正确挂载到Vue实例上

内容的提问来源于stack exchange，提问作者Kate P