[Vue.js] Vuex - 프로젝트 구조화 및 모듈화

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

• Vuex.Store({})의 속성들을 모듈로 연결
• ES6의 Import & Export를 이용하여 속성별로 모듈화

// store.js
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 -> 명칭 같을 경우 통합 가능(ES6 문법)
  getters,
  mutations: mutations,
  actions: actions
})

Todo App 적용 예제

store.js

import Vue from "vue";
import Vuex from "vuex";
 
// getters
import * as getters from './getters.js'
// mutations
import * as mutations from './mutations.js'
 
Vue.use(Vuex);
 
const storage = {
  fetch() {
    const arr = [];
    if (localStorage.length > 0) {
      for (let i = 0; i < localStorage.length; i++) {
        if (localStorage.key(i) !== "loglevel:webpack-dev-server") {
          arr.push(JSON.parse(localStorage.getItem(localStorage.key(i))));
        }
      }
    }
    return arr;
  },
};
 
export const store = new Vuex.Store({
  state: {
    todoItems: storage.fetch(),
  },
  getters,
  mutations
});

getters.js (src/store)

export const storedTodoItems = (state) => {
    return state.todoItems;
}

mutations.js (src/store)

const addOneItem = (state, todoItem) => {
  const obj = { completed: false, item: todoItem };
  localStorage.setItem(todoItem, JSON.stringify(obj));
  state.todoItems.push(obj);
};
const removeOneItem = (state, payload) => {
  localStorage.removeItem(payload.todoItem.item);
  state.todoItems.splice(payload.index, 1);
};
const toggleOneItem = (state, payload) => {
  state.todoItems[payload.index].completed = !state.todoItems[payload.index]
    .completed;
  localStorage.removeItem(payload.todoItem.item);
  localStorage.setItem(payload.todoItem.item, JSON.stringify(payload.todoItem));
};
const clearAllItems = (state) => {
  localStorage.clear();
  state.todoItems = [];
};
 
export { addOneItem, removeOneItem, toggleOneItem, clearAllItems }

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

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

Todo App 적용 예제

store.js

import Vue from "vue";
import Vuex from "vuex";
 
// todo Modules
import todoApp from './modules/todoApp.js'
 
Vue.use(Vuex);
 
export const store = new Vuex.Store({
  modules: {
    todoApp
  }
});

todoApp.js (src/store/modules)

const storage = {
  fetch() {
    const arr = [];
    if (localStorage.length > 0) {
      for (let i = 0; i < localStorage.length; i++) {
        if (localStorage.key(i) !== "loglevel:webpack-dev-server") {
          arr.push(JSON.parse(localStorage.getItem(localStorage.key(i))));
        }
      }
    }
    return arr;
  },
};
 
const state = {
  todoItems: storage.fetch(),
};
 
const getters = {
  storedTodoItems(state) {
    return state.todoItems;
  },
};
 
const mutations = {
  addOneItem(state, todoItem) {
    const obj = { completed: false, item: todoItem };
    localStorage.setItem(todoItem, JSON.stringify(obj));
    state.todoItems.push(obj);
  },
  removeOneItem(state, payload) {
    localStorage.removeItem(payload.todoItem.item);
    state.todoItems.splice(payload.index, 1);
  },
  toggleOneItem(state, payload) {
    state.todoItems[payload.index].completed = !state.todoItems[payload.index]
      .completed;
    localStorage.removeItem(payload.todoItem.item);
    localStorage.setItem(
      payload.todoItem.item,
      JSON.stringify(payload.todoItem)
    );
  },
  clearAllItems(state) {
    localStorage.clear();
    state.todoItems = [];
  },
};
 
export default {
    state,
    getters,
    mutations
}