Vuex - 프로젝트 구조화 및 모듈화

*프로젝트 구조화와 모듈화 방법1

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

​

예제)

// store.js

import Vue form 'vue'

import Vuex from 'vuex'

​

export const store = new Vuex.Store({

state : {},

getter : {},

mutations : {},

actions : {}

});

​

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

​

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

import Vue from 'vue'
import Vuex form '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.Stroe({
modules:{
moduleA : todo, //모듈 명칭 : 모듈 파일명
todo // todo : todo
}
});

​

//todo.js

const state = {}
const getters = {}
const mutation = {}
const actions = {}

​