<Vuex> Vuex란?

Vuex

앱이 복잡해짐에 따라 데이터의 흐름을 관리 및 예측하기 어려워졌습니다. 이런 문제를 해결하고자 나온 상태 관리 라이브러리인 동시에 상태 관리 패턴이 Vuex입니다.

문제 상황

• MVC 패턴의 문제
  기능 추가 및 변경에 따라 생기는 문제점 및 결과를 예측하기 어렵습니다.
  아래는 이런 문제를 시각화한 이미지입니다.
  

여러개의 컴포넌트에서 같은 데이터를 업데이트해야 하고 있다면? 동기화를 어떻게 해주고 있나요?

해결을 위한 등장

• Flux 패턴
  데이터 흐름을 단방향으로 유지하는 Flux패턴의 등장
  

• Vuex 컨셉
  • state
    컴포넌트간에 공유하는 데이터
  • view
    데이터를 표시하는 화면
  • action
    사용자의 입력에 따라 데이터를 변경하는 메서드
• Vuex 구조
  데이터 -> 비동기 로직 -> 동기 로직 -> 컴포넌트 -> 데이터 -> (...)