[Vue.js] 영화 검색 사이트 예제 - 35. Vuex 핵심 정리

그동안 사용해본 Vuex의 개념을 정리해보자

 

Store 개요

부모 형제 관계에서는 직접적인 데이터 통신이 존재한다.

그러나 그 이외의 관계에서는 그러한 통신 기능이 존재하지 않으므로, Store라는 개념을 사용한다.

이 store에서 데이터들을 구분짓기 위해 모듈 개념이 사용된다. (About, Movie)

 

Vuex 구조

Vuex는 위와 같은 속성을 가진다.

각각의 속성들은 Vue에서 사용하는 속성과 유사한 의미를 가진다.

getters는 computed와 마찬가지로 state의 데이터를 가공하여 새로운 데이터를 만들어 내는 속성이다.

methods는 mutations와 actions로 나뉘는데

mutations는 state의 상태를 변화시키는 용도로만 사용되고

actions는 그 외의 모든 methods를 포함한다. 보통 비동기로 사용한다.

보통 대부분의 로직은 actions에 작성되는데, 따라서 actions는 세 속성 모두 접근 가능하다.

접근할 때는 context라는 키워드를 통해 접근할 수 있으며, 접근 방식은 위와 같이 context.state 등을 사용한다.

 

 

참조 방법

Store의 각 속성을 참조하기 위해서는 $store라는 플러그인 키워드를 사용한다.

일반 참조

참조 방식이 조금 특이한데, 같은 구조의 모듈이 여러개 있는 방식이 아니라 한 구조 안에 모듈이 있는 방식이라

모듈을 각 속성 뒤에 선언하여 불러오는 방식을 택한다.

Helper 사용 참조

Helper를 통한 참조는 위와 같다.

중요한 점은 각 Helper는 선언할 수 있는 위치가 다르다는 점이다.

속성을 의미하는 mapState와 mapGetters는 computed 속성에,

함수를 의미하는 mapMutations와 mapActions는 methods 속성에 선언해야 오류가 발생하지 않는다.