MY notebook

Vuex module decorators

Published on Dec 6, 2021

resource:documentationvuevuextypescript

Source

Overview

  • format to write vuex

Getting Started

  • VuexModule and @Module to define module
  • usage is different from vue-class-component
  • getModule for typesafe access

Core Concepts

State

  • all properties of the class will turn into state props
  • must be initialized wtih null (wheels: number | null = null)

Getters

  • all getter functions will turn into vuex getters
  • get something() {...}
  • method-style also can

Mutations

  • declare functions with @Mutation
  • state.item++ = this.item++
  • again, not async
  • do not define with arrow functions since we need to rebind them at runtime

Actions

  • declare functions with @Action
  • do not use arrow function

MutationActions

  • when we want aysnc with action then commit mutation
  • @MutationAction
  • if return undefined, the mutation part will not be called

Advanced Usage

Namespaced Modules

  • @Module if plan to namespaced module
  • can call root:true on @Action to register global actions. Samething for MutationAction

Dynamic Modules

  • dynamic: true, store, name:'moduleName to @Module
  • does not support dynamic + nested modules
  • make sure import/requires are ordered to execute store defination first