앱 규모가 작은 경우

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,
});

• example

//mutations.js
const addOneItem = (state, todoItem) => { ... };
const removeOneItem = (state, payload) => { ... };
const toggleOneItem = (state, payload) => { ... };
const clearAllItems = (state) => { ... };
export { addOneItem, removeOneItem, toggleOneItem, clearAllItems };

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

Vue.use(Vuex);

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

앱 규모가 큰 경우

• 앱이 비대해져 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({
	mudules: {
    	moduleA: todo, //모듈 명칭 : 모듈 파일명
      	todo // todo: todo
    }
});

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

• example

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

Vue.use(Vuex);

export const store = new Vuex.store({
	mudules: {
    	todoApp
    }
});

// todoApp.js
const state = {...};
const getters = {...};
const mutations = {
  addOneItem(state, todoItem) {...},
  removeOneItem(state, payload) {...},
  toggleOneItem(state, payload) {...},
  clearAllItems(state) {...},
};

export default {
  state,
  getters,
  mutations,
};