Vuex modules

1 개요

Vuex modules

Vuex 모듈

• 단일 상태 트리를 사용하면, 애플리케이션의 모든 상태가 하나의 큰 객체 안에 담기게 된다.
• 규모가 커지다보면 그 저장소가 너무 비대해질 수 있다.
• 이러한 단점을 해소하기 위해 Vuex는 저장소를 모듈별로 나눌 수 있게 되어 있다.
• 각 모듈은 각자의 상태, 변이, 액션, 게터뿐만 아니라 중첩된(nested) 모듈도 가질 수 있다.

JavaScript

Copy

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA의 state
store.state.b // -> moduleB의 state

2 같이 보기

• Vuex 애플리케이션 구조

3 참고

• https://vuex.vuejs.org/guide/modules.html
• https://vuex.vuejs.org/kr/guide/modules.html