Vuex 구조화와 모듈화

프로젝트 구조화와 모듈화

방법 1:

• 변경전

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

export const store = new Vuex.Store({  
state: {},  
getters: {},  
mutations: {},  
actions: {}  
});

• 변경후 (ES6의 Import & Export를 이용하여 속성별로 모듈화)

import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from 'store/getters.js'
import * as mutations from 'store/mutations.js'
import * as actions from 'store/actions.js'

export const store = new Vuex.Store({
   state: {},
   getters: getters,
   mutations: mutations,
   actions: actions
});

방법 2:

• 앱이 비대해져서 1개의 store로는 관리가 힘들 때 modules 속성 사용

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import todo from 'modules/todo.js'

export const store = new Vuex.Store({
   modules: {
       moduleA: todo, // 모듈 명칭 : 모듈 파일명
       todo // todo : todo
   } 
});

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