vue 구성 요소에서 vuex 모듈의 상태, getter 및 작업을 가져오는 중

vue 구성 요소에서 vuex 모듈의 상태, getter 및 작업을 가져오는 중

vuex doc에 제시된 구문을 사용해 보았습니다.

store.state.a // -> 모듈A의 state store.state.b // -> 모듈B의 상태

app.module

/**
 * 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
});

태스크 리스트표시하다

<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>

이 코드 행에 "Uncatched TypeError: Uncannot read property 'task of defined"라는 메시지가 표시됩니다.이 코드는 "return this" 입니다.$store.state.task.list;'

vuex 문서 참조

기본적으로는 모듈 내의 액션, 돌연변이 및 getter는 글로벌 네임스페이스에 등록되어 있습니다.

vuex 루트 컨텍스트에서만 getter를 사용할 수 있습니다.

검색하려는 상태가 해당 주의 구조와 일치하지 않습니다.

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

바꾸면this.$store.state.task.list로.this.$store.state.list그럼 다 고쳐야죠

언급URL : https://stackoverflow.com/questions/42575465/getting-state-getters-actions-of-vuex-module-in-vue-component