Vuex 10. Store 모듈화, 프로젝트 구조화

여러가지 속성 들을 분리시키려면 어떻게 해야하는지

• Vuex.Store({}) 속성의 내용을 ES6의  Modules로 연결시킨다.

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

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

---

속성 파일의 분리

• ES6 Modules 의 Export => Import 문을 사용한 속성의 모듈화

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

//use() 는 전역적으로 기능을 추가할 때 사용한다. &store 로 접근 가능하다.
Vue.use(Vuex);

// Function 으로 따로 뺌
const storage = {
  fetch() {
    const arr = [];
    //ES6
    const map = Object.entries(localStorage);
    map.forEach((entry,index) => {
      if(entry[0] !== 'loglevel:webpack-dev-server'){
        const item = JSON.parse(entry[1]);
        arr.push(item)
      }
      console.log(arr)
      });
    return arr;
  }
};

export const store = new Vuex.Store({
  state: {
    // 전역적으로 사용되는 데이터
    todoItems: storage.fetch()
  },
  getters,
  mutations

});

 

분리시킨 속성 파일

//mutations

const  addOneItem = (state, TodoItem) => {
    const obj = {completed: false, item: TodoItem};
    //Object를 저장하기위해 stringify를 사용하는 것도 좋다.
    localStorage.setItem(TodoItem,JSON.stringify(obj));
    // mutations 는 반드시 state 인자로만 접근하다.
    state.todoItems.push(obj);
  };

  const removeOneItem = (state,itemInfo) => {

    localStorage.removeItem(itemInfo.todoItem.item);
    //배열요소 빼기 : (배열을 직접적으로 건드림) , slice(새로운 배열을 리턴 함)
    state.todoItems.splice(itemInfo.index, 1);
  };

  const toggleOneItem = (state,itemInfo) => {
    // 중앙 컴포넌트에서 관리되야한다.
    state.todoItems[itemInfo.index].completed = !state.todoItems[itemInfo.index].completed

    const item = itemInfo.todoItem.item;

    localStorage.removeItem(item);
    localStorage.setItem(item,JSON.stringify(itemInfo.todoItem));
  };

  const clearAllItems = (state) => {
    state.todoItems = [];
    localStorage.clear();
  };

  export { addOneItem, removeOneItem, toggleOneItem, clearAllItems }

 

---

모듈화

• 데이터의 속성에 따라 다른 Store 로 나누어 줌으로서 Store 가 비대해지는 것을 막을 수 있다.
• Vuex.Store 의 modules 속성을 사용한다.

//store.js

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

export const store = new Vuex.Store({
	moudles : {
    	// or todo (ES6)
        // id : ModuleName
    	moduleA: todo,
    }
});


//todo.js 데이터 관련 Store 속성이 들어가면 된다.
const state = {};
const getters = {};
const mutations = {};
const actions = {};

 

사용 예시

• main.js 에 있는 Vuex 에 기술된 Store 생성자의 속성은 modules 만 남게 된다.
• 객체 형식으로 속성 값들의 내용을 채워준다.
• modules 속성에 키:값으로 기술한다.

//main.js

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

//use() 는 전역적으로 기능을 추가할 때 사용한다. &store 로 접근 가능하다.
Vue.use(Vuex);

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

따로 분리시킨 Store 파일

// todoApp.js

const storage = {
  fetch() {
    const arr = [];
    //ES6
    const map = Object.entries(localStorage);
    map.forEach((entry,index) => {
      if(entry[0] !== 'loglevel:webpack-dev-server'){
        const item = JSON.parse(entry[1]);
        arr.push(item)
      }
      console.log(arr)
    });
    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};
     //Object를 저장하기위해 stringify를 사용하는 것도 좋다.
     localStorage.setItem(TodoItem,JSON.stringify(obj));
     // mutations 는 반드시 state 인자로만 접근하다.
     state.todoItems.push(obj);
   },

   removeOneItem(state,itemInfo) {
     localStorage.removeItem(itemInfo.todoItem.item);
     //배열요소 빼기 : (배열을 직접적으로 건드림) , slice(새로운 배열을 리턴 함)
     state.todoItems.splice(itemInfo.index, 1);
   },

   toggleOneItem(state,itemInfo) {
     // 중앙 컴포넌트에서 관리되야한다.
     state.todoItems[itemInfo.index].completed = !state.todoItems[itemInfo.index].completed

     const item = itemInfo.todoItem.item;

     localStorage.removeItem(item);
     localStorage.setItem(item,JSON.stringify(itemInfo.todoItem));
   },

   clearAllItems(state) {
     state.todoItems = [];
     localStorage.clear();
   }
 };

// export default 는 단 한번만 export 시킨다는 의미.
 export default {
   state,
   getters,
   mutations
 }