title: Data access with VueX
body: <p>I want to store my data in my VueJS project with VueX.</p>
  <p>Here my <em>index.js</em></p>
  <pre><code>import axios from 'axios'
  import { createStore } from 'vuex'
  export default createStore({
    state: {
      tuto: [],
      data: [] 
    },
    
    actions: {
      getData({commit}){
        axios.get('data/mock.json')
        .then(res =&gt; {
          commit('SET_DATA', res.data)
        })
      },
      getTutoriel({commit}){
        axios.get('data/tutoriel.json')
        .then(res =&gt; {
          commit('SET_TUTORIEL', res.data)
        })
      },
      
    },
    mutations: {
      SET_DATA(state, data){
        state.data = data.data
      },
      SET_TUTORIEL(state, tuto){
        state.tuto = tuto.data
      },
    },
    modules: {
    }
  })
  </code></pre>
  <p>When I do that in Home.vue it's working :</p>
  <pre><code>&lt;template&gt;
  {{data}}
  &lt;/template&gt;
  
  &lt;script&gt;
  
  
  export default {
  computed:{
    data(){ 
      return this.$store.state.data ;
    }
  },
  mounted(){
    this.$store.dispatch(&quot;getData&quot;);
  }
  }
  &lt;/script&gt;
  </code></pre>
  <p>But when I do that no :</p>
  <pre><code>&lt;template&gt;
  {{tuto}}
  &lt;/template&gt;
  
  &lt;script&gt;
  
  
  export default {
  computed:{
    data(){ 
      return this.$store.state.tuto ;
    }
  },
  mounted(){
    this.$store.dispatch(&quot;getTutoriel&quot;);
  }
  }
  &lt;/script&gt;
  </code></pre>
  <p>I have in the console the following error :</p>
  <blockquote>
  <p>Vue warn]: Property &quot;tuto&quot; was accessed during render but is not defined on instance.</p>
  </blockquote>
  <p>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.</p>
  <p>Thank you</p>