[Vue] Vuex 이해 한대로 정리

nungsun·2021년 5월 13일
0
post-thumbnail

Vuex란 무엇인가?

  • Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리
  • 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할

여러 컴포넌트가 공통의 상태를 공유해야 한다면?

공통의 상태 조건

  1. 여러 뷰는 같은 상태에 의존해야한다.
  2. 서로 다른 뷰의 작업은 동일한 상태를 반영할 수 있어야 한다.

🚫  Solution #1.   컴포넌트 간 prop 데이터 공유

👉🏻  지나치게 중첩된 컴포넌트를 통과하는 prop 데이터는 장황할 수 있으며 형제 컴포넌트에서는 작동하지 않는다.

🚫  Solution #2.   부모/자식 인스턴스 참조 or 이벤트 활용

👉🏻  관련 컴포넌트 내 이벤트를 통해 공통 상태의 여러 복사본 변경 및 동기화 처리가 되어야 한다.
👉🏻  이러한 패턴은 유지보수가 불가능한 코드가 된다.

✅  Solution #3.   Vuex 라이브러리 사용

👉🏻  공통의 상태를 전역 싱글톤으로 관리한다.
👉🏻  모든 컴포넌트는 트리구조와 상관 없이 공통의 상태에 접근하거나 변경할 수 있다.

Vuex 이벤트 싸이클

구분handler설명
State-변수 ( Vue객체의 data와 같은 개념 )
Getter-계산된 속성 ( Vue객체의 computed와 같은 개념 )
MutationscommitState를 조작하는 함수 ( Vue객체의 methods와 같은 개념 )
ActionsdispatchMutations를 실행, 비동기처리 가능
profile
imfrontenddeveloper

0개의 댓글