• 복잡한 애플리케이션의 컴포넌트들을 효율적으로 관리
• React의 Flex 패턴에서 기인함

Flux란?

• MVC패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴
• 한 방향으로만 움직임.
  
• action : 화면에서 발생하는 이벤트, 사용자의 입력
• dispather : 데이터를 변경하는 방법, 메서드
• model : 화면에 표시할 데이터
• view : 사용자에게 비춰지는 화면

Mvc vs Flux

• 데이터 처리가 여러 방향으로 발생
  
• model, view 가 많을때 추적이 어려움

Vuex가 필요한 경우

• 복잡한 애플리케이션에서 컴포넌트가 많아지면 데이터간의 전달이 힘듬(2단계 이벤트 emit etc..)
• 이벤트 버스로 해결이 가능(이벤트를 어디서 보낸는지, 어디서 받았는지 알기 어려움)

eventBus.$emit('fetch', loginInfo);

해결 가능한 문제

1. MVC 패턴에서 발생하는 구조적 오류
2. 컴포넌트 간 데이터 전달 명시
3. 여러 개의 컴포넌트에서 같은 데이터 업데이트시 동기화

Vuex 컨셉

• State : 컴포넌트 간에 공유하는 데이터 data()
• View : 데이터를 표시하는 화면 template()
• Action : 사용자의 입력에 데이터 변경 methods
  

Vuex 구조

• 컴포넌트 -> 비동기로직 -> 동기 로직 -> 상태
• Actions = 비동기처리만 함(데이터를 바꾸지는 않음)
• mutations = 데이터를 바꿀수 있음(동기)