02. Vue CLI 3 - Vuex

OS	Windows 10 Home 64bit 버전 1903 (OS 빌드 18362.836)
Vue CLI	3.0.0
Vuex	4.0.0
Edit Tool	Intellij IDEA 2019.1.3

 

 

# 구조

Vuex 구조

Vuex 구조	설명
Actions	비동기 로직 = axios
Mutations	동기 로직
State	컴포넌트 간에 공유하는 데이터 = data() { ... }

 

Vue 주요 구성	설명
state	컴포넌트 간에 공유하는 데이터 = data() { ... }
getters	중복된 데이터 처리
mutations	동기 로직 처리
actions	비동기 로직 처리

 

Vue 컨셉	설명
State	컴포넌트 간에 공유하는 데이터 = data() { ... }
View	데이터를 표시하는 화면 = <template>...</template>
Action	사용자의 입력에 따라 데이터를 변경 = methods

Vue 패턴

 

#1. 소개

Vuex 란

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

React 의 Flux 패턴에서 기인함

여러개의 하위 컴포넌트를 가졌을 때의 props 를 계속해서 적어주는 불편함을 해결할 수 있다.

(eventBus 를 이용하여 해결할 수 있지만, 어디서 어떻게 보냈는지에 대한 한계가 존재한다)

 

Flux 란

MVC 패턴의 복잡한 흐름 문제를 해결하는 개발 패턴 - Undirectional data flow

Flux 는 복잡한 흐름이 아닌 단방향으로 흐름이 흘러간다

    1. actions: 화면에서 발생하는 이벤트 또는 사용자의 입력

    2. dispatcher: 데이터를 변경하는 방법, 메소드 (model을 바꾸기 위한 역할)

    3. model: 화면에 표시할 데이터

    4. view: 사용자에게 비춰지는 화면, 화면에서 다시 action을 호출하게 된다.

 

+ MVC 패턴의 문제점

뷰와 모델이 양방향 통신이 가능하므로 하나의 뷰가 모듈을 변경했을 때, 다시 그 모듈이 연관된 뷰들을 갱신하고, 업데이트 된 뷰들이

연관된 모델을 다시 갱신하고, 엮이고 엮이는 관계를 추적 하기가 힘들다

페이스북 채팅화면에서 읽지 않은 메시지가 카운터가 있음에도 메시지 내용이 안나오는 버그에 대해 처리하기 어려워 고안되었다

카카오톡도 이런 버그가 있다 (필자 경험 - 2020.08.20)

분명 읽지않음 이라고 +1 표시가 있어 확인해서 들어가보면 읽지 않은 메시지 내용은 존재하지 않는다.

채팅방을 빠져나와도 읽지 않음이 사라지지 않는다

 

이러한 Flux 는 프론트엔드 뿐만 아니라 백엔드쪽도 있다 (Spring Flux)

실시간적으로 통신하기 위해서는 Flux 패턴을 이용하는 것이 적절하다

 

MVC 패턴

 

Flux 패턴

 

#2. vuex install

vue add vuex

vue cli install 설치 후 vuex 를 추가

 

터미널창

 

[생성] vuex 추가된 모습

 

[사용] main js 에 추가된 모습

 

#3. vuex 사용하기

 

# 참고

[Vue.js] Vuex란? Vuex의 컨셉과 구조

 

Vuex 시작하기 1 - Vuex와 State

 

API 레퍼런스 | Vuex