Vuex란?
상태(state)를 관리하는 라이브러리 (vue의 data()를 상태라고 부른다)
여러 컴포넌트에서 공통의 상태를 공유하고 동일한 상태로 관리될 수 있도록 돕는다.
Vuex는 store(저장소)를 가지고 있다. Vuex의 상태는 메모리에 저장되는 것이기 때문에 새로고침시 초기화 된다.
Vuex의 주요 5가지 속성
- state
- getters
- mutations
- actions
- modules
state
state는 상태의 집합니다.
Vuex는 단일 상태 트리를 사용하기 때문에 다른 컴포넌트에서 상태가 변이되었다면 그 상태를 사용하고 있는 다른 컴포넌트에도 적용된다. 그러기 위해서는 Vue의 computed 속성을 통해 store의 state를 출력해야 한다.
mapState는 computed에 선언된 상태가 많을 때 반복되는 코드를 줄여준다.
기존 로컬의 computed와 함께 사용하려면 객체 전개 연산자를 사용하면 된다.
getters
state를 계산한 값을 사용해야 할 때 사용한다.
각가의 컴포넌트에서 state를 변화시키면 반복 호출이 잦아서 비효율적인 로직이 된다.
getters는 state에 대한 변이를 Vuex에서 수행하고 각 컴포넌트에서 state만 호출하도록 한다.
getters는 반환값이 있어야 한다. 반환 값은 state 뿐만 아니라 getters가 될 수도 있다.
getters는 따로 전달인자를 받을 수 없다.
mapState와 마찬가지로 mapGetters를 사용해 코드의 반복을 막을 수 있다.
mutations
mutations도 getters와 동일하게 state의 값을 변환시킬 때 사용한다.
mutations는 getters와 다르게 전달인자를 받을 수 있고 getters는 computed에 등록했지만 mutations는 methods에 등록한다.
mutations는 동기적 로직을 정의한다는 특징을 가지고 있다. 순차적으로 변이가 진행된다는 뜻이다. 여러 컴포넌트에서 하나의 상태를 변이시킨다면 현재 state가 어떤지 추적하기 어려울 것이다.
그 때 mutations에 정의한 상태변이함수를 commit을 사용하여 호출하면 상태를 추적할 수 있다. commit은 type 속성을 가진 객체로 mutations의 메소드를 불러올 수 있다. mutations는 동기적 로직을 다루기 때문에 반드시 commit을 사용하여 명시적으로 호출해 state의 추적이 가능하게 해야한다.
commit에는 추가 전달 인자를 붙여 전달인자를 넘길 수 있다. 이 부분을 payload라고 한다.
mapMutations을 사용하여 mutations를 간결하게 정리할 수 있다.
actions
mutations가 동기적 변이를 다룬다면, actions는 반대로 비동기적 변이를 다루는 속성이다. setTimeout()이나 서버와의 http 통신 처리와 같이 타이밍이 예측되지 않는 로직을 선언한다.
actions 역시 비동기적 상태를 추적해야하기 때문에 commit을 사용한다. actions는 mutations의 메소드를 actions에 commit으로 호출하여 비동기 관리한다는 것이다.
actions는 methods에서 dispatch를 사용하여 호출한다. dispatch는 이러한 commit을 비동기적으로 관리할 수 있게 한다.
