[Vue] - Vuex 기본

Vuex

• Vuex 는 Vue 에서 사용하는 상태 관리 라이브러리
• 모든 컴포넌트에 대한 state 저장소 역할을 하며, 컴포넌트의 상태를 변경 및 관리한다.
• React 의 Redux 와 같은 역할을 한다.

핵심 컨셉

State

• state 는 모든 컴포넌트에서 사용할 수 있는 data, 상태값이다.
• 단일 컴포넌트의 data 라고 보면 된다.

  Mutations

• State 를 변경시키는 역할을 한다.
• 비동기 처리가 아니라 동기처리를 한다.
• 단일 컴포넌트의 methods 라고 보면 된다.
• commit('함수명, '전달인자') 로 실행

  Actions

• Mutations 를 실행시키는 역할을 한다.
• Mutations 가 실행되면 state 가 변경된다.
• 동기 처리가 아니라 비동기처리를 한다. 순서에 상관없이 먼저 종료된 함수의 피드백을 받아 후속 처리를 하게 된다.
• dispatch('함수명', '전달인자') 로 실행

  Getters

• 단일 컴포넌트의 computed 와 같은 역할인데 여러 컴포넌트에서 동일하게 사용되는 computed 가 사용될 경우 getters에 정의하여 공통으로 쉽게 사용할 수 있다.