获取vue组件中的vuex模块的状态，getters，动作

Question

我尝试了vuex doc中给出的语法。

store.state.a // - > moduleA的状态 store.state.b // - > moduleB的状态

app.js

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

<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：无法读取未定义的属性'任务'在此一行代码'return this。$ store.state.task.list;'

Answer 1

acoording到vuex的documentation

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

所以你只能使用vuex根上下文干将。

Answer 2

好吧，你想获取不匹配状态的结构状态：

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

如果更改this.$store.state.task.list到this.$store.state.list，那么你应该是所有修补。