[Vue] mapState, mapGetters

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.num}}</p> -->
<p>{{this.reverseMessage}}</p>