- Vue 가 사용하는 React 의 단방향 데이터 흐름 구조로 보았을 때 Component 의 트리구조가 복잡해질 수록 거슬러 올라가서 내려가는 이벤트와 props 전달이 어려워진다.
- 어느 컴포넌트에서 이벤트를 보냈는지, 어디서 이벤트를 받았는지 알기 힘들다.
- EventBus 를 사용하더라도 코드에서 컴포넌트 간의 이벤트 수송신이 명시적이지 못하다.
//어디로 보내는지, 어디서 보냈는지 기재되지 않는다.
//Login.vue
evenBus.$emit('fetch',LogInfo);
//List.vue
evenBus.$on('diplay', data => this.displayOnScreen(data));
//Chart.vue
evenBus.$emit('refreshData', chartData);
Vuex 가 해결하고자 하는 문제
- MVC 패턴의 구조적 오류 ( 양방향 데이터 흐름 )
- 컴포넌트 간 데이터 전달 명시화
- 여러개의 컴포넌트에서 같은 데이터를 갱신할때 동기화 문제
Vuex 가 가지는 컨셉
- State : 컴포넌트 간에 공유 데이터 -> data()
- View : 데이터 표시 화면 -> template
- Action : 사용자의 입력에 따라 데이터를 변경하는 기능 -> methods
- 가장 중요한 점은 단방향 통신 흐름을 가진다는 것.
Vuex 의 구조
- 컴포넌트 -> 비동기 로직 -> 동기 로직 -> 상태
- 컴포넌트에서 Action ( 비동기 ) 로직이 돌아 Mutation 이 호출
- Mutation 에서 동기 로직으로 State (데이터) 를 변경
