[Vue2] Vuex 사용하기

Vuex

• Vuex
  • 중앙 저장소를 통해 상태 관리를 할 수 있도록 하는 라이브러리
  • 데이터가 예측 가능한 방식으로만 변경 될 수 있도록 하는 규칙을 설정하며, Vue의 반응성을 효율적으로 사용하는 상태 관리 기능을 제공

사용하기 전에..

$vue create vuex-app // Vue 프로젝트 생성

$cd vuex-app // 디렉토리 이동

$vue add vuex // Vue CLI를 통해 vuex plugin 적용

vuex의 핵심 컨셉 4가지

1. State
   • vue 인스턴스의 data에 해당
   • 중앙에서 관리하는 모든 상태 정보
2. Mutations
   • 실제로 state를 변경하는 유일한 방법 ( state를 변경하기 위한 methods )
   • Mutations에서 호출되는 핸들러(handler)함수는 반드시 동기적 이어야 함
3. actions
   • mutations와 비슷하지만 비동기 작업( 외부 API와의 소통 등 )을 포함할 수 있음
   • state를 직접 변경하지 않고 commit()메서드로 mutations를 호출해서 state를 변경함
4. Getters
   • vue 인스턴스의 computed에 해당
   • state를 활용하여 계산된 값을 얻고자 할 때 사용

component에서 데이터를 조작하기 위한 데이터의 흐름

• component => (actions) => mutations => state

component에서 데이터를 사용하기 위한 데이터의 흐름

• state => (getters) => component