헬퍼 함수 mapState, mapGetters, mapMutations, mapActions

mapState

- Vuex에 선언한 state 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼

//App.vue
import {mapState} from 'vuex'

computed() {
	...mapState(['num'])
	// num() {return this.$store.state.num}
}


//store.js
state: {
	num: 10
}


<!-- <p>{{this.$store.state.num}}</p> -->
<p>{{ this.num }}</p>

 

mapGetters

- Vuex에 선언한 getters 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼

//App.vue
import { mapGetters } from 'vuex'

computed() { ...mapGetters(['reversMessage']) }

// store.js
getters: {
	reverseMessage(state) {
    	return state.msg.split('').reverse().join('');
    }
}

<!--<p>{{this.$store.getters.reverseMessage}}</p>-->
<p>{{this.reverseMessage}}</p>

 

 

mapMutations

- Vuex에 선언한 mutations 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼

//App.vue
import { mapMutations } from 'vuex'

methods: {
	...mapMutations(['clickBtn'])
}

//store.js
mutations: {
	clickBtn(state){
    	alert(state.msg)
    }
}

<button @click="clickBtn"> popup message </button>

 

mapActions

- Vuex에 선언한 actions 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼

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