在 vue 组件中获取 vuex 模块的状态、getter、动作

Question

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

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>

我在这行代码'return this.$store.state.task.list;'中得到“Uncaught TypeError: Cannot read property 'task' of undefined”

Answer 1

根据vuex的documentation

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

所以你只能在 vuex 根上下文中使用 getter。

Answer 2

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

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

如果您将this.$store.state.task.list 更改为this.$store.state.list，那么您应该全部打补丁。