Helper 간단 정리 (vuex를 더 편하게!)

Helper

vuex의 각 속성들을 더 쉽게 사용하는 방법

 

state → mapState

getters → mapGetters

mutations → mapMutations

actions → mapActions

 

Helper 사용법

Helper 없이 state의 데이터를 가져오려면 이런식으로 가져왔어야했따

<p> {{ this.$store.state.num }} </p>

이게 여러개일때 넘 불편하니까

 

Helper을 활용하자..!

 

일단 가져와야한다.

import { mapState, mapGetters, ... } from 'vuex' 이런식으로 ...
export default {
	computed() { 
		...mapState(['num']),
		...mapGetters(['countedNum'])
	},
	methods: {
	...mapMutations(['clickBtn]),
	...mapActions(['asyncClickBtn'])
	}
}

 

mapState

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

그러니까 ... 원래는 computed에서 이렇게 가져와서 사용했던 것이

num() { return this.$store.state.num; }

<p> {{ this.$store.state.num }} </p>

 

mapState를 가져왔기 때문에 이렇게 바로 사용이 가능

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

 

mapGetters

Vuex에 선언한 getters 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼

 

mapMutations

vuex에 선언한 mutations 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼

 

mapActions

vuex에 선언한 actions 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