[Vue.js] 5 ) Vuex

Yoojin Jeong·2021년 2월 8일
0

Vuex 란?

Vuex란 데이터와 해당 데이터의 상태를 한 번에 관리하는 상태 관리를 위한 확장 라이브러리이다. 컴포넌트의 구조가 복잡해지고 애플리케이션의 규모가 커지면 데이터를 관리하기 어려워진다. Vuex를 사용하면 모든 컴포넌트에서 하나의 데이터를 참조하기 때문에 정합성을 유지하기 쉽다.

Vuex 도입 장점

  • 여러 개의 컴포넌트가 데이터를 공유
  • 데이터 상태와 관련된 처리를 공통화
  • 큰 상태 관리도 모듈을 사용해 간단하게 분리

Vuex를 기반으로 관리되는 데이터도 리액티브 데이터이므로, 컴포넌트 구조 상태와 관계없이 사용하고 있는 곳에서 알아서 동기화된다.

상태 관리 전용 라이브러리이므로 데이터를 저장하는 기능 외에도 애플리케이션 레벨에서 데이터를 감시하는 기능이나 상태를 그룹으로 만들어 관리하는 모듈 기능 등 상태 관리와 관련된 다양한 기능을 가지고 있다.

$on과 $emit을 사용한 이벤트 버스는 어떤 컴포넌트끼리 국소적인 상태교환을 하는 반면 Vuex는 특정 컴포넌트끼리 데이터를 교환하는 형태가 아니라, 애플리케이션 전체의 상태를 하나의 어떤 객체로 관리하는 형태이다.

Vuex의 기능

컴포넌트에서 스테이트를 변경하고 싶으면 액션뮤테이션을 거쳐야 한다.

스테이트

스테이트(state)는 스토어에서 관리하고 있는 상태를 나타내며, 컴포넌트로 이야기하면 data라고 할 수 있다. 스테이트는 뮤테이션 이외의 장소에서는 변경하면 안됨.

const store = new Vuex.Store({
   state: {
      message:'메세지'
   }
})
// 호출하는 방법
store.state.message

게터

게터(getter)는 스테이트를 추출하기 위한 산출 데이터로, 컴포넌트로 이야기하면 computed와 methods의 중간 기능을 하는 존재다. 산출 속성과 다르게 매개 변수를 받을 수 있지만 세터 기능은 없다. 메서드의 매개변수로 사용할 수 있는 속성 또는 메서드를 전달할 수 있다.

const store = new Vuex.Store({
    //...
    getters:{
      //단순하게 상태 리턴하기
      count(state,getters,rootState,rootGetter){
         return state.count
      },
      // 리스트 요소들의 price 속성을 기반으로 최댓값을 찾아 리턴하기
      max(state){
        return state.list.reduce((a,b) => {
          return a > b.price ? a: b.price
          },0)
      }
   }
})

뮤테이션

스테이트를 변경할 수 있는 방법이다. 컴포넌트의 methods와 같다. 매개변수로 state,payload(커밋에서 전달된 매개변수) 정보를 받는다.

const store = new Vuex.Store({
  //...
  mutations:{
     mutationType(state,payload) {
        state.count = payload
     }
  }
})

대규모 개발에서는 메서드 이름에 상수가 사용되기도 한다. 이 때 뮤테이션과 액션 메서드를 '타입'이라고 부른다. 이 메서드는 직접 호출하지 않고 커밋이라는 방법을 사용해서 호출한다. 호출을 위해 타입핸들러 개념을 사용한다.

커밋
커밋은 등록되어 있는 뮤테이션을 호출할 수 있게 해주는 인스턴스 메서드이다. 컴포넌트의 $emit과 비슷함. 임의의 매개변수를 가질 수 있으며, 액션 내부에서도 사용할 수 있다.

액션

액션은 비동기 처리를 포함할 수 있는 메서드이다. 데이터 가공 또는 비동기 처리를 실시한 후, 그 결과를 뮤테이션으로 커밋한다.

const store = new Vuex.Store({
  //...
  actions:{
     actionType({ commit },payload) {
         // 액션 내부에서 커밋하기
         commit('mutationType')
     }
  }
})

여러 기능을 사용하기 위해 내용을 확인하거나 상태를 변경하는 등의 세부적인 처리는 모두 액션 내부에서 하는 것이 좋다. 오류도 뮤테이션이 아니라 액션에서 throw 하는 것이 좋다.

디스패치
디스패치는 등록되어 있는 액션을 호출하는 인스턴스 메서드이다. 다른 액션 내부에서도 사용할 수 있다. 임의의 매개변수를 가질 수 있으며, payload를 사용한다. 이 때 payload는 뮤테이션과 같다.

store.dispatch('actionType', payload)

비동기 처리가 없는 경우 액션을 거치지 않고 직접 커밋할 수도 있다. 하지만 여러 사람들이 함께 개발할 때 혼란을 주지 않도록 모두 dispatch로 통일하는 것을 추천함.

/ ## 컴포넌트에서 스토어 사용하기

모듈 사용하기

관리하는 정보가 너무 많아져 버린 스토어는 모듈화해서 유지 보수성을 높일 수 있다. 예를 들어 사용자 정보 또는 상품 정보처럼 연관성이 거의 없는 정보는 별도로 관리해도 된다.

// 모듈을 따로따로 정의하기
const moduleA = {
   state: { ... },
   mutations: { ... }
}
const moduleB = {
   state: { ... },
   mutations: { ... }
}
// 모듈을 스토어에 등록하기
const store = new Vuex.Store({
   modules: {
     moduleA,
     moduleB
   }
})
// 각 모듈의 상태에 접근하기
store.state.moduleA // moduleA의 상태
store.state.moduleB // moduleB의 상태

/## 이외의 기능과 옵션

0개의 댓글