- 프론트엔드 UI 프레임워크 및 라이브러리에서 수많은 값을 효율적으로 관리하기 위해 사용.
- Vue에서 대표적인 상태관리 라이브러리는 Vuex
- Vue 인스턴스에서는 각 인스턴스 개별의 상태값(state)을 선언하고 사용하는데,
해당 인스턴스의 상태값을 수정하면 바인딩된 값이 변경됨. 그런데 상태값을 직접 변경하면 변경이력이 남지 않음.
그리고 상태를 공유하는 인스턴스가 여러개면 상태 값이 변경될 때마다 모든 상태를 수정해서 반영해 줘야함.
이를 해결하기 위해, data 옵션값으로 별도의 객체를 제공하는 방법이 존재. -> 하지만 computed 속성에 추가 불가능.
그래서 사용하는게 Vuex 상태관리 라이브러리.(Flux + Elm 아키텍처에서 영감을 받아 탄생함.)
Vuex 구성요소
Vuex 구성요소는 3가지 이다.
Actions
Mutations
State
Actions : Vue 인스턴스가 호출하는 메서드.
Mutatios : 상태(state)값을 변경하는 로직을 의미.
State : Vuex가 관리하는 상태값을 담은 객체.(컴포넌트간 공유될 상태)
- Vuex 설치
- npm install vuex --save
- store.js 작성
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
// Vuex에서 관리할 상태
}
})
- main.js store.js 등록
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: {App},
template: '<App></App>',
data () {
return {
welcome: 'vue !!'
}
}
})
- Vuex 상태 접근
this.$store.state.상태명 -> 안티패턴
위와 같이 접근해서 사용이 가능한데, 발생하는 문제점이 중복코드가 발생한다. 매 컴포넌트마다 저렇게 기술을 하는것 보다는
getters를 이용하는게 효율적이다.
등록된 getters 를 각 컴포넌트에서 사용하려면 this.$store 를 이용하여 getters 에 접근
//코드
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
// countNum 을 state 속성 추가
state: {
countNum: 0
},
getters: {
getCountNumFromStore: (state) => {
return state.countNum
}
},
mutations: {
addCountNum: function (state) {
state.countNum++
},
subtractionCountNum: function (state) {
state.countNum--
}
}
})
// 컴포넌트에서 사용 시.
this.$store.getters.getCountNumFromStore
- Vuex 상태 변경(mutations / 변이 메서드)
mutatios 란. Vuex 의 데이터, 즉 state 값을 변경하는 로직들을 의미.(Mutations 가 낯설다면 기억하기 쉽게 Setters 로 이해)
Getters 와 차이점은 인자를 받아 Vuex 에 넘겨줄 수 있고(추가 인자를 payload라고 부름 보통 객체로 전달), computed 가 아닌 methods 에 등록
위 예제코드를 보면, getters와 마찬가지로 mutations 속성을 추가해서 사용한다.
* commit을 이용하여 state를 변경 합니다.(commit 을 이용하여 mutations 이벤트를 호출해야 한다는 점)
this.$store.commit('addCountNum');
- Vuex 상태 변경2(actions / 액션)
상태값으로 특정 작업을 실행하는 로직을 포함. 로직을 마무리하면, 변이 메서드(mutations) 호출을 포함.
변이메서드를 통해, 상태값 추적이 가능.
context 객체는 저장소 객체와 같은 의미.
다음과 같은 속성이 있음
state
commit
dispatch
getters
rootState
rootGetters
actions 에 정의된 메서드는 dispatch 메서드로 호출 / 추가 인자를 넘길수도 있다.
this.$store.dispatch('addCount');
..
여기서 보면, actions / mutations 이 비슷한 역할을 하는거 같은데 무엇으로 구분해야하나?
Mutations 는 동기적 로직을 정의(이녀석 역할 자체가 state 관리가 메인 / 비동기 처리 시, 변경 파악이 어려움)
Actions 는 비동기적 로직을 정의
Comments