CODEWITHSUNDEEP
vue.jsvuexvuejs3vue-clivuex4
Kate P
Kate P

Reputation: 37

Data access with VueX

I want to store my data in my VueJS project with VueX.

Here 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: {
  }
})

When I do that in Home.vue it's working :

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

<script>


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

But when I do that no :

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

<script>


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

I have in the console the following error :

Vue warn]: Property "tuto" was accessed during render but is not defined on instance.

However I thought for both I was doing the same thing, I don't understand why it's working with data and not with tutoriel.

Thank you

Upvotes: 1

Views: 86

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

The store state properties should be returned as computed properties, try to return the state with respective names :

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

Upvotes: 1

Related Questions