Vue - Vuex 헬퍼 함수

Vuex를 먼저 이해한 후 보는 것을 추천합니다.

Vuex를 다룬 이전 포스팅 참고하세요.

https://getthismoment.tistory.com/108

Vuex 헬퍼 함수란

Vuex 헬퍼 함수란 Vuex store에 선언된 state, getters, mutations, actions 프로퍼티와 메소드를 다른 vue 컴포넌트에서 손쉽게 호출하고 재사용하기 위해 사용하는 함수입니다.

 

 

Vuex helper 함수 종류

mapState - state를 연결해주는 함수

mapGetters - getters를 연결해주는 함수

mapMutations - mutations를 연결해주는 함수

mapActions - actions를 연결해주는 함수

 

 

---

 

Vuex 헬퍼 함수 기본형

<template>
</template>

<script>
    import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
    
    export default {
        name: 'HelloWorld',
        data() {
            return {}
        },
        computed: {
          ...mapState({
          	cnt: 'count',
          }),
          ...mapGetters([
              'getCounter'
          ]),
          ...mapGetters({
              count: 'count'
          }),
        },
        methods: {
          ...mapMutations({
              increment: 'increment',
              decrement: 'decrement'
          }),
          ...mapActions({
              randomNumber: 'generateRandomNumber'
          }),
        }
    }
</script>

컴포넌트에 Vuex 헬퍼 함수를 선언한 기본 모습입니다. 

Vuex 헬퍼 함수를 사용할 때는 반드시 vuex부터 import해야합니다.

vuex store의 state와 getters는 computed에 선언하는 것이 권장됩니다.

vuex store의 mutations과 actions는 methods에 선언하는 것이 권장됩니다.

권장 영역 외에 다른 영역에 선언하는 것도 가능하긴 합니다.

 

헬퍼 함수 사용 방식은 배열과 객체 둘 다 가능합니다.

// 헬퍼 함수 배열
...mapGetters([
	'count'
]),

// 헬퍼 함수 객체 
...mapGetters({
	count: 'count'
}),

배열형식과 객체형식 아무거나 사용해도 상관은 없지만, store에서 가져온 프로퍼티나 메소드에 이름을 지정하고 싶으면 객체형식을 사용하면 됩니다.

 

 

Vuex 헬퍼 함수 사용 시 ...을 사용하는 이유

 

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

computed: mapGetters([
  'getCounter'
]),

위와 같은 예제 처럼 헬퍼 함수 앞에 ...을 붙이지 않으면 해당 컴포넌트에서 정의한 computed와 함께 사용할 수 없습니다.

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

computed: {
  ...mapGetters([
    'getCounter'
  ]),
  anotherCounter() {
    // ...
  }
}

...mapGetters 와 같이 Vuex 헬퍼 함수 앞에 ...을 붙여야 해당 컴포넌트에서 정의한 computed 내부 함수와 같이 사용 가능합니다.

 

 

 

 

 

https://joshua1988.github.io/web-development/vuejs/vuex-getters-mutations/

Vuex 시작하기 2 - Getters 와 Mutations

 

https://kamang-it.tistory.com/entry/Vue18vuex%EC%97%90%EC%84%9C-helper%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0mapState-mapMutations-mapActions-mapGetters

[Vue-18]vuex에서 helper를 사용하기(mapState, mapMutations, mapActions, mapGetters)

 

 

리액트 - redux 참고

https://kamang-it.tistory.com/entry/React-12react-redux%EB%A1%9C-redux%EB%8D%94-%EC%A7%81%EA%B4%80%EC%A0%81%EC%9D%B4%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

[React-12]react-redux로 redux더 직관적이게 사용하기