[Vue.js] vuex 개념

vuex

Vue.js application에 대한 상태관리패턴 + 라이브러리

application 모든 component들의 중앙 저장소 역할 (데이터 관리)

 

기존 Vue.js의 문제점

상위(부모) 하위(자식)의 단계가 많이 복잡해 진다면 데이터의 전달하는 부분이 매우 복잡해짐

동위 컴포넌트 또한 종류가 많다면 매우 복잡해짐

=> vuex를 사용하게 되면 중앙 저장소가 존재하게 되며 아무대서나 꺼내 사용할 수 있게 된다

 

모든 vue 프로젝트는 vuex를 써야하는가? -> NO

단순한 구조라면 $emit props을 통해 직접 부모 자식으로 이동하는 것이 편리

 

상태관리패턴

- 상태는 앱을 작동하는 원본 소스 (= data)

- 뷰는 상태의 선언적 매핑 (=template)

- 액션은 뷰에서 사용자 입력에 대해 반응적으로 상태를 바꾸는 방법 (=method)

 

vuex의 핵심 컨셉

- vue에서의 데이터가 vuex의 state

- vue에서의 method가 vuex의 actions, mutations (vuex에 와서 동기/비동기로 분류됨)

   - actions : 비동기 (axios)

   - mutations : 동기 (데이터를 바꾸는 역할)

 

- Actions에서 동기 코드를 실행하더라도 에러 발생 안함 => state를 변경할 수 있음

   - 하지만 비동기를 통해서 얻어온 data를 통해 state를 변경하려고 할 때 문제가 발생

      - 비동기는 데이터가 넘어올때까지 기다리고 수행하는 것을 보장하지 않음

      - 따라서 Actions에서 얻은 data를 갖고 Mutations에 state 변경을 요청해야함

 

=> MVC 패턴 에서 Service를 거치지 않고 Controller에서 바로 DB에 접근하지 않는 이유와 유사하다

 

순수한 actions와 mutations는 직접 호출할 수 없다 (직접 호출할 수 있는 방법이 없는것은 아니다)

Actions는 Dispatch를 이용해 호출해야 한다.

Mutation는 Actions의 Commit을 이용해 호출해야 한다.

 

vue에서는 computed 한번만 계산하고 데이터를 계속 끌어다 쓴다.

vuex에서는 state를 getters에 등록하고 계속 끌어다 사용한다.

 

결과적으로 vue => vuex 매핑은 아래와 같다

data => state

comuted => getters

method => actions/mutations