使用 VueX 访问数据

Posted 2023-02-22

【中文标题】使用 VueX 访问数据

【英文标题】：Data access with VueX

【发布时间】：2021-09-22 06:43:07

【问题描述】：

我想用 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”，但未在实例上定义。

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

谢谢

【参考方案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>

【讨论】：

哦，是的，我忘了重命名 tuto 中的函数数据...谢谢！！