store 모듈 합치기

이태규·2022년 3월 18일
0

vue

목록 보기
19/21

의도: store의 기능을 모듈에 나눠서 관리한다.

import { createStore } from 'vuex';
import { moduleA } from './module/moduleA';
import { moduleB } from './module/moduleB';

export default createStore({
    modules : {moduleA, moduleB}
});

모듈 A

export const moduleA = {
    namespaced : true,

    state:{
        logged: false,
        menu : 1,

    },

    getters:{
        getLogged(state){
            return state.logged;
        },
        getMenu(state){
            return state.menu;
        }
    },

    mutations:{
        setLogged(state, value){
            state.logged = value
        },
        setMenu(state, value){
            state.menu = value;
        }
    },

    actions:{

    }
}

모듈 B

export const moduleB = {
    namespaced : true,

    state:{
        num : 10,
    },
    getters:{
        getNum(state){
            return state.num;
        }
    },
    mutations:{
        setNum(state,value){
            state.num = value;
        }
    },
    actions:{

    }
}

사용하기

setter

store.commit("moduleA/setLogged", true);

getter

logged : computed(()=> store.getters["moduleA/getLogged"])
profile
한 걸음씩 나아가자

0개의 댓글