Vuex

Vuex 등장 배경

• Vue에서는 각 컴포넌트가 독립적으로 데이터를 관리했다.

• 다만, 부모 자식관계에서는 props를 통해 자식은 부모가 내려주는 데이터를 받고, emit을 통해 부모는 자식의 이벤트를 트리거함

• 이러한 독립적인 데이터 관리가 불편할 때가 있는데,

  • 컴포넌트 구조가 복잡하고,
  • 부모자식관계가 아닌 컴포넌트 간(동위 관계 등)의 데이터를 주거나 받는 경우

• 이 문제로 등장한 것이 바로 Vuex

  • Vuex는 각 컴포넌트에서 관리하던 데이터를 한 곳에 모아둔 중앙 집중식 저장소다!!
    • 그렇다고 무조건 모든 데이터를 Vuex에 올려야하는 건 아님

Vuex core concepts

State

• (data라고 생각하자)
• 중앙에서 관리하는 모든 상태 정보
• 각 컴포넌트는 Vuex에서 state를 가져와 사용
• Mutations에 의해 변경됨
• State가 변화하면 해당 state를 공유하는 여러 컴포넌트의 DOM은 알아서 렌더링
  
  

Mutations

• State의 변경(생성, 수정, 삭제)을 담당
• 반드시 동기적 로직만
• Actions의 commit()에 의해 호출
• 첫 번째 인자로 항상 state를 받음
  • Mutations는 State를 변경을 담당하기 때문에 디폴트로 state를 받는다고 생각하자!
    
    

Actions

• 비동기 로직 처리 가능
• 컴포넌트에서 dispatch()에 의해 호출
  • State변경과 관련된 일이라면 Mutations를 commit()으로 호출
  • Actions도 state를 조작할 수 없는 건 아니지만,
  • 더 복잡한 구조에서도 state를 올바르게 관리하기 위해 Mutations과 명확한 역할 분담!!
• 첫 번째 인자로 context 객체를 받음
  • state변경을 제외한 다양한 일을 해야하기 때문에 context객체로 할 수 있는 일이 매우 매우 많다!
    
    

Getters

• (computed라고 생각하자)
• state의 상태를 기반하는 계산 값
• 실제 상태를 변경하지는 않음