在vue组件中获取vuex模块的state、getters、action
Getting state, getters, actions of vuex module in vue component
我尝试了 vuex 文档中给出的语法。
store.state.a // -> 模块A的状态
store.state.b // -> 模块 B 的状态
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: Cannot read property 'task' of undefined " 'return this.$store.state.task.list;'
那么,您尝试检索的状态与您的状态结构不匹配:
state: {
edit: false,
list:[],
note: {
note : '',
id : ''
}
},
如果您将 this.$store.state.task.list
更改为 this.$store.state.list
那么您应该已经全部修补好了。
根据 vuex 的 documentation
By default, actions, mutations and getters inside modules are still
registered under the global namespace
所以你只能在 vuex root 上下文中使用 getters。
我尝试了 vuex 文档中给出的语法。
store.state.a // -> 模块A的状态 store.state.b // -> 模块 B 的状态
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: Cannot read property 'task' of undefined " 'return this.$store.state.task.list;'
那么,您尝试检索的状态与您的状态结构不匹配:
state: {
edit: false,
list:[],
note: {
note : '',
id : ''
}
},
如果您将 this.$store.state.task.list
更改为 this.$store.state.list
那么您应该已经全部修补好了。
根据 vuex 的 documentation
By default, actions, mutations and getters inside modules are still registered under the global namespace
所以你只能在 vuex root 上下文中使用 getters。