48. 프로젝트 구조화와 모듈화 방법 1, 2

아래와 같은 store 구조를 어떻게 모듈화 할 수 있을까?

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

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

Vuex.Store({}) 의 속성을 모듈로 연결 ↓

 

 

- ES6의 Import & Export 를 이용하여 속성별로 모듈화

import Vue from 'vue'
import Vuex from 'vuex'
import * as getter 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:todom //모듈 명칭 : 모듈 파일명
        todo // todo: todo
    }
});

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