Helper 함수

Vuex의 주요 속성들을 더욱 쉽게 사용할 수 있는 API가 있다고 해서 그것이 무엇이고, 어떻게 사용하는 지 알아봅시다!

 

---

1. Helper

Helper란? 코드의 중복을 줄이고 가독성을 높이기 위해 자주 사용되는 유틸리티 함수 or 메소드를 제공하는 API입니다.

 

---

2. 사용방법

helper를 사용하고자 하는 vue 파일에서 다음과 같이 해당 헬퍼를 로딩해 줍니다.

App.vue

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

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

 

---

3. 기능

1) mapState

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.$store.state.num }}</p> -->
<p>{{ this.num }}</p>

 

2) mapGetters

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

이는 Vuex 저장소의 getters를 컴포넌트의 computed 속성에 매핑합니다.

 

다음과 같이 사용할 수 있어요.

// App.vue
import { mapGetters } from "vuex";

computed() { ...mapGetters(["reverseMessage"]) }

// store.js
getters: {
  reverseMessage(state) {
    return state.msg.split('').reverse().join('');
  }
}

<!-- <p>{{ this.$store.getters.reverseMessage }}</p> -->
<p>{{ this.reverseMessage }}</p>

 

3) mapMutations

mapMutations는 Vuex에 선언한 mutations 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼입니다.

이는 Vuex 저장소의 mutations를 더 쉽게 디스패치할 수 있도록 합니다.

 

다음과 같이 사용할 수 있어요.

// App.vue
import { mapMutations } from "vuex";

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

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

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

 

4) mapActions

mapActions는 Vuex에 선언한 actions 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼입니다.

이는 Vuex 저장소의 액션을 더 쉽게 디스패치할 수 있도록 합니다.

 

다음과 같이 사용할 수 있어요.

// App.vue
import { mapActions } from "vuex";

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

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

<button @click="delayClickBtn">delay popup message</button>

 

---

4. 정리하며

지금까지 Helper에 대해 알아보았습니다.

이 헬퍼들을 사용하면, Vuex와 컴포넌트 간의 상호작용을 더 간결하고 명확하게 만들 수 있을 것 같아요!

 

참고

장기효 님의 헬퍼 함수

Namjun Kim 님의 [Vue.js] Vuex Helper, Vuex 프로젝트 모듈화