vuex-module-decorators

# Mutations

All functions decorated with @Mutation are converted into Vuex mutations For example, the following code -







 
 
 
 


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

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

  @Mutation
  puncture(n: number) {
    this.wheels = this.wheels - n
  }
}

is equivalent of this -






 
 
 



export default {
  state: {
    wheels: 2
  },
  mutations: {
    puncture: (state, payload) => {
      state.wheels = state.wheels - payload
    }
  }
}

NOTE

Once decorated with the @Mutation decorator Mutations are run with this (context) set to the state So when you want to change things in the state, state.item++ is simply this.item++

🚨 WARNING

Mutation functions MUST NOT be async functions. Also do not define them as arrow ➡️ functions, since we need to rebind them at runtime.

← Actions →