Vuex 7.Helper 함수 개요

Helper

• 기존의 Vuex.Store 에서 정의하던 state , getters, mutations , actions 를 더 쉽게 코딩하는 방법이다.
• state => mapState
• getter => mapGetters
• mutations => mapMutations
• actions => mapActions

---

사용

• Vuex.Store 에서 각 Helper 함수를 꺼내다 쓴다.
• 컴포넌트 로직에서 객체전개연산자로 사용가능하다.
• Vuex.Store 에서 Helper 함수롤 꺼내온 원소 값들은 <template> 에서 this. 로 호출이 가능해진다.
• Vuex.Store 의 속성 값과 해당 컴포넌트의 속성 값을 Mapping 하는 함수라고 보면 된다.
• this.$store.state.num = Helper > this.num
• computed() 에 mapState + mapGetters / methods() 에는 mapMutations + mapActions 가 기술된다.

// 사용.vue

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

export default {
	
    //Store 의 state , getters 속성에서 해당 원소를 꺼냄
    // template 에서 this.num 으로 접근 가능!
	computed() { ...mapState(['num']),  ...mapGetters(['countedNum']) },
    
    //동일
    methods : { ...mapMutations(['clickBtn']),  ...mapActions(['asyncClickBtn']) }
}