vuex-module-decorators

# 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'

@Module
export default class Vehicle extends VuexModule {
  wheels = 2

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

  @Action
  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)
    }
  }
}

NOTE

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)

🚨️️ WARNING

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.

← MutationActions →