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

JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.

기초지식은 다른 강의를 참조하도록 하라.

참고:

[Package]Bower(Front End Pacakage 관리) 설치

[Package]Vue.js

https://vuex.vuejs.org/kr/

http://vuejs.kr/update/2017/01/08/using-vue-with-vuex-vue-rotuer/

vue에서 vuex를 붙혀서 사용하는 방법은 여러분들도 이제 알았다.

조금 더 깔끔하게 사용하는 방식이 있는데 바로 핼퍼를 사용하는 것이다.

결합도를 조금 더 낮추는 효과가 있으며 전역을 사용하는 vuex를 좀 더 컴포넌트적인 관점으로 보게해준다.

그리고 마크업 관점에서 코드가 길어지는걸 대비할 수 있다.

이를 이용하는게 바로 helper들이고 vuex map함수라고 부르는 경우도 있다.

뭐라고 부르건 여러분들의 마음이다.

helper 함수 종류

mapState - state를 연결해주는 함수

mapGetters - getters를 연결해주는 함수

mapMutations - mutations를 연결해주는 함수

mapActions - actions를 연결해주는 함수

엄청 당연한 말만 써놨는데 생각해 보니까 당연하다.

예제는 기존 코드를 변경하는 방식으로 진행할 생각이다.

https://github.com/justkukaro/vue-test-server/tree/master/testserver

ajax콜을 받는 백엔드 서버이다. 없으면 없는대로 진행해도 무리는 없다.

https://github.com/justkukaro/vue-test-server/tree/master/vuex-actions

이것이 저번까지 했던 helper를 쓰지 않는 코드이다.

https://github.com/justkukaro/vue-test-server/tree/master/vuex-helper

이 코드가 핼퍼를 사용하는 코드이다.

/* store.js */
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        count: 0,
        weight: 2,
        random: 0,
    },
    mutations: {
        increment(state) {
            state.count++;
        },
        decrement(state) {
            state.count--;
        },
        successGenerateRandomNumber(state, payload){
            state.random = payload.num;
        },
        failGenerateRandomNumber(/*state, payload*/){
            console.log('ERROR!');
        }
    },
    getters:{
        count(state, getters){
            return Math.pow(state.count, getters.weight);
        },
        weight(state, /*getters*/){
            return state.weight;
        },
        random(state, /*getters*/){
            return state.random;
        }
    },
    actions:{
        generateRandomNumber({commit, /*state*/}, /*payload*/) {
            axios.get(`http://localhost:4321/`)
                .then((res) => {
                    commit('successGenerateRandomNumber', res.data);
                })
                .catch((res) => {
                    commit('failGenerateRandomNumber', res);
                });
        }
    }
})

저번에 사용했던 store가 딱 적당한 예제인데 모든 부분이 조금씩 사용되고 있다.

<!--HelloWorld.vue-->
<template>
    <div class="hello">
        <b>count : {{$store.state.count}}</b><br>
        <b>count^2 : {{$store.getters.count}}</b><br>
        <b>random : {{$store.getters.random}}</b><br>
        <input type="button" @click="increment()" value="increment"/>
        <input type="button" @click="decrement()" value="decrement"/>
        <input type="button" @click="randomNumber()" value="random"/>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        data() {
            return {}
        },
        created: function () {
        },
        methods: {
            increment: function () {
                this.$store.commit('increment')
            },
            decrement: function () {
                this.$store.commit('decrement')
            },
            randomNumber: function () {
                this.$store.dispatch('generateRandomNumber', /*100*/);
            }
        }
    }
</script>

<style scoped>
</style>

모든 요소들을 사용하는 것을 볼 수 있다.

먼저 state부터 바꿔보자.

mapState

import {mapState} from 'vuex'

상단에는 당연히 위처럼 선언해준다.

computed: {
    ...mapState([
        'count'
    ])
}

mapState는 state를 끌어와서 사용할 수 있다.

