[Vue-17]vuex 사용하기(actions로 비동기 통신)

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/

vuex에 대한 3번째 포스팅인데 앞으로 더 남았다.

state와 mutations에 대한 포스팅과 getters에 대한 포스팅을 참조하고 보는 것을 추천한다.

vuex에서는 위의 세가지만 알면 사실 다 할 수 있긴한데 특별히 비동기에 대한 작업을 할 수 있는 actions라는 기능을 추가로 제공하였다.

사실 이 녀석이 꼭 필요하진 않지만 모든 비동기 작업을 모아서 관리할 수 있다는 점,

그리고 상태 관리 관점에서 봤을 때 깔끔하게 동작하게 된다는 장점이 있다.

출처 -https://medium.com/@sadickjunior/how-does-a-minimal-vuex-implementation-looks-like-find-out-c2c2e13619cb

vuex에서 구상하는 이상적인 이벤트 사이클이 위와 같다.

actions에서 일어나는 일은 mutations로 옮긴다.

그리고 state로 옮겨서 vue 컴포넌트에 반영하는 것이다.

우리도 정확히 위 예제처럼 실행할 것이다.

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

대상이 될 예제 서버는 위와 같다.

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

또한 예제 프로젝트는 위와 같다.

npm install --save axios

우리는 axios로 통신을 보낼것이기에 axios를 설치해준다.

/* 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*/}) {
            console.log(arguments);
            axios.get(`http://localhost:4321/`)
                .then((res) => {
                    commit('successGenerateRandomNumber', res.data);
                })
                .catch((res) => {
                    commit('failGenerateRandomNumber', res);
                });
        }
    }
})

먼저 store를 조금 수정해준다. 봐야할 것은 몇없으니 확대해서 보여주겠다.

actions:{
    generateRandomNumber({commit, /*state*/}, /*payload*/) {
        axios.get(`http://localhost:4321/`)
            .then((res) => {
                commit('successGenerateRandomNumber', res.data);
            })
            .catch((res) => {
                commit('failGenerateRandomNumber', res);
            });
    }
}

action도 하나의 함수이다. 첫번째 파라메터로 여러가지 변수를 넘겨받는데 구조분해로 필요한것만 가져가자.

만약 구조분해를 사용하지 않을 생각이라면 보통 변수이름을 context로 사용하는 경향이 있다.

commit은 필수적이며 state도 쓰일 때가 있다.

두번째 파라메터로는 payload를 받는데 여기서는 안쓰므로 주석처리를 했다.

이렇게 성공했을 때와 실패했을 때를 나눠서 action을 처리해주는게 보통이다.

여기서 commit을 하게 될 경우 바로 mutations로 넘어가게 된다.

successGenerateRandomNumber(state, payload){
    state.random = payload.num;
},
failGenerateRandomNumber(/*state, payload*/){
    console.log('ERROR!');
}

mutations에서는 성공과 실패를 각각 처리해주면된다.

여기서 부터는 여러분이 아는 개념이니까 생략하겠다.

random(state, /*getters*/){
    return state.random;
}

그리고 이걸 받는 getters가 존재한다.

<!--HelloWorld.vue-->
<template>
    <div class="hello">
        <b>count : {{this.$store.state.count}}</b><br>
        <b>count^2 : {{this.$store.getters.count}}</b><br>
        <b>random : {{this.$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>

이 소스는 적용될 예제 소스이다.

저번 예제에서 추가된 소스이다.

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

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

우리는 기존에는 commit을 사용해서 mutations으로 넘겼는데 비동기콜에서는 dispatch를 사용해서 actions로 넘긴다.

당연히 payload를 넘길 수 있으며 해당 예제에서는 payload를 넘기지 않을 것이므로 주석처리를 한다.

이제 예제를 테스팅해보자.

제대로 동작하는 것을 볼 수 있다.

위에도 언급했지만 actions는 mutations와 다르게 반드시 commit을 해줘서 다시 mutations에 넘겨줘야한다.

물론 비동기는 사실 actions가 없어도 사용할 수 있다. 그냥 내부에서 선언해버리면 그만이다.

그러나 필자가 그렇게 코딩을 해본결과... 아주 맛있는 스파게티 한그릇이 뚝딱 완성되므로 가급적이면 actions에서 처리하도록하자.