Vuex 상태관리 라이브러리

Vuex - 상태관리 라이브러리

 

컴포넌트를 효율적으로 관리하는 라이브러리

주요속성 : state, getters, mutations, actions 🙌

 

1. state = data : 컴포넌트 간에 공유하는 데이터 또는 상태

2. getters = computed : 연산된 state 값을 접근하는 속성 / 캐싱하는 속성도 있음

3. mutations = method : state값을 변경하는 이벤트 로직, 메서드 / 인자가 있다면 getters보다 muations 사용을 권장

👀state를 직접변경하지 않고 뮤테이션을 변경하는 이유 : state를 직접변경하면 어느 컴포넌트에서 해당 state를 변경했는지 추적하기 어렵기 때문에 commit을 이용하여 뮤테이션을 변경함(반응성, 디버깅, 테스팅혜택) actions = 비동기 메서드 : 비동기 처리 로직을 선언하는 메서드 aysnc methods(데이터 요청, Primise, async과 같은 비동기 처리를 모두 선언, state를 변경할 수 없음) 어느컴포넌트에서 state를 호출하고 변경했는지 확인이 어렵기 때문에 비동기 로직은 actions에 선언함

 

Vuex #등장배경 Flux

컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리
react의 flux 패턴에서 기인함
flux : mvc 패턴의 복작합 테이터의 흐름 문제를 해결하는 개발 패턴(단방향 데이터 흐름 = 리액트에서는 flux패턴으로 상태관리를 하는 라이브러리는 리덕스)
mvc : 모델-뷰-컨트롤러 = 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴(모델과 뷰가 데이터를 주고받는 양방향 데이터 흐름) > 기능 추가 및 변경에 따른 문제점을 예측을 할 수 없는 문제점이 발생함

action : 화면에서 발생하는 이벤트 또는 사용자 입력
dispatcher : 데이터를 변경하는 방법, 메서드
model(store) : 화면에 표시할 데이터 (데이터를 담는곳 = 자바스크립트 객체와 같은 의미)
view : 사용자에게 비춰지는 화면 (DOM)

 

Vuex가 필요한 이유

 

- 컴포넌트의 갯수가 많아질 경우 컴포넌트 간에 데이터 전달이 어려워짐
- 이벤트 버스로 해결할 경우 어디서 이벤트를 보냈는지 받았는지 알기가 어려움

*해결할 수 있는 문제

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

 

Vuex 컨셉(단방향 데이터 흐름)

State : 컴포넌트 간에 공유하는 데이터 data()
view : 데이터를 표시하는 화면 template
Action : 사용자의 입력에 따라 데이터를 변경하는 methods

Vuex 구조

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

🙄자바스크립트 비동기 처리와 콜백 함수, Promise 쉽게 이해하기

https://msweb.tistory.com/115

Vuex 설치하기 : npm i vuex@3.6.2
가이드 확인 후 버전에 맞게 설치하기

https://v2.vuejs.org/v2/guide/installation.html#CDN

 

반응형

#속성 사용법 

 

 

#state

1.등록하기

//vue

data: {
	message
}

//Vuex

state: {
	message
}

2. 사용하기

//vue

{{message}}


//Vuex

{{this.$store.state.message}}

#getters

1.등록하기 

//store.js

state: {
	num: 10
},
getters: {
	getNumber(state) { //인자는 state
		return state.num
	}
}

2.사용하기
{{this.$store.getters.getNumber}} //store에 getters에 적용한 메서드 getNumber


#mutations : commit() 으로 동작시킴


//store.js

state: {
	num: 10
},
mutations: {
	sumNumber(state, anotherNum) { //첫번째 인자는 state
		return state.num + anotherNum;
	}
}

2.사용하기
this.$store.commit('sumNumber', 20) //store에 mutations 적용한 메서드 sumNumber

- state를 변경하기 위해  뮤테이션을 동작시킬 인자(payload)를 전달할 수 있음
인자를 여러개 보내고 싶다면 객체(키,벨류 형태)로 만들어서 보내면 된다.

//store.js

state: {
	num: 10
},
mutations: {
	sumNumber(state, payload) { //첫번째 인자는 state
		console.log(payload.str); // test
		return state.num += payload.num; //10 + 20 = 30
	}

//App.vue

this.$store.commit('sumNumber',{
	str: 'test';
	num: 20
})

*vue devtools에 timeline에서 쭉 내리다 보면 Vuex Mutations에서 확인가능

#actions

//store.js
state: {
	num: 10
},
mutations: {
	sumNumber(state, payload) { //첫번째 인자는 state
		console.log(payload.str); // test
	return state.num += payload.num; //10 + 20 = 30
},
actions: {
	dalaySum(context) { //context로 store의 메서드와 속성접근
		context.commit('sumNumber'); //mutations에 있는 sumNumber 호출
	}
}

//App.vue
this.$store.dispatch('dalaySum');

//app.vue에서 호출한 action이 store.js에서 action dalaySum을 호출하고 dalaySum 에서 mutations에 있는 sumNumber 호출

 

 

😊🙌vuex를 사용하여 만든 투두리스트

 

https://github.com/miseon920/vue_intermediate/tree/main/vue-todo-vuex

 

😂토글시 리팩토링 오류가 있었는대 _ by.써니

return state.todoItems = sortlist(finalData);

해결! 애초에 state.todoItems를 변경해주면 될껄 계속 넣지도 않고 리턴해서..오류가 났었다! 뿌듯