상태, getters 및 vue 구성 요소에서 vuex 모듈의 작업을 얻으려고

Question

vuex doc에 주어진 구문을 시도했습니다.

store.state.a // -> moduleA의 상태 store.state.b // -> moduleB의 상태

는

/** 
* 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) => { 
      state.edit = data 
     }, 
     SET_LIST: (state, data) => { 
      state.list = data 
     }, 
     SET_NOTE: (state, data) => { 
      state.note.id = data.id; 
      state.note.note = data.note; 
     }, 
     SET_EMPTY: (state) => { 
      state.note.note = ''; 
     }  
    }, 
    getters: { 
     noteCount: (state) => state.list.length 
    }, 
    actions : { 
     getNote: ({commit,state}) => { 
      axios.get('/api/note/list') 
      .then((response) => { 
       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) => { 
      state.edit = data 
     }, 
     SET_LIST: (state, data) => { 
      state.list = data 
     }, 
     SET_TASK: (state, data) => { 
      state.task.id = data.id; 
      state.task.body = data.body; 
     }, 
     SET_EMPTY: (state) => { 
      state.task.body = ''; 
     }  
    }, 
    getters: { 
     taskCount: (state) => state.list.length 
    }, 
    actions : { 
     getTask: ({commit,state}) => { 
      axios.get('/api/task/list') 
      .then((response) => { 
       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 
}); 

TaskList.vue

app.js

<template> 
    <div > 
     <h4>{{count}} Task(s)</h4> 
     <ul class="list-group"> 
      <li class="list-group-item" v-for="item in list"> 
       {{item.body}} 
       <button class="btn btn-primary btn-xs" @click="showTask(item.id)">Edit</button> 
       <button class="btn btn-danger btn-xs" @click="deleteTask(item.id)">Delete</button> 
      </li> 
     </ul> 
    </div> 
</template> 
<script> 
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 => { 
       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'); 
     } 
    } 
} 
</script> 

'Uncaught TypeError :이 속성에서'undefined 속성 '을 읽을 수 없습니다. 코드 줄 '반환이. $ store.state.task.list;'

Answer 1

그래서 당신은 단지 vuex 루트 컨텍스트에서 게터를 사용할 수 있습니다.

Answer 2

글쎄, 당신이 당신의 국가의 구조와 일치하지 않는 검색하려는 상태 : 당신이 this.$store.state.task.listthis.$store.state.list에 변경하는 경우

state: { 
    edit: false, 
    list:[], 
    note: { 
     note : '', 
     id : '' 
    } 
}, 

그러면 당신은 모든 걸 포기하고 패치해야합니다. vuex의 documentation

By default, actions, mutations and getters inside modules are still registered under the global namespace

에 acoording

는