vuex의 Helper함수
HELPER
각 속성들을 더 쉽게 사용하는 방법
https://vuex.vuejs.org/api/#mapstate
state -> mapState
getters -> mapGetters
mutations -> mapMuations
action -> mapActions
----
컴포넌트가 많이자면 접근하기가 힘들다.
헬퍼의 사용법
import { mapState,mapGetters,mapMuations,mapActions } from 'vues'
export default{
computed() {
..mapState(['num']), ...mapGetter(['countedNum'])
},
methods : {
..mapMuations(['clickBtn']),...mapActions(['asyncCLickBtn'])
}
}
...은 무엇인가
ES6의 Object Spread Operator
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax
mapState
import {mapState} from 'vuex'
computed(){
...mapState(['num'])
// num() { return this.$state.state.num; }
}
state : {
num : 10
}
<div>{{this.$store.state.num}}</div>
<div>{{this.num}}<div>
mapGetters
import {mapGetters} from 'vuex'
computed(){
...mapGetters(['reverseMessage'])
}
getters : {
reverseMessage(state){
return state.msg.split(''),.reverse().join('');
}
}
<div>{{this.$store.getters.reverseMessage}}</div>
<div>{{this.reverseMessage}}<div>
mapMutations
import {mapMutatios} from 'vuex'
methods(){
...mapMutatios(['clickBtn']),
}
mutatios : {
clickBtn(state){
alert(state.msg)
}
}
<Button @click="clickBtn">popup message</button>
mapActios
import {mapActions} from 'vuex'
methods(){
...mapActions(['delayClickBtn']),
}
actions: {
delayClickBtn(context){
setTImeout(() => context.commit('clickBtn'),2000);
}
}
<Button @click="delayClickBtn">delay popup message</button>
---