Vuex Helper 함수

지난 포스팅에서 Vuex에서는 4가지 속성이 있다고 했다.
state, getters, mutations, actions
4가지 속성을 접근 하는 방법은 this.$store.(속성명)... 이다.

규모가 작은 프로젝트의 경우 굳이 상관없겠지만, 규모가 큰 프로젝트라면 위 방식대로 사용했다간 코드가 비대해지고 지저분 해질 수 있다.

이때 사용하는게 바로 Vuex의 Helper 함수다.

• mapState
• mapGetters
• mapMutations
• mapActions

사용법은 vuex에서 각각을 import 받아 사용하면 된다.

import { mapState } from 'vuex';
import { mapGetters } from 'vuex';
import { mapMutations } from 'vuex';
import { mapActions } from 'vuex';

// import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

methods: {
    ...mapMutations(['clickBtn']),
},
computed() {
   //this.~ 으로 접근 가능
   ...mapState(['num']); 
   ...mapGetters(['reverseMessage']);
}


<button @click="clickBtn(num)">popup</button>
<!-- 만약 인자가 있다면 vue 디렉티브를 실행할 때 함수명에 인자를 지정하면 자동으로 넘겨진다. -->

...(spread 함수 ES6)

helper함수를 사용할 때 앞에 ...이 보일 것이다.
오타가 아니고 es6에서 나온 spread 함수라고 한다.

예를 들어보자

let josh = {
    field: 'web',
    language: 'js'
};

let developer = {
    nation: 'korea',
    ...josh
}

console.log(developer);

/**
{
  field: "web"
  language: "js"
  nation: "korea"
}
**/

만약 spread 함수를 사용하지 않는다면 어떻게 출력될까?

let josh = {
    field: 'web',
    language: 'js'
};

let developer = {
    nation: 'korea',
    josh
}

console.log(developer);

/**
{
  josh {
   field: "web"
   language: "js"
  },
  nation: "korea"
}
**/

spread함수를 사용하면 여러개의 객체를 하나로 통합시킬 수 있다.

다음 포스팅에서 todo-app을 helper함수를 이용하여 코드를 줄여보도록 하자.

출처 인프런 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex