Vuex
상태관리 패턴 + 라이브러리
상태를 전역 저장소로 관리할 수 있도록 지원하는 라이브러리이다. state가 예측 가능한 방식으로만 변경될 수 있도록 보장하는 규칙 설정한다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 한다.
state
state는 data이며, 해당 어플리케이션의 핵심이 되는 요소다. state는 각 컴포넌트에서 관리한다. DOM은 데이터(즉 state)에 반응하여 DOM을 렌더링한다.
Pass props & Emit event
각 컴포넌트는 독립적으로 데이터를 관리한다. 데이터는 단방향 흐름으로 부모 -> 자식간의 전달만 가능하며 반대의 경우 이벤트를 통해 전달한다.
장점
- 데이터이 흐름을 직관적으로 파악 가능
단점
- 컴포넌트 중첩이 깊어지는 경우 동위 관계의 컴포넌트로의 데이터 전달이 불편해짐.
in Vuex
- 중앙 저장소에서 state를 모아놓고 관리
- 규모가 큰 프로젝트에 매우 편리
- 각 컴포넌트에서는 중앙 집중 저장소의 state만 신경쓰면 됨
- 이를 공유하는 다른 컴포넌트는 알아서 동기화
왼쪽이 props & emit을 통한 단방향, 오른쪽이 Vuex
Vuex Core concept
단방향 데이터 흐름
- 상태는 앱을 작동하는 원본 소스
- 뷰는 상태의 선언적 매핑
- 액션은 뷰에서 사용자 입력에 대해 반응적으로 상태를 바꾸는 방법(methods)
하지만 단방향 데이터 흐름의 단점으론, 공통의 상태를 공유하는 여러 컴포넌트가 있는 경우 빠르게 복잡해짐
상태 관리 패턴
- 컴포넌트의 공유된 상태를 추출하고 이를 전역에서 관리하도록 함
- 컴포넌트는 커다란 뷰가 되며 모든 컴포넌트는 트리에 상관없이 상태에 엑세스 하거나 동작을 트리거 할 수 있음
- 상태 관리 및 특정 규칙 적용과 관련된 개념을 정의하고 분리함으로써 코드의 구조와 유지 관리 기능 향상
Vuex 구성 요소
1. state
중앙에서 관리하는 모든 상태 정보.
Mutations에 정의된 메서드에 의해 변경된다. 여러 컴포넌트 내부에 있는 특정 stste를 중앙에서 관리한다.
이를 통해 Vuex를 통해 활용하는 방식은 Vuex Store에서 컴포넌트에서 사용하는 state를 한 눈에 파악 가능하다.
state가 변화하면 해당 state를 공유하는 컴포넌트의 DOM은 알아서 렌더링 된다.
컴포넌트는 이제 Vuex Store에서 state 정보를 가져와 사용한다.
dispatch()를 사용하여 Action 정보를 가져와서 사용한다.
2. Actions
Component에서 dispatch()메서드에 의해 호출
Backend API와 통신하여 Data Fetching등의 작업을 수행하는 곳이다. 동기적인 작업 뿐 아니라 비동기 적인 작업을 포함한다. 항상 context가 인자로 넘어온다. store.js 파일 내에 있는 모든 요소에 접근해서 속성 접근과 메서드 호출이 가능하다. 하지만 state를 직접 변경하지 않는다.
mutations에 정의된 메서드를 commit 메서드로 호출한다. state는 오로지 mutations 메서드를 통해서만 조작한다. 명확한 역할 분담을 통해 서비스 규모가 커져도 state를 올바르게 관리하기 위함이다.
3. Mutations
Actions에서 commit()메서드에 의해 호출
비동기적으로 동작하면 state가 변화하는 시점이 달라질 수 있기 때문에 동기적인 코드만 작성한다. mutations에 정의하는 메서드의 첫 번쩨 인자로 state가 넘어온다.
4. Getters
state를 젼경하지 않고 활용하여 계산을 수행(computed와 유사)
실제 계산된 값을 사용하는 것 처럼 getters는 저장소의 상태를 기준으로 계산한다. 예를들어, state에 todo list의 해야 할 일의 목록의 경우 todo가 완료된 목록만 필터링해서 보여줘야 하는 경우가 있음
getter에서 completed의 값이 true인 요소가 필터링 해서 계산된 값을 담아 놓을 수 있다.
getters 자체가 state 자체를 변경하지는 않는다.
state를 특정한 조건에 따라 구분/계산만 한다. 즉, 계산된 값을 가져오는 것이다.
5. 정리
state
중앙에서 관리하는 모든 데이터. 상태.
Mutations
state를 변경하는 로직, 동기적인 작업만 실행
첫번째 인자로 항상 state를 받고 commit()을 통해 호출
actions
state를 직접 변경하지 않고 mutations에 저의된 메서드를 호출해서 변경. 데이터 fetch및 처리, 가공, 비동기 작업
첫번째 인자로 항상 contex를 받고 dispatch()를 통해 mutations의 메서드 호출
getters
저장소의 상태를 기준으로 게산해야하는 값
