Vue Store(Vuex) - Actions

Actions

: Mutations에는 동기적, 순차적 로직들만 선언하고 Actions에는 비동기 로직들을 선언

​

- Actions 등록

Vuex에 Actions를 등록하는 방법은 다른 속성과 유사하다.

// src/store/store.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

​

export const store = new Vuex.Store({

    mutations: {

        addCounter: function(state, payload){

        return state.counter++;

    }

},

​

actions: {

    addCounter: function(context) {

        // commit은 mutations 를 호출할때 사용하는 키워드, mutations의 addCounter 를 호출

        return context.commit('addCounter');

    }

}

})

​

HTTP 요청이나 setTimeout 같은 비동기 처리 로직들은 actions에서 처리해준다.

​

​

- Actions 사용 ( dispatch() )

​

methods: {

// Mutations 를 사용할때

    addCounter() {

        this.$store.commit('addCounter');

    }

​

//Actions 를 사용할때

    addCounter() {

        this.$store.dispatch('addCounter');

    }

}

Actions 동작

​

- Actions에 인자 값 넘기기

asyncIncrement( { by: 50, duration: 500 } )

​

export const store = new Vuex.Store({

    actions: {

        asyncIncrement: function(context, payload){

        return setTimeout(fuction () {

            context.commit('incremnet', payload.by);

        }, payload.duration);

    }

}

})

​

- mapActions

import { mapActions } from 'vuex'

​

export default {

    methods: {

        // Vuex Actions의 메서드 이름과 동일하면 [] 대괄호를 사용한다.

        ...mapActions([

            'asyncIncrement'

        ])

    }

}

​

* 보통은 src/store/modules/*.js 파일을 만들어 메인 store js인 src/store/store.js 파일에 집어 넣는다.

//user.js

const state = {

name: '',

auth: ''

}

​

const mutations = {

SET_AUTH: (state, auth) => {

state.auth = auth

},

SET_NAME: (state, name) => {

state.name = name

}

}

​

const actions = {

getAuth: ( { commit }, payload ) => {

commit('SET_AUTH', payload)

}

}

​

export default {

state,

mutations,

actions

}