# Actions

All functions that are decorated with @Action are converted into vuex actions.

For example this code -


import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators'
import { get } from 'request'

export default class Vehicle extends VuexModule {
  wheels = 2

  addWheel(n: number) {
    this.wheels = this.wheels + n

  async fetchNewWheels(wheelStore: string) {
    const wheels = await get(wheelStore)
    this.context.commit('addWheel', wheels)

is equivalent of this -


const request = require('request')
export default {
  state: {
    wheels: 2
  mutations: {
    addWheel: (state, payload) => {
      state.wheels = state.wheels + payload
  actions: {
    fetchNewWheels: async (context, payload) => {
      const wheels = await request.get(payload)
      context.commit('addWheel', wheels)


Once decorated with @Action the function will be called with this having the following shape - {...[all fields of state], context} The action payload comes as an argument. So to commit a mutation manually from within action's body simply call this.context.commit('mutationName', mutPayload)


If you are doing a long running task inside your action, it is recommended to define it as an async function. But even if you do not, this library will wrap your function into a Promise and await it.

If you want something to actually happen synchronously, make it a Mutation instead

Also do not define them as arrow ➡️ functions, since we need to rebind them at runtime.