Vuex
- Vue.js 애플리케이션을 위한 상태 관리 패턴 + 라이브러리
- 상태가 예측 가능한 방식으로만 변경될 수 있도록 하는 규칙 + 애플리케이션의 모든 구성 요소에 대한 중앙 집중식 저장소 역할
▶ 상태 관리란 ?
- 여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한 곳에서 관리하는 패턴을 의미
▶ 상태 관리의 필요성
- 컴포넌트 기반 프레임워크에서는 작은 단위로 쪼개진 여러 개의 컴포넌트로 화면을 구성하는데, 규모가 커질수록
1) 뷰의 컴포넌트 통신 방식인 props, event emit 이 거쳐야 할 컴포넌트 ↑
2) Event Bus를 사용하여 컴포넌트 간 데이터 흐름을 파악하기 어려움
이러한 문제점을 해결하기 위해 모든 데이터 통신을 한 곳에서 중앙 집중식으로 관리 = 상태 관리
즉, 컴포넌트 간의 통신이나 데이터 전달을 좀 더 유기적으로 관리할 필요성이 생긴다.
▶ Store : 애플리케이션 상태를 보관하는 컨테이너
특징
- store의 상태가 변경되면 반응적이고 효율적으로 업데이트
- store의 상태를 직접 변경할 수 없다.
Store
- state
- 컴포넌트 간에 공유할 data 속성
- mutation을 통해서만 변경 가능
- mutations
- state를 변경할 수 있는 유일한 방법
- commit를 통해서 호출가능
- actions
- 비동기 작업 가능
- mutation를 호출하기 위한 commit 가능
- dispatch를 통해 호출
- axios를 통한 api호출과 그 결과를 리턴하거나 mutation으로 commit하는 용도로 사용
- getter
- state에 대해 연산을 하고 그 결과를 view에 바인딩
- state의 변경 여부에 따라 view를 업데이트