[Vue]vuex - Helper함수

👩‍💻Helper

각 속성들을 더 쉽게 사용하는 방법이다.

Store에 있는 아래 4가지 속성들을 간편하게 코딩하는 방법

• state -> mapState
• getteres -> mapGetters
• mutations -> mapMutations
• actions -> mapActions

📌헬퍼의 사용법

헬퍼를 사용하고자 하는 vue 파일에서 아래와 같이 해당 헬퍼를 로딩한다.
필요한 속성의 키값을 배열로 입력하고, 객체 전개 연산자(ES6 문법)로 적용한다.

//App.vue
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
	computed() {
		...mapState(['num'], ...mapGetters(['countedNum'])
    },
    
    methods: {
    	...mapMutations(['clickBtn']), ...mapActions(['asyncClickBtn'])
    }
}

📌mapState

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

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

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

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

<p>{{ this.num }}</p>

📌mapGetters

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

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

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

//store.js
getters: {
	reverseMsg(state) {
    	return state.msg.split('').reverse().join('');
    }
}
 
<p>{{ this.reverseMsg }}</p>
    

📌mapMutations

Vuex에 선언한 메서드들을 Vue 컴포넌트에 더 쉽게 연결해주는 헬퍼
methods 필드에 선언한다.

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

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

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

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

📌mapActions

Vuex에 선언한 메서드들을 Vue 컴포넌트에 더 쉽게 연결해주는 헬퍼
methods 필드에 선언한다.

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

methods: {
	...mapActions(['delayClickBtn']),
}

//store.js
actions: {
	delayClickBtn(context) {
    	setTimeout(() => context.commit('clickBtn'), 2000);
    }
}

//component
<button @click="delayCLickBtn">delay popup message</button>

헬퍼의 유연한 문법

Vuex에 선언한 속성을 그래도 컴포넌트에 연결하는 문법

//배열 리터럴
...mapMutations({
	'clickBtn', //'clickBtn' : clickBtn
    'addNumber' //addNumber(인자)
])

Vuex에 선언한 속성을 컴포넌트의 특정 메서드에다가 연결하는 문법

//객체 리터럴
...mapMutations({
	popupMsg: 'clickBtn' //컴포넌트 메서드 명 : Store의 mutation 명
})