[Vue] Vuex

Vuex

1️⃣ Vuex란?

Vue 상태관리 라이브러리

• state(상태)를 전역 저장소로 관리할 수 있도록 지원
• 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소
• 상태가 예측 가능한 방식으로만 변경
• 컴포넌트의 공유된 상태를 추출 ➡️ 전역에서 관리
• 컴포넌트는 커다란 view가 되며, 모든 컴포넌트는 트리에 상관없이 상태에 액세스하거나 동작을 트리거 할 수 있음

2️⃣ Props&Emit VS Vuex

Props&Emit

• props&Emit은 단반향 흐름, 부모 ➡️ 자식 간의 전달만 가능
• 장점 : 데이터의 흐름 직관적으로 파악 가능
• 단점 : 컴포넌트 중첩이 깊어지면 공통의 상태를 공유하는 여러 컴포넌트가 있는 경우 데이터 전달이 매우 복잡해짐
• 단방향 데이터 흐름
  • state : 앱을 작동하는 원본 소스 (data)
  • view : state의 선언적 매핑
  • action : view에서 사용자 입력에 대해 반응적으로 state를 바꾸는 법 (methods)

Vuex

• 중앙 저장소(store)에 state를 모아놓고 관리
• 규모가 큰 프로젝트에서 효율적 ➡️ 컴포넌트 중첩이 깊어져도 데이터 전달이 복잡하지 않음
• 동일한 state를 공유하는 다른 컴포넌트들도 동기화

비교

3️⃣ Vuex Concept

State

• 중앙에서 관리하는 모든 상태 정보 (data)
• Vuex는 single state tree 사용 ➡️ 모든 애플리케이션 상태를 포함하는 원본 소스의 역할
• 애프리케이션마다 하나의 저장소
• State가 변화하면 해당 state를 공유하는 컴포넌트의 DOM 자동 렌더링

Mutations

• State를 변경하는 유일한 방법
• mutation의 Handler 함수는 반드시 동기적이어야 함
  • 비동기적 로직(ex.콜백함수)는 state가 변화하는 시점이 의도한 것과 달라질 수 있고, 호출될 시기를 알 수 없음 (추적 불가능)
• 첫번째 인자로 항상 state를 받음
• Actions의 commit() 메서드에 의해 호출

Actions

• State를 변경할 수 있지만 직접 변경하지 않음
  • State는 오로지 Mutations을 통해서만 조작 (역할 분담)
• Mutations를 commit() 메서드로 호출,
  컴포넌트의 dispatch() 메서드에 의해 호출
• Mutations와 달리 비동기 작업 포함 가능
• context 객체 인자
  • store/index.js 내에 있는 모든 요소의 속성에 접근 및 메서드 호출 가능

Getters

• State를 변경하지 않고 활용 ➡️ 계산 수행 (Computed와 유사)
• State 종속성에 따라 캐시(cached)되고, 종속성이 변경된 경우에만 다시 재계산