[Udemy Vue 완벽가이드 Section15] 222. 모듈로 저장소 구성하기

저장소 및 상태 등이 점차 많아짐에 따라 Vuex가 제공하는 여러 유능한 기능 중에 모듈을 설정해서 저장소를 여러 모듈로 나누는 기능을 사용하면 좋다.

 

애플리케이션에 하나의 저장소가 있고, 그 저장소가 다수의 모듈로 이루어지면, 코드를 관리하기 쉬워진다.

모듈을 설정해두지 않으면, 자동으로 하나의 루트 모듈과 루트 상태만 가지게 되지만,

모듈을 원하는 만큼 추가할 수 있다.

 

예를 들어, counter에 대한 모듈 하나, 인증에 대한 모듈 하나를 가질 수도 있고,

또는 인증은 루트 모듈의 루트 상태에 둔 채,

추가 모듈에 counter를 아웃소싱 할 수도 있다.

 

 

main.js에 counterModule을 생성하는데, 이는 저장소가 아닌 JavaScript 객체이다.

저장소를 생성할 때 전달했던 객체(createStore함수 인수)와 똑같은 기능을 가진 객체이다.

state 메서드, 객체인 mutations, 객체인 actions와 getters로 똑같은 기능을 가진다.

 

state에는 객체를 반환하는데 전역 저장소에 있던 counter 상태를 counterModule로 이동해보자.

그리고 counter와 연관된 mutation도 마찬가지로 잘라내서 counterModule의 mutations에 이동하자..

액션도 동일하게 전역 저장소에서 counter와 연관된 action들을 counterModule의 actions에 이동하자..

getters도 마찬가지.

const counterModule = {
  state() {
    return {
      counter: 0,
    };
  },
  mutations: {
   //생략..
  },
  getters: {
    // 생략..
};

 

메인 저장소인 전역 저장소가 훨씬 깔끔해졌다.

전역 저장소에는 인증 관련 로직만 남았다.

물론, 원한다면 이 로직도 다른 모듈에 이동할 수 있다.

 

 

# 모듈을 메인저장소에 연결하는 방법

이제 모듈을 저장소에 어떻게 연결할까?

→ createStore이라는 객체에 modules 옵션을 추가하면 된다.

modules는 객체이기 때문에 한 저장소로 결합하고자 하는 모든 모듈을 추가할 수 있다.

그리고 각 모듈에 원하는 식별자(key)를 붙일 수 있다. 원하는 이름을 key로 붙이면 된다. 그리고 결합할 모듈 객체를 가리키면 된다.

그럼 counterModule이 저장소에 결합된다.

const counterModule = {
  state() {
    return {
      counter: 0,
    };
  },
  mutations: {
   //생략..
  },
  getters: {
    // 생략..
};

const store = createStore({
  modules: {
   numbers: counterModule //counterModule 모듈을 메인저장소와 연결
  }
  state() {
    return {
      isLoggedIn: false,
    };
  },
  mutations: {
  //생략..
});

저장 후 돌아가보면 전과 동일하게 작동한다.

 

기본적으로 메인 저장소로 결합된 모듈들은 같은 레벨에 결합된다.

따라서 해당 저장소에 모듈을 결합하면 모듈을 만들기 전처럼 게터 등을 메인 저장소에서 바로 찾을 수 있다.

그래서 모듈을 사용해도 액션을 dispatch하고, getter를 전처럼 사용할 수 있는 것.

모듈은 원하는 만큼 만들 수 있다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.