Vuex - 프로젝트 모듈화 하기

간단한 프로젝트에서는 하나의 store에 그렇게 많은 코드가 들어가지 않아 추적하기 쉽겠지만, 컴포넌트나 속성등이 늘어나면 코드가 눈에 잘 들어오지 않을 수 있다.

이런 문제는 모듈화를 통해 개선할 수 있다.

• 기본적인 store의 구조

import {createStore} from 'vuex'

export default createStore({
    state: {

    },
    getters: {

    },
    mutations: {

    },
    actions: {
    
    }
});

1. import와 export를 활용한 모듈화

속성들을 별도의 파일로 만들어 모듈화할 수 있다.

import {createStore} from 'vuex'
import * as getters from 'store/getters'
import * as mutations from 'store/mutations'
import * as actions from 'store/actions'

export default createStore({
    state: {

    },
    getters: getters,
    mutations: mutations,
    actions: actions
});

2. modules속성을 활용한 모듈화

// store.js
import todo from 'modules/todo.js'

export default createStore({
	modules: {
    	// 모듈 명칭 : 모듈 파일명
    	moduleA : todo,
        // 모듈 명칭과 파일명이 일치할 경우
        todo
    }
})

// todo.js
const state ={}
const getters ={}
const mutations ={}
const actions ={}

todo리스트 모듈화 해보기

1. store 하위에 modules 폴더 생성
2. 모듈화를 하기 위해 todoApp.js 생성
3. store.js에 있던 각 속성값을 todoApp.js에 정의해주기

const storage = {
    fetch() {
        const arr = [];
        // 생략
                }
            }
        }
        return arr;
    }
}

const state = {
    todoItems: storage.fetch()
};

const getters = {
    storedTodoItems(state) {
        // 생략
    }
};

const mutations = {
    addOneItem(state, todoItem){
        // 생략
        },

    removeItem(state, payload) {
        // 생략   
    },

    toggleItem(state, payload) {
        // 생략
    },

    clearAll(state) {
        // 생략
    }
};

export default {
    state,
    getters,
    mutations
}

4. store.js의 modules 속성에 todoApp모듈을 등록해주기

import {createStore} from 'vuex'
import todoApp from './modules/todoApp'

export default createStore({
    modules: {
        todoApp
    }
})