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의 뮤테이션 명 })