title: Getting state, getters, actions of vuex module in vue component
body: <p>I tried the syntax given in vuex doc.</p>
  
  <p>store.state.a // -> moduleA's state
  store.state.b // -> moduleB's state</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>/**
   * First we will load all of this project's JavaScript dependencies which
   * includes Vue and other libraries. It is a great starting point when
   * building robust, powerful web applications using Vue and Laravel.
   */
  
  require('./bootstrap');
  
  /**
   * Next, we will create a fresh Vue application instance and attach it to
   * the page. Then, you may begin adding components to this application
   * or customize the JavaScript scaffolding to fit your unique needs.
   */
  Vue.component('task-index', require('./components/TaskList.vue'));
  Vue.component('task-show', require('./components/TaskShow.vue'));
  Vue.component('note-index', require('./components/NoteList.vue'));
  Vue.component('note-show', require('./components/NoteShow.vue'));
  
  const notes = {
      state: {
          edit: false,
          list:[],
          note: { 
              note : '',
              id : ''
          }
      },
      mutations: {
          SET_EDIT: (state, data) =&gt; {
              state.edit = data
          },
          SET_LIST: (state, data) =&gt; {
              state.list = data
          },
          SET_NOTE: (state, data) =&gt; {
              state.note.id = data.id;
              state.note.note = data.note;
          },
          SET_EMPTY: (state) =&gt; {
              state.note.note  = '';
          }      
      },
      getters: {
          noteCount: (state) =&gt; state.list.length
      },
      actions : {
          getNote: ({commit,state}) =&gt; {
              axios.get('/api/note/list')
              .then((response) =&gt; {
                  commit('SET_LIST', response.data);
                  commit('SET_EDIT',false);
                  commit('SET_EMPTY');
              })
          },
      }
  };
  
  const tasks = {
      state: {
          edit: false,
          list:[],
          task: { 
              body : '',
              id : ''
          }
      },
      mutations: {
          SET_EDIT: (state, data) =&gt; {
              state.edit = data
          },
          SET_LIST: (state, data) =&gt; {
              state.list = data
          },
          SET_TASK: (state, data) =&gt; {
              state.task.id = data.id;
              state.task.body = data.body;
          },
          SET_EMPTY: (state) =&gt; {
              state.task.body  = '';
          }      
      },
      getters: {
          taskCount: (state) =&gt; state.list.length
      },
      actions : {
          getTask: ({commit,state}) =&gt; {
              axios.get('/api/task/list')
              .then((response) =&gt; {
                  commit('SET_LIST', response.data);
                  commit('SET_EDIT',false);
                  commit('SET_EMPTY');
              })
          },
      }
  };
  
  const store = new Vuex.Store({
      modules : {
          task : tasks,
          note : notes
      }
  });
  
  const app = new Vue({
      el: '#app',
      store
  });
  </code></pre>
  
  <p><strong>TaskList.vue</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;div &gt;
          &lt;h4&gt;{{count}} Task(s)&lt;/h4&gt;
          &lt;ul class="list-group"&gt;
              &lt;li class="list-group-item" v-for="item in list"&gt;
                  {{item.body}}
                  &lt;button class="btn btn-primary btn-xs" @click="showTask(item.id)"&gt;Edit&lt;/button&gt;
                  &lt;button class="btn btn-danger btn-xs" @click="deleteTask(item.id)"&gt;Delete&lt;/button&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default{
      computed :{
          list() {
              return this.$store.state.task.list; 
          },
          count(){
              return this.$store.getters.taskCount;            
          }
      },
      mounted(){
          this.$store.dispatch('getTask');
      },
      methods : {
  
          showTask: function(id){
              axios.get('/api/task/'+ id)
              .then(response =&gt; {
                  this.$store.commit('SET_TASK',response.data);
                  this.$store.commit('SET_EDIT',true);
              });
          },
          deleteTask: function(id){
              axios.delete('/api/task/delete/' + id)
              this.$store.dispatch('getTask');
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I'am getting "Uncaught TypeError: Cannot read property 'task' of undefined " in this line of code 'return this.$store.state.task.list;'</p>