Vuex - 상태 관리 라이브러리

개요 

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

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

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

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

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

 

지금까지 배운 뷰의 지식으로 쉽게 말하면 아래는 이렇다.

state - data

getters - 컴퓨티드

mutations - 메소드

actions - 비동기메소드

 

Flux란?

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

Action -> Dispatcher -> Model -> View 

혹은 Action -> Dispatcher -> Store -> View

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

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

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

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

 

Vuex가 필요한 이유

여러 컴포넌트가 있을 때에 어디서 이벤트를 보냈는지 알기가 어려워짐

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

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

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

이거 100개 있다고 생각해봐라 어디서 받을지 어디서 오는지 생각하기 힘들어짐

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

 

Vuex로 해결할 수 있는 문제

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

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

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

 

Vuex 컨셉

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

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

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

 

Actions -> State -> View -> Actions...반복

단방향 데이터 흐름 처리가 단순함

 

보통 화면(view)에서 버튼을 누르면 method(Action)가 발생됌 그 method에서 데이터(state)가 변경됌

이런느낌을 생각함녀 된다.

 

Vuex의 구조는

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

 

https://v3.vuex.vuejs.org/kr/

 

Vuex 설치하기

https://v3.vuex.vuejs.org/kr/installation.html

설치 | Vuex

 

npm install vuex --save

- ES6와 함께 사용행뱌 더 많은 기능과 이점을 제공받을 수 있음

일반적인 vuex의 구조, store는 components와 동일 레벨의 폴더 구조이다

 

 

store.js에 전역설정을 해준다.

 

위 처럼 설정을 해주면 다른 .vue 폴더에서 this.$store로 접근이 가능해진다.

 

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vues); //vue의 플러그인을 전역으로 특정 기능을 추가하고 싶을 때 사용한다.

export const store = new Vuex.Store({

});

Vuex객체의 Store까지 만들어서 외부로 보낼 준비를 해준다.

 

import Vue from 'vue'
import App from './App.vue'
import {store} from './store/store'

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

main.js에서 Vue의 객체가 생성되는 핵심에 store를 심어준다. 이로써 Vue안에서 Vuex의 store를 사용할 수 있게 된다.

 

Vuex 기술 요소

- state: 여러 컴포넌트에 공유되는 데이터 data

- getters: 연산된 state 값을 접근하는 속성 computed

- mutations: state 값을 변경하는 이벤트 로직, 메서드 methods

- actions: 비동기 처리 로직을 선언하는 메서드 async methods

 

1) state

// Vue
data: {
	message: 'Hello Vue.js!'
}

// Vues
state: {
	message: 'Hello Vue.js!'
}

<!--Vue-->
<p>{{message}}</p>

<!-- Vuex -->
<p>{{this.$store.state.message}}</p>

 

2) getters

- state 값을 접근하는 속성이자 computed() 처럼 미리 연산된 값을 접근하는 속성

state: {
	num: 10
},
getters: {
	getNumber(state) {
    	return state.num
    },
    doubleNumber(state) {
    	return state.num * 2;
    }
}

<p>{{this.$store.getters.getNumber}}</p>
<p>{{this.$store.getters.doubleNumber}}</p>