45. 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(['reverseMessage']) }

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

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

---

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