반응형
각 속성들을 더 쉽게 사용하는 방법 - Helper
Store에 있는 아래 4가지 속성들을 간편하게 코딩하는 방법
- state -> mapstate
- getters -> mapGetters
- mutations -> mapMutations
- actions -> mapActions
헬퍼의 사용법
- 헬퍼를 사용하고자 하는 vue 파일에서 아래와 같이 헬퍼를 로딩
// App.vue
import { mapState } from 'vuex'
import { mapGetters } from 'vuex'
import { mapMutations } from 'vuex'
import { mapActions } from 'vuex'
export default {
computed(){ ...mapState(['num']), ...mapGettes(['countedNum']) },
methods: { ...mapMutations(['clickBtn']), ...mapActions(['asyncClickBtn']) }
}
Q) ...은 오타인가요? ES6의 Object Spread Operator 입니다.
- ...이란거 안에 여러개 속성이 있고 여러개 뿌려서 집어넣는다. (축약)
반응형
'vue.js > vue.js 2' 카테고리의 다른 글
46. 헬퍼 함수가 주는 간편함 (0) | 2022.08.02 |
---|---|
45. mapState, mapGetters, mapMutations, mapActions | 헬퍼의 유연한 문법 (0) | 2022.08.02 |
43. vuex 기술 요소 (state, getters, mutations, actions) (0) | 2022.08.02 |
42. vuex 설치 (0) | 2022.08.01 |
41. vuex 란? (상태 관리 라이브러리) | Flux 란? (단방향 데이터 처리) (0) | 2022.08.01 |