만약 여러분이 적은게 store내에 존재하지 않다면 당연히 아무것도 출력하지 않는 빈문자열이 출력된다. === 아무것도 출력안됨.

이 state는 computed에 선언해주어야한다.

반드시 computed여야하는건 아니지만 권장된다.

<b>count : {{count}}</b><br>

그러면 여러분은 이렇게 사용할 수 있게 된다.

마크업적으로 훨씬 깔끔하게 되었다.

...mapState({
    cnt: 'count',
})

여러분은 무조건 배열만 써야하는것은 아니다.

만약 이름을 정하고 싶다면 object를 사용해도 무방하다.

<b>count : {{cnt}}</b><br>

당연하게 호출하는 방식도 바뀌게 된다.

mapGetters

...mapGetters({
    count: 'count'
}),

사용방식 역시 똑같다. 당연히 배열로도 사용가능하다.

computed: {
    ...mapState({
        cnt: 'count',
    }),
    ...mapGetters({
        count: 'count'
    }),
}

이 Getters는 computed에 선언해주어야한다.

반드시 computed여야하는건 아니지만 권장된다.

<b>count^2 : {{count}}</b><br>

위 처럼 사용할 수 있다.

mapMutations

increment: function () {
    this.$store.commit('increment')
},
decrement: function () {
    this.$store.commit('decrement')
},

이 두녀석을 통째로 바꿔보자.

import {mapState, mapGetters, mapMutations} from 'vuex'

일단 당연히 선두에 선언해줘야한다.

methods: {
    ...mapMutations({
        increment: 'increment',
        decrement: 'decrement'
    }),
    randomNumber: function () {
        this.$store.dispatch('generateRandomNumber', /*100*/);
    }
},

이 녀석들은 methods에 선언해줘야한다.

그리고 store에 있는 변수들과 연결시켜준다.

<input type="button" @click="increment()" value="increment"/>
<input type="button" @click="decrement()" value="decrement"/>

그러면 놀랍게도 함수가 직접 store와 연결된다.

이는 장점과 단점이 함께 있어서 필자생각에는 좀 주의를 요하긴 하는거 같다.

mapActions

randomNumber: function () {
    this.$store.dispatch('generateRandomNumber', /*100*/);
}

이번엔 이녀석을 바꿔보자.

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

이제 helper 4총사를 모두 선언하였다.

methods: {
    ...mapMutations({
        increment: 'increment',
        decrement: 'decrement'
    }),
    ...mapActions({
        randomNumber: 'generateRandomNumber'
    }),
},

이 녀석역시 methos에 선언해줘야한다.

<input type="button" @click="randomNumber()" value="random"/>

코드 하나 수정없이 직접 actions과 연결하였다.

helper의 사용유무의 장점과 단점

이 개념은 react포스팅 react-redux에도 똑같이 존재하는 개념이다.

물론 둘 다 써본 필자의 입장에서는 개념은 똑같지만 vuex가 좀더 세련되 보인다, 다만 큰 작업을 하거나 자유도 측면에서는 redux가 좀더 낫다.

다만 react-redux나 vuex helper같은 개념이 왜 필요하냐는 것이다.

사실 없이 쓰는 사람들도 굉장히 많다.

이를 이해하기위해서는 원자 디자인을 이해해야한다.

필자도 한번 포스팅 할 생각이고 필자가 포스팅을 완료하면 이 항목이 수정 될?수도 있을것이다.

그러나 아직 개념을 모르는 사람들이 있다면 이 포스팅을 보시면 도움이 될 것이다.

간단히 말하자면 모든 컴포넌트에는 data와 methods가 없고 외부만 존재하고 데이터는 store에서 처리한다는 개념이다.

즉 모든 데이터는 store에서 일괄처리한다는 것인데 아주 여러가지 단점과 아주 여러가지 장점을 함께 가진다.

그래서 뭐가 좋다라고 말하기는 힘들다. 그러니 여러분들은 알아보고 잘 생각해서 사용하는 것이 좋다.