在vue组件中获取vuex模块的状态，获取器，操作

问题描述

我尝试了vuex文档中给出的语法.

I tried the syntax given in vuex doc.

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

store.state.a // -> moduleA's statestore.state.b // -> moduleB's state

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:无法读取未定义的属性'task'"

I'am getting "Uncaught TypeError: Cannot read property 'task' of undefined " in this line of code 'return this.$store.state.task.list;'

推荐答案

根据文档 vuex

，因此您只能在vuex根上下文中使用getters.

so you can only use getters in vuex root context.

这篇关于在vue组件中获取vuex模块的状态，获取器，操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！