44. Helper (각 속성들을 더 쉽게 사용하는 방법)

각 속성들을 더 쉽게 사용하는 방법 - Helper

Store에 있는 아래 4가지 속성들을 간편하게 코딩하는 방법

 

- state -> mapstate

- getters -> mapGetters

- mutations -> mapMutations

- actions -> mapActions 

 

 

헬퍼의 사용법

- 헬퍼를 사용하고자 하는 vue 파일에서 아래와 같이 헬퍼를 로딩

// App.vue

import { mapState } from 'vuex'
import { mapGetters } from 'vuex'
import { mapMutations } from 'vuex'
import { mapActions } from 'vuex'

export default {
	computed(){ ...mapState(['num']), ...mapGettes(['countedNum']) },
    methods: { ...mapMutations(['clickBtn']), ...mapActions(['asyncClickBtn']) }
}

Q) ...은 오타인가요? ES6의 Object Spread Operator 입니다.

- ...이란거 안에 여러개 속성이 있고 여러개 뿌려서 집어넣는다. (축약)