[Vue] Vuex 1. 들어가기

들어가기

• 컴포넌트 관리하는 라이브러리(React에서 사용하는 Redux 같은 것)
• Vuex의 라이브러리 주요 속성: state(data), getters(computed), mutations(methods), actions(async methods)
• Vuex를 더 쉽게 코딩할 수 있는 Helper

 

 

Vuex의 등장 배경

• Vuex는 컴포넌트 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리
• React의 Flux 패턴에서 기인함

 

Flux 패턴 : MVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴 (Unidirectional data flow)

1. action : 화면에서 발생하는 이벤트 또는 사용자의 입력
2. dispatcher :  데이터를 변경하는 방법(메서드)
3. model : 화면에 표시할 데이터
4. view : 사용자에게 비춰지는 화면

=> 단방향 데이터 흐름으로 안정성있는 코딩 가능

 

 

MVC 패턴

1. model : 모든 데이터를 관리 하는 곳
2. controller : model과 view 제어하는 역할
3. view : 사용자에게 비춰지는 화면

=> 데이터 흐름이 복잡해져 추적이 어렵고 버그 잡기가 힘듦

 

 

 

Vuex가 왜 필요한가

• 컴포넌트의 개수가 많아지면 컴포넌트 간에 데이터 전달이 어려워짐
• 이벤트버스로 해결? => 어디서 이벤트를 보냈는지, 어디에서 이벤트를 받는지 알기 어려움
• 여러 컴포넌트에서 같은 데이터를 업데이트 할 때 동기화 문제 해결 가능

 

 

Vuex 컨셉

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

 

 

Vuex 구조