Vuejs2 获取vue组件中vuex模块的状态、获取程序和操作

我尝试了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
});

任务列表.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>

{{count}}任务


{{item.body}
编辑
删除


导出默认值{
计算：{
列表（）{
返回此。$store.state.task.list；
},
计数（）{
返回此。$store.getters.taskCount；
}
},
安装的（）{
这是。$store.dispatch（'getTask'）；
},
方法：{
showTask:函数（id）{
axios.get（'/api/task/'+id）
。然后（响应=>{
这是$store.commit（'SET_TASK'，response.data）；
此.$store.commit（'SET_EDIT'，true）；
});
},
deleteTask:函数（id）{
axios.delete（'/api/task/delete/'+id）
这是。$store.dispatch（'getTask'）；
}
}
}

---

我在这行代码“returnthis.$store.state.task.list；”中得到“uncaughttypeerror:无法读取未定义的属性'task'

您试图检索的状态与您的状态结构不匹配：

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

---

如果您将

this.$store.state.task.list

更改为

this.$store.state.list

，则您应该全部修补。

嗯，您尝试检索的状态与您的状态结构不匹配：

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

如果将

this.$store.state.task.list

更改为

this.$store.state.list

，则应根据vuex的

默认情况下，模块内的操作、突变和getter仍然是 在全局命名空间下注册

因此，只能在vuex根上下文中使用getter

a根据vuex的

默认情况下，模块内的操作、突变和getter仍然是 在全局命名空间下注册

---

因此，只能在vuex根上下文中使用getter

task是thal list所属的模块。经过几次更正后，现在我可以使用此.store.state.task.list获取状态。但是当我对getter使用相同的语法时，即“返回此.store.getters.task.taskCount；”显示的错误是“UncaughtTypeError:无法读取未定义的属性'taskCount'。但当我像这样编写“returnthis.$store.getters.taskCount；”时，一切都正常。好的，这基本上显示了我上面概述的相同的东西。你期望的商店结构和它的实际结构之间似乎存在着脱节。您是否正在为Chrome使用Vue.js Devtools插件？这可能会帮助您更轻松地解决这些类型的问题。是的，我使用的是Vue.js devtools。我遇到的问题与无法通过$store.getters.module.getX访问模块getters完全相同。你找到原因了吗？task是thal list所属的模块。经过几次更正后，现在我可以使用这个$store.state.task.list来获取状态。但是当我对getter使用相同的语法时，即“返回这个$store.getters.task.taskCount；”显示的错误是“UncaughtTypeError:无法读取未定义的属性'taskCount'。但当我像这样编写“returnthis.$store.getters.taskCount；”时，一切都正常。好的，这基本上显示了我上面概述的相同的东西。你期望的商店结构和它的实际结构之间似乎存在着脱节。您是否正在为Chrome使用Vue.js Devtools插件？这可能会帮助您更轻松地解决这些类型的问题。是的，我使用的是Vue.js devtools。我遇到的问题与无法通过$store.getters.module.getX访问模块getters完全相同。你找到原因了吗？