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>

---