vuex 소개 - 상태 관리 라이브러리

개요

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

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

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

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

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

 

 

컴포넌트가 많아지면 어떻게 관리할까? 에서 나왔다.

React에서 Flux라는 패턴으로 복잡한 애플리케이션의 문제점들을, 무수한 관리 문제점을 관리를 해결했다.

vue에서도 Flux처럼 도입한 것이 Vuex이다. 왜 MBC 패턴에서 Flux 패턴으로 넘어갔는지를 먼저 알아야 한다.

 

state =data, data Property

getters = computed, computational

mutatios = method

actions = 그냥 비동기 method

 

이 4가지로 정리가 된다.

 

Vuex란?

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

- React의 Flux 패턴에서 기인함

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

 

Flux란?

- Mvc 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴

인프런 - Vue.js 캡틴판교 2

 

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

2. dispatcher: 데이터를 변경하는 방법, 메서드

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

4. view: 사용자에게 비춰지는 화면

 

위 그림을 보면 한 방향으로 흐른다. 데이터도 부모에서 자식으로만 이동하게 끔 한다.

인프런 - Vue.js 캡틴판교 2

 

인프런 - Vue.js 캡틴판교 2

 

이렇게 기능이 많아지면 데이터가 너무 왔다갔다하다보면 너무 꼬여있기 때문에 어디서 문제점이 나올지도 예측하기가 어려워지고, 실제로 데이터를 관리하기가 힘들어진다.

 

인프런 - Vue.js 캡틴판교 2