[Vue.js] vuex 핵심 컨셉 (State/Actions/Mutations/Getters)

State

- vuex는 Single State Tree (단일 상태 트리)를 사용

- 중앙에서 관리하는 모든 상태 정보를 state가 관리 (==data) 

- 여러 컴포넌트 내부에 있는 특정 state를 중앙에서 관리

   - 기존에는 state를 찾기 위해 각 컴포넌트를 직접 확인 

   - vuex를 활용해 vuex store에서 컴포넌트에서 사용하는 state를 한눈에 파악

- Mutations에 정의된 method에 의해 변경

- State가 변경되면 해당 State를 공유하는 모든 컴포넌트의 DOM은 자동으로 렌더링 됨

- 모든 Vue 컴포넌트는 Vuex Store에서 state 정보를 가져와 사용

- 각 컴포넌트는 dispatch()를 사용해 Actions 내부의 method 호출

 

Actions

- 컴포넌트에서 dispatch() method에 의해 호출

- BackEnd API와 통신하여 Data Fetching 등의 작업 수행 -> 동기적 작업 뿐만 아니라 비동기 작업도 포함

- 항상 context가 인자로 넘어옴

   - store.js 파일 내에 있는 모든 요소(속성, method)의 변경 및 호출 가능

   - 가능은 하지만 state를 직접 변경하는 것은 좋지 않음

- Mutations에 정의되어 있는 method를 commit method를 이용해 호출

- State는 반드시 Mutations가 가진 method를 통해서만 조작 (규모가 커지더라도 state관리를 올바르게 하기 위해)

 

Mutations

- Actions에서 commit() method에 의해 호출

- Actions에서는 비동기적 작업을 Mutations에서는 동기적 작업만을 함

   - 비동기적 작업이 있을 경우 state의 변화 시점이 명확하지 않을 수 있음

- Mutations에 정의하는 method의 첫 번째 인자에는 state가 넘어옴

 

Getters

- computed와 유사

- state를 변경하지 않고 활용하여 계산을 수행

- getters 자체가 state 자체를 변경하지는 않음