Vue.js vuex 4가지 속성 정리

Vuex

Vuex는 중앙 위치에서 상태를 저장하여 어떤 컴포넌트라도 쉽게 상호 작용할 수 있게 돕는 라이브러리입니다.
state , mutations , actions , getter 4가지 형태로 관리가 되며 관리 포인트는 store 라 불립니다.

State

Vue component에서는 원본 소스 역할인 data로 볼 수 있습니다.

state는 mutation을 통해서만 변경이 가능합니다.

Mutations

유일하게 state를 변경할 수 있는 방법이며 메서드와 유사합니다.

commit을 통해서만 호출 할 수 있으며 함수로 구현됩니다.

API를 통해 전달받은 데이터를 mutations에서 가공하여 state를 변경합니다.

Actions

비동기 작업이 가능합니다.

mutation을 호출하기 위한 commit이 가능합니다.

action은 dispatch를 통해 호출할 수 있습니다.

axios를 통한 api 호출과 그 결과에 대해 return을 하거나 mutation으로 commit하는 용도로 사용됩니다.

Getter

Vue componet의 computed처럼 계산된 속성입니다.

state에 대해 연산을 하고 그 결과를 view에 바인딩 할 수 있습니다.

state의 변경 여부에 따라 view를 업데이트합니다.