Vuex

💡 공식문서

Vuex

• Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리
• 애플리케이션 모든 컴포넌트들의 중앙 저장소 역할(데이터 관리)
• 부모 자식 단계가 많이 복잡해진다면 데이터의 전달하는 부분이 매우 복잡해 짐
• 애플리케이션이 여러 구성 요소로 구성되고 더 커지는 경우 데이터를 공유하는 문제 발생
• devtools 확장 프로그램과 통합되어 고급 기능을 제공

Vuex 핵심 컨셉

• state : 단일 상태 트리 사용, 애플리케이션 마다 하나의 저장소를 관리 (data)
  이 단일 객체는 모든 애플리케이션 수준의 상태를 포함하며 "원본 소스"의 역할
  각 애플리케이션 마다 하나의 저장소만 갖게 된다는 것을 의미
  애플리케이션에서 공유해야 할 data 관리
  공통적으로 많이 사용되는 data
  값이 변경되면 해당 state를 공유하는 여러 컴포넌트의 DOM은 알아서 렌더링
• Getters : Vue Instance의 computed와 같은 역할, State를 기반으로 계산 (computed)
  State를 변경하지 않고 활용하여 계산을 수행
  computed 속성과 마찬가지로 state 종속성에 따라 캐시되고, 일부 종속성이 변경된 경우에만 다시 재계산(State가 변경되면 다시 재계산)
• Mutations : State의 상태를 변경하는 유일한 방법 (methods)
  mutation의 핸들러 함수는 반드시 동기적이어야 함(비동기 콜백함수의 실제로 호출 시기를 알 수 있는 방법이 없으므로 추적할 수 없기 때문에)
• Actions : 상태를 변이시키는 대신 액션으로 변이(Mutations)에 대한 커밋 처리 (비동기 methods)
  즉, 상태(data)를 직접 변이시키는 것이 아니라 액션으로 Mutation으로 호출하여 처리한다.
  비동기 작업의 결과를 적용하려고 할 때 사용
  context 객체 인자를 받음