Vuex

Vuex 란?

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

Flux 란?

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

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

MVC 패턴과 Flux 패턴 비교

1. MVC 패턴
   
2. Flux 패턴
   

MVC 패턴의 문제점

기능 추가 및 변경에 따라 생기는 문제점을 예측할 수가 없음. ex) 페이스북 채팅 화면
앱이 복잡해지면서 생기는 업데이트 루프

Flux 패턴의 단방향 데이터 흐름

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

Vuex가 왜 필요할까?

복잡한 애플리케이션에서 컴포넌트의 개수가 많아지면 컴포넌트 간에 데이터 전달이 어려워진다.

이벤트 버스를 사용하면 컴포넌트 간 데이터 전달이 명시적이지 않다.

Vuex로 해결할 수 있는 문제

1. MVC 패턴에서 발생하는 구조적 오류
2. 컴포넌트 간 데이터 전달 명시
3. 여러 개의 컴포넌트에서 같은 데이터를 업데이트 할 때 동기화 문제

Vuex 컨셉

• State : 컴포넌트 간에 공유하는 데이터 data()
• View : 데이터를 표시하는 화면 template
• Action : 사용자의 입력에 따라 데이터를 변경하는 methods
  
  ​ 단방향 데이터 흐름 처리

Vuex 구조

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

JavaScript 비동기 처리와 콜백함수

Vuex 라이브러리의 주요 속성

1. state ( = data )
2. getters ( = computed )
3. mutations ( = method )
4. actions ( = 비동기 method )

state란?

• 여러 컴포넌트 간에 공유할 데이터 - 상태

getters 란?

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

mutation란?

• state의 값을 변경할 수 있는 유일한 방법이자 메서드
• 뮤테이션은 commit()으로 동작시킨다.

state는 왜 직접 변경하지 않고 mutations로 변경할까?

• 여러 개의 컴포넌트에서 아래와 같이 state 값을 변경하는 경우 어느 컴포넌트에서 해당 state를 변경했는지 추적하기가 어렵다.

muthods: {
    increaseCounter() { this.$store.state.counter++; }
}

• 특정 시점에서 어떤 컴포넌트가 state를 접근하여 변경한 건지 확인하기 어렵기 때문이다.
• 따라서, 뷰의 반응성을 거스르지 않게 명시적으로 상태 변화를 수행한다. 반응성, 디버깅, 테스팅 혜택.

actions 란?

• 비동기 처리 로직을 선언하는 메서드, 비동기 로직을 담당하는 mutations
• 데이터 요청, Promise, ES6 async과 같은 비동기 처리는 모두 actions에 선언

왜 비동기 처리 로직은 actions에 선언해야 할까?

• 언제 어느 컴포넌트에서 해당 state를 호출하고, 변경했는지 확인하기가 어려움

결론 : state 값의 변화를 추적하기 어렵기 때문에 mutations 속성에는 동기 처리 로직만 넣어야 한다.

Vuex 설치

npm install vuex --save

src/store/store.vue : 파일 생성

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

Vue.use(Vuex); // 전역 변수로 등록

export const store = new Vuex.Store({
  state: {
      // data
  },
  mutations:{
      // state 변경 method
  },
  actions: {
      // 비동기 처리 method
  }
})

main.js : 등록

import { store } from './store/store'

new Vue({
  store
})

위 모든 이미지는 인프런 - Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex에서 발췌했습니다.