41. vuex 란? (상태 관리 라이브러리) | Flux 란? (단방향 데이터 처리)

vuex - 상태 관리 라이브러리

 

개요

- 복잡한 애플리케이션의 컴포넌트들을 효율적으로 관리하는 vuex 라이브러리 소개

- vuex 라이브러이의 등장 배경인 Flux 패턴 소개

- vuex 라이브러리의 주요 속성인 state, getters, mutations, actions 학습

- vuex 를 더 쉽게 코딩할 수 있는 방법인 Helper 기능 소개

- vuex 로 프로젝트를 구조화 하는 방법과 모듈 구조화 방법 소개

---

vuex 란?

- 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리

- React의 Flux 패턴에서 기인함

- vue.js의 중고급 개발자로 성장하기 위한 필수 관문

 

vuex 가 왜 필요할까?

vuex말고 이벤트 버스로 해결?

- 어디서 이벤트를 보냈는지 혹은 어디서 이벤트를 받았는지 알기 어려움

// Login.vue
eventBus.$emit('fetch', loginInfo);

// List.vue
eventBus.$on('display', data => this.displayOnScreen(data));

// Chart.vue
eventBus.$emit('refreshData', chartData);

컴포넌트 간 데이터 전달이 명시적이지 않음

 

vuex 로 해결할 수 있는 문제

- MVC 패턴에서 발생하는 구조적 오류

- 컴포넌트 간 데이터 전달 명시

- 여러 개의 컴포넌트에서 같은 데이터를 업데이트 할 때 동기화 문제

 

vuex 컨셉

- State :  컴포넌트 간에 공유하는 데이터 data()

- View : 데이터를 표시하는 화면 template

- Action : 사용자의 입력에 따라 데이터를 변경하는 methods 

 

 

vuex 구조

컴포넌트 -> 비동기 로직 -> 동기 로직 -> 상태

 

---

Flux 란?

모든 데이터 흐름이 한 방향으로 움직인다.

 

데이터의 흐름이 여러 갈래로 나뉘지 않고 단방향으로만 처리