在vue组件中获取vuex模块的状态，获取器，操作 [英] Getting state, getters, actions of vuex module in vue component

问题描述

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

I tried the syntax given in vuex doc.

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

store.state.a // -> moduleA's state store.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

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

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

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

so you can only use getters in vuex root context.

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