[State Management]
-
상태(state) : 현재에 대한 정보(data)
-
Web Application에서의 상태 ==> 현재 App이 가지고 있는 Data로 표현 가능
-
여러개의 component를 조합해서 하나의 App을 만들고 있음
-
각 component는 독립적이기 때문에 각각의 상태를 가짐
-
하지만 결국 이러한 component들이 모여서 하나의 App을 구성할 예정 ==> 즉, 여러개의 component가 같은 상태(data)를 유지할 필요가 있음(상태 관리)
[Pass Props & Emit Event]
- 이전까지 props와 event를 이용해 상태 관리를 하고 있음
- 각 컴포넌트는 독립적으로 데이터를 관리
- 같은 데이터를 공유하고 있으므로, 각 컴포넌트가 동일한 상태를 유지하고 있음
- 데이터의 흐름을 직관적으로 파악 가능
- But, component의 중첩이 깊어지면 데이터 전달이 쉽지 않음
- 공통의 상태를 유지해야하는 component가 많아지면 데이터 전달 구조가 복잡해짐
Vuex(Centralized Store)
- 중앙 저장소(store)에 데이터를 모아서 상태 관리
- 각 component는 중앙 저장소의 데이터를 사용
- component의 계층에 상관없이 중앙 저장소에 접근해서 데이터를 얻거나 변경할 수 있음
- 중앙 저장소의 데이터가 변경되면 각각의 component는 해당 데이터의 변화에 반응하여 새로 변경된 데이터를 반영
- 규모가 크거나 컴포넌트 중첩이 깊은 프로젝트의 관리가 매우 편리
==> 위와 같은 중앙 저장소를 통한 상태관리를 도와주는 것이 Vuex / 데이터가 예측 가능한 방식으로만 변경될 수 있도록하는 규칙을 설정하며, Vue의 반응성을 효율적으로 사용하는 상태 관리 기능을 제공
[Vuex]
$ vue create vuex-app- vue project 생성
$ cd vuex-app- 디렉토리 이동
$ vue add vuex - Vue CLI를 통해 vuex plugin 적용
- src / store / index.js 가 생성
- vuex의 핵심 컨셉 4가지
- state
- getters
- mutations
- actions
1. State
- vue instance의 data에 해당
- 중앙에서 관리하는 모든 상태 정보
- 개별 component는 state에서 데이터를 가져와서 사용
- 개별 component가 관리하던 data를 중앙 저장소(Vuex Store의 state)에서 관리하게 됨
- state의 데이터가 변화하면 해당 데이터를 사용(공유)하는 component도 자동으로 다시 렌더링
- $store.state로 state 데이터에 접근
2. Mutations
- 실제로 state를 변경하는 유일한 방법
- vue instance의 methods에 해당하지만 Mutation에서 호출되는 핸들러 함수는 반드시 동기적이어야 함
- 비동기 로직으로 mutations를 사용해서 state를 변경하는 경우, state의 변화의 시기를 특정할 수 없기 때문
- 첫번째 인자로 state를 받으며, component 혹은 Actions에서 commit() 메서드로 호출됨
3. Actions
- mutations와 비슷하지만 비동기 작업을 포함할 수 있다는 차이가 있음
- state를 직접 변경하지 않고 commit() 메서드로 mutations를 호출해서 state를 변경함
- context 객체를 인자로 받으며, 이 객체를 통해 store.js의 모든 요소와 메서드에 접근할 수 있음( == 즉 state를 직접 변경할 수 있지만 하지 않아야 함)
- component에서 dispatch() 메서드에 의해 호출됨
[Mutations & Actions]
- Vue component의 methods 역할이 vuex에서는 아래와 같이 분화됨
- Mutations : state를 변경
- Actions : state 변경을 제외한 나머지 로직
4. Getters
- vue instance의 computed에 해당
- state를 활용하여 계산된 값을 얻고자 할 때 사용
- state의 원본 데이터를 건들지 않고 계산된 값을 얻을 수 있음
- computed와 마찬가지로 getters의 결과는 캐시(cache)되며, 종속된 값이 변경된 경우에만 재계산됨
- getters에서 계산된 값은 state에 영향을 미치지 않음
- 첫번째 인자로 state, 두번째 인자로 getter를 받음
[모든 데이터를 Vuex에서 관리해야 하는가?]
- Vuex를 사용한다고 해서 모든 데이터를 state에 넣어야 하는 것은 아님
- Vuex에서도 여전히 pass props, emit event를 사용하여 상태를 관리할 수 있음
- 개발 환경에 따라 적절하게 사용하는 것이 필요함
[summary]
- state : 중앙에서 관리하는 모든 상태 정보
- mutations : state를 변경하기 위한 methods
- actions : 비동기 작업이 포함될 수 있는(외부 API와의 소통 등) methods / state를 변경하는 것 외의 모든 로직 진행
- getters: state를 활용해 계산한 새로운 변수 값
component에서 데이터를 사용하기 위한 데이터의 흐름
- component ==> (actions) ==> mutations ==> state
component에서 데이터를 사용하기 위한 데이터의 흐름
- state ==> (getters) ==> component
