vuex 간단 정리

 

VueX

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

React의 Flux 패턴에서 기인하였다.

 

 

vuex를 배우기 전에 참고로 알아두자 ...

MVC

Controller → Model ↔ View (양방향)

기능 추가 및 변경에 따라 생기는 문제점을 예측할 수 없음

 

Flux

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

Action → Dispatcher → Model → View (단방향)

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

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

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

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

 

 

Vuex를 쓰는 이유

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

Vuex 대신 이벤트버스(emit)를 써도 어디서 보냈고 어디서 받았는지 알기 어려움

2. MVC 패턴에서 발생하는 구조적 오류를 해결

3. 컴포넌트 간 데이터 전달 명시 가능

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

 

 

Vuex 구조

컴포넌트 → 비동기 로직 → 동기 로직 → 상태

 

 

Vuex 설치 명령어

npm i vuex@3.6.2

Vuex 라이브러리를 설치할 때 라이브러리 버전을 명시 필수! (2022년 2월 7일부터)

 

 

Vuex 사용하기 (use)

Vue.use(Vuex)

뷰를 사용할 때 전역으로 특정 기능을 추가하고 싶을때 씀

 

 

Vuex 요소

state

여러 컴포넌트에 공유되는 데이터 (상태)

state : { message: '헬로우' }

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

사용하는게 겁나 번거롭다... 무슨 store에 state에 ... 개귀찮네! → 헬퍼를 사용하자

 

getters

연산된 state 값을 접근하는 속성, computed 처럼 미리 연산된 값을 접근하는 속성

getters: {
	// state를 그대로
	getNumber(state) {
		return state.num;
	},
	// state를 두배로
	doubleNumber(state) {
		return state.num * 2
	}
}

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

넘 번거로움2 → 헬퍼를 사용하자

 

 

mutations

state 값을 변경하는 유일한 방법이자 메서드

commit() 으로 동작시킴

항상 첫번째 인자로 state를 가져옴

mutations: {
	modifyState(state, payload) {
		return state.storeNum += payload.num;
	}
}

this.$store.commit('modifyState', {
	str: '안녕',
	num: 20
});

 

근데 왜 state는 직접 변경하지 않고

mutations를 통해 변경할까?

특정 시점에 어떤 컴포넌트가 state를 접근하여 변경한 건지 확인하기 어려워서!

따라서 뷰의 반응성을 거스르지 않게 명시적으로 상태 변화를 수행.

그리고 반응성, 디버깅, 테스팅 혜택까쥐

 

 

actions

비동기 처리 로직을 선언하는 메서드.

데이터 요청, Promise, ES6 async와 같은 비동기 처리는 모두 actions에 선언

state: { num: 0 },
mutations: { addNum(state) { state.num + 1;} },
actions: { delayAddNum(context) { setTimeout(() => context.commit('addNum'), 2000); } }

this.$store.dispatch('delayAddNum');

 

근데 비동기 처리 로직은

왜 action에 구분해서 선언해야 할까?

이것도 언제 어느 컴포넌트에서 해당 state를 호출하고 변경했는지 확인이 어렵기 때문!

 

 

 

간단하게 말하면 ...

State는 data

getters는 Computed

mutations는 methods

actions는 비동기 메서드