Vuex / 상태관리 / Vuex 패턴 및 요소

Vuex 란?

Vue.js 의 상태 관리를 위한 패턴이자 라이브러리이다. 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있다.

 

Vuex 를 사용하지 않은 경우

컴포넌트 기반 프레임워크는 한 화면을 작은 단위의 컴포넌트 여러 개로 쪼개어 구성한다. 예를 들어, 뷰에서는 컴포넌트 간 데이터 전달을 위해 emit, props 등을 사용하는데 여기서 몇 가지 문제점이 있다.

• 데이터의 움직임을 확인할 수 없다.
• 부모-자식 컴포넌트의 관계가 복잡해지면 데이터의 이동을 파악하기 어렵다.
• 컴포넌트로부터 데이터를 전달받기 위해 중간에 거쳐야 할 컴포넌트가 많아진다.

먼저, 자식 컴포넌트의 깊이에 따라 props, emit 의 수가 많아지며 관리에 어려움이 생긴다. 게다가 부모-자식 관계가 아닌 다른 컴포넌트에게 값을 전달할 수 없다. vue 에서는 이 문제점을 해결하기 위한 방법으로 event bus 와 vuex 를 이용하는 방법을 제시한다. 두 방법의 차이점은 vuex 는 상태 관리와 추적이 가능하다는 것이다. event bus 는 어디서 이벤트를 보냈고 받았는지 알기 어려워 전달이 명시적이지 않다.

 

상태 관리는 왜 필요할까?

작은 단위로 구성된 여러 개의 컴포넌트가 어떻게 통신하고 어떤 데이터를 전달하는지 쉽게 파악하려면 이를 한 곳에서 관리하는 패턴이 필요하다. Vue 에서는 vuex 라는 상태 관리 라이브러리를 사용하여 데이터 전달과 이벤트 통신을 한 곳에서 관리한다.

 

Vuex 특징

여러 컴포넌트가 공유하는 데이터를 한 곳에 저장하는 중앙 집중식 store 와 저장소의 상태가 변경되면 효율적으로 대응하고 업데이트하는 반응형의 특징을 가진다. 저장소의 상태는 직접 변경할 수 없고 커밋을 이용해 모든 상태에 대해 추적 가능한 기록을 남긴다.

• 중앙 집중식 저장소
• 반응형 저장소 상태
• 커밋을 이용한 변이

 

---

Vuex  패턴

Vuex 는 React 의 Flux 패턴에서 기인하였다. Flux 패턴은 MVC 패턴의 양방향 데이터 흐름의 특징과는 다르게 단방향 데이터 흐름이다.

MVC 패턴 vs Flux 패턴

• actions: 화면에서 발생하는 이벤트 또는 사용자의 입력
• dispatcher: 데이터를 변경하는 방법, method, model 을 바꾸기 위한 역할
• model: 화면에 표시할 데이터
• view: 사용자에게 보이는 화면, 화면에서 다시 action 을 호출

 

Vuex 요소

✔️ State (상태)

여러 컴포넌트가 공유할 데이터

state 는 mutation 을 통해서만 변경하는 것을 권장

컴포넌트에서는 this.$store.state.상태명으로 사용

// Vue
data: {
    message: 'Hello Vue.js'
}
// Vuex
state: {
    message: 'Hello Vue.js'
}

// Vue
<p>{{ message }}</p>
// Vuex
<p>{{ this.$store.state.message }}</p>

 

✔️ Actions

비동기 처리 로직을 선언하는 메서드

데이터 요청, Promise, async 등과 같은 비동기 처리 선언

api 호출과 그 결과에 대해 return 및 mutations 를 사용

컴포넌트에서는 this.$store.dispatch('액션명') 으로 사용

// store.js
state: {
    num: 10
},
mutations: {
    doubleNumber(state) {
        state.num * 5;
    }
},
actions: {
    delayDoubleNumber(context) {     # context로 store의 메서드와 속성 접근
        context.commit('doubleNumber'); # 트리거
    }
}


// App.vue
this.$store.dispatch('delayDoubleNumber');

 

✔️ Mutations (변이)

state 의 값을 변경할 수 있는 유일한 방법

동기적으로 수행됨

컴포넌트에서는 this.$store.commit('변이명') 으로 사용

// store.js
state: {
    num: 10
},
mutations: {
   printNumbers(state) {
       return state.num;
  },
   sumNumbers(state, anotherNum) {
       return state.num + anotherNum;
  }
}


// App.vue
this.$store.commit('printNumbers');    //10
this.$store.commit('sumNumbers', 20);  //30

 

✔️ Getters/Computed

state 값을 접근하는 속성이자 computed() 처럼 미리 연산된 값을 접근하는 속성

state 에 대한 연산을 하고 그 결과를 view 에 바인딩함

// store.js
state: {
    num: 10
},
getters: {
    getNumber(state) {
        return state.num;
    },
    doubleNumber(state) {
        return state.num * 2;    
    }
}


<p>{{ this.$store.getters.getNumber }}</p>
<p>{{ this.$store.getters.doubleNumber }}</p>
// 헬퍼함수로 state 접근하는 법을 간소화할 수 있음

 

참고자료 및 출처 🙇‍♂️

http://www.incodom.kr/VueJS/Vuex

https://dev-jsk.tistory.com/75