Actions

    Actions are similar to mutations, the differences being that:

    • Instead of mutating the state, actions commit mutations.
    • Actions can contain arbitrary asynchronous operations.

    Let’s register a simple action:

    Action handlers receive a context object which exposes the same set of methods/properties on the store instance, so you can call to commit a mutation, or access the state and getters via context.state and context.getters. We can even call other actions with context.dispatch. We will see why this context object is not the store instance itself when we introduce Modules later.

    In practice, we often use ES2015 to simplify the code a bit (especially when we need to call commit multiple times):

    1. actions: {
    2.   increment ({ commit }) {
    3.     commit('increment')
    4.   }
    5. }
    1. store.dispatch('increment')

    This may look silly at first sight: if we want to increment the count, why don’t we just call store.commit('increment') directly? Remember that mutations have to be synchronous. Actions don’t. We can perform asynchronous operations inside an action:

    Actions support the same payload format and object-style dispatch:

    1. // dispatch with a payload
    2. store.dispatch('incrementAsync', {
    3.   amount: 10
    4. })
    6. // dispatch with an object
    7. store.dispatch({
    8.   type: 'incrementAsync',
    9.   amount: 10

    A more practical example of real-world actions would be an action to checkout a shopping cart, which involves calling an async API and committing multiple mutations:

    2.   checkout ({ commit, state }, products) {
    3.     // save the items currently in the cart
    4.     const savedCartItems = [...state.cart.added]
    5.     // send out checkout request, and optimistically
    6.     // clear the cart
    7.     commit(types.CHECKOUT_REQUEST)
    8.     // the shop API accepts a success callback and a failure callback
    9.     shop.buyProducts(
    10.       products,
    11.       // handle success
    12.       () => commit(types.CHECKOUT_SUCCESS),
    13.       // handle failure
    14.       () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    15.     )
    16.   }
    17. }

    Note we are performing a flow of asynchronous operations, and recording the side effects (state mutations) of the action by committing them.

    Actions are often asynchronous, so how do we know when an action is done? And more importantly, how can we compose multiple actions together to handle more complex async flows?

    The first thing to know is that store.dispatch can handle Promise returned by the triggered action handler and it also returns Promise:

    1. actions: {
    3.     return new Promise((resolve, reject) => {
    4.         commit('someMutation')
    5.         resolve()
    6.       }, 1000)
    7.     })
    8.   }
    9. }

    Now you can do:

    1. store.dispatch('actionA').then(() => {
    2.   // ...
    3. })

    And also in another action:

    1. // assuming `getData()` and `getOtherData()` return Promises
    3. actions: {
    4.   async actionA ({ commit }) {
    5.     commit('gotData', await getData())
    6.   },
    7.   async actionB ({ dispatch, commit }) {
    8.     await dispatch('actionA') // wait for `actionA` to finish
    9.     commit('gotOtherData', await getOtherData())
    10.   }
    11. }