Vue-(13) vuex 주요기술요소
Mutations
state는 왜 직접 변경하지 않고 mutations로 변경할까?
-
여러개의 컴포넌트에서 아래와 같이 state값을 변경하는 경우 어느 컴포넌트에서 해당 state를 변경했는지 추적하기가 여렵다. methods: { increaseCounter() { this.$store.state.counter++; } }
- 특정 시점에 어떤 컴포넌트가 state를 접근하여 변경한 건지 확인하기 어렵기 때문
- 따라서, mutations를 통해 뷰의 반응성을 거스르지 않게 명시적으로 상태 변화를 수행. 반응성, 디버깅, 테스팅 혜택
actions란?
- 비동기 처리 로직을 선언하는 메소드. 비동기 로직을 담당하는 mutations
- 데이터 요청 , Promise, ES6 async과 같은 비동기 처리는 모두 actions에 선언
Pomise 이해하기 https://joshua1988.github.io/web-development/javascript/promise-for-beginners/
자바스크립트 비동기 처리 이해하기 https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/
Mutations는 동기로직 처리, Actions는 비동기 로직 처리
왜 비동기 처리 로직은 actions에 선언해야할까?
- 언제 어느 컴포넌트에서 해당 state를 호출하고, 변경했는지 확인하기가 어려움
- 결론적으로, state 값의 변화를 추적하기 어렵기 때문에 mutations 속성에는 동기 처리 로직만 넣어야 한다.
각 속성들을 더 쉽게 사용하는 방법 - Helper
Store에 있는 아래 4가지 속성들을 간편하게 코딩하는 방법
- state -> mapState
- getters -> mapGetters
- mutations -> mapMutations
- actions -> mapActions
헬퍼의 사용법
- 헬퍼를 사용하고자 하는 vue파일에서 아래와 같이 해당 헬퍼를 로딩 //App.vue import { mapState } from ‘vuex’ import { mapState } from ‘vuex’ import { mapState } from ‘vuex’ import { mapState } from ‘vuex’
export default { computed() { …mapState([‘num’]), …mapGetters([‘countedNum’]) }, methods: { …mapMutations([‘clickBtn’]), …mapActions([‘asyncClickBtn’]) } } …은 ES6의 Object Spread Operator 입니다.
mapState
- Vuex에 선언한 state 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼 //App.vue import { mapState } from ‘vuex’
computed() { …mapState([‘num’]) //num() { return this.$store.state.num; } }
//store.js state: { num: 10 }
mapGetters
- Vuex에 선언한 getters 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼 //App.vue import { mapGetters } from ‘vuex’
computed() { …mapGetters([‘reverseMessage’]) }
//store.js getters: { reverseMessage(state) { return state.msg.split(‘ ‘).reverse().join(‘ ‘); } }
mapMutations
- Vuex에 선언한 mutations 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼
//App.vue import { mapMutations } from ‘vuex’
methods: { …mapMutations([‘clickBtn’]), authLogin() {}, displayTable() {} }
//store.js mutations: { clickBtn(state) { alert(state.msg); } }
<button @click=”clickBtn”>popup message</button>
mapActions
- Vuex에 선언한 actions 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼 //App.vue import { mapActions } from ‘vuex’
methods: { …mapActions([‘delayClickBtn’]), }
//store.js actions: { delayClickBtn(context) { setTimeout(() => context.commit(‘clickBtn’), 2000); } }
<button @click=”delayClickBtn”>delay popup message</button>
헬퍼의 유연한 문법
- Vuex에 선언한 속성을 그대로 컴포넌트에 연결하는 문법
//배열리터럴 …mapMutations([ ‘clickBtn’ // ‘clickBtn’ : clickBtn ‘addNumber’ // addNumber(인자) ])
- Vuex에 선언한 속성을 컴포넌트의 특정 메서드에다가 연결하는 문법
//객체 리터럴 …mapMutations({ popupMsg: ‘clickBtn’ // 컴포넌트 메서드 명 : Store의 뮤테이션 명 })
댓글남기기