🛎 vuex 모듈화

🗝 vuex 모듈화 하는 이유

기존에 모듈화를 사용하지 않고 했을때 사이즈가 점점 커짐에 따라 관리가 힘들어지는 단점이 생김
그리하여 업무 성격에 맞게 모듈화를 해야겠다는 필요성을 느낌

 

🎁 기존 방식에서 모듈화 방식을 바뀔때의 모습

기존방식

기존방식

모듈화방식

모듈화 방식

위 방식으로 했을때  처음에는 구조를 잡기가 어렵지만, 좀 더 체계적으로 관리가 된다는 장점이 존재한다.

 

🎊 vuex 모듈화 구조

|---store
|     |---modules
|        |---moduleA.js // moduleA작성
|        |---moduleB.js // moduleB작성
|--index.js // 모듈 등록

📮 moudleA 구조 소스

const moduleA = {
  namespaced: true,
  state: () => ({
    obj1: {},
  }),
  getters: {
    getObj1(state) {
      return state.obj1;
    },
  },
  actions: {
    someAction({ commit }, payload) {
      commit("setObj1", payload);
    },
  },
  mutations: {
    setObj1(state, payload) {
      state.obj1 = payload;
    },
  },
};
export { moduleA };

 

📮 moudleB 구조 소스

const moduleB = {
  namespaced: true,
  state: () => ({
    obj1: {},
  }),
  getters: {},
  actions: {},
  mutations: {},
};
export { moduleB };

 

📨 index.js(모듈등록) 구조 소스

import { createStore } from "vuex";
import { moduleA } from "./modules/moduleA";
import { moduleB } from "./modules/moduleB";
const store = createStore({
  modules: {
    moduleA: moduleA,
    moduleB: moduleB,
  },
});

export { store };

 

📨 main.js vuex 등록 소스

import { createApp } from "vue";
import App from "./App.vue";
import { store } from "./store/index";

const app = createApp(App);
app.use(store);
app.mount("#app");

 

 

📩  후기

확실히 기존에 다 넣어서 관리하는 방식보다는 훨씬 체계적으로 관리된다는 것을 느꼈다. 그리하여 다음 프로젝트에서도 이러한 방식으로 관리하는게 유지보수 입장에서는 좋겠다는 생각이 들었다.