Actions #

As ações são semelhantes às mutações, as diferenças são as seguintes:

• Em vez de mudar o estado, as ações confirmam (ou fazem commit de) mutações.
• As ações podem conter operações assíncronas arbitrárias.

Vamos registrar uma ação simples:

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

As funções manipuladoras de ação recebem um objeto context que expõe o mesmo conjunto de métodos/propriedades na instância do store, para que você possa chamar context.commit para confirmar uma mutação ou acessar o estado e os getters através do context.state e do context.getters. Podemos até chamar outras ações com context.dispatch. Veremos por que esse objeto context não é a própria instância do store quando apresentarmos Módulos mais tarde.

Na prática, muitas vezes usamos ES2015 desestruturação de argumentos para simplificar um pouco o código (especialmente quando precisamos usar commit várias vezes):

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

Despachando Ações #

As ações são disparadas com o método store.dispatch:

store.dispatch('increment')

Isso pode parecer óbvio à primeira vista: se quisermos incrementar a contagem, por que não chamamos store.commit('increment') diretamente? Você se lembra que as mutações devem ser síncronas? As ações não. Podemos executar operações assíncronas dentro de uma ação:

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

As ações suportam o mesmo formato de payload e despacho estilo-objeto:

// despacho com payload
store.dispatch('incrementAsync', {
  amount: 10
})

// despacho com objeto
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

Um exemplo mais prático de ações reais seria uma ação para fazer checkout de um carrinho de compras, que envolve chamar uma API assíncrona e confirmar múltiplas mutações:

actions: {
  checkout ({ commit, state }, products) {
    // salva os itens que estão no carrinho
    const savedCartItems = [...state.cart.added]
    // enviar solicitação de checkout e com otimismo
    // limpa o carrinho
    commit(types.CHECKOUT_REQUEST)
    // a API da loja aceita um callback de sucesso e um callback de falha
    shop.buyProducts(
      products,
      // callback em caso de sucesso
      () => commit(types.CHECKOUT_SUCCESS),
      // callback em caso de falha
      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}

Observe que estamos realizando um fluxo de operações assíncronas, e gravando os efeitos colaterais (mutações de estado) da ação confirmando-os (ou fazendo commit deles).

Despachando Ações em Componentes #

Você pode despachar ações em componentes com this.$store.dispatch('xxx'), ou usar o auxiliar mapActions que mapeia métodos do componente para chamadas do store.dispatch (esta ação requer a injeção do store na instância raiz):

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // mapeia `this.increment()` para `this.$store.dispatch('increment')`

      // `mapActions` também suporta payloads:
      'incrementBy' // mapeia `this.incrementBy(amount)` para `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // mapeia `this.add()` para `this.$store.dispatch('increment')`
    })
  }
}

Composição de Ações #

As ações geralmente são assíncronas, então como sabemos quando uma ação é realizada? E mais importante, como podemos compor ações múltiplas em conjunto para lidar com fluxos assíncronos mais complexos?

A primeira coisa a saber é que o store.dispatch pode manipular a Promise retornada pela função manipuladora de ação acionada que também retorna Promise:

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}

Agora você pode fazer:

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

E também em outra ação:

actions: {
  // ...
  actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
}

Finalmente, se fizermos uso de async / await, podemos compor nossas ações desta maneira:

// assumindo que `getData()` e `getOtherData()` retornam Promises

actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // espera que `actionA` termine
    commit('gotOtherData', await getOtherData())
  }
}

É possível para um store.dispatch disparar várias funções manipuladoras de ação em diferentes módulos. Neste caso, o valor retornado será uma Promise que se resolve quando todas as outras funções manipuladoras disparadas forem resolvidas.