TypeScript icon, indicating that this package has built-in type declarations

    0.0.14 • Public • Published

    ⚠️ This project is currently undergoing refactoring and is NOT production ready ⚠️

    TypeScript Decorators for Vuex Build Status npm package

    Write Vuex stores and modules with type-safety and code completion


    While working with decorators in TypeScript, it helps to have a basic understanding of what they are (and aren't) doing. With these decorators we'll write classes which are transformed into Vuex module/store definitions. It's important to note that we will never use new or extend with the decoratated classes.

    Utilizing class allows for a straightforward and ergonomic syntax while also providing usable typings down the line. When we combine that benefit with the added convenience of a normalized scope for our actions, mutations and getters (provided by the decorators) we end up with less boilerplate, strict-typing and clearer code across the board.

    Basic example

    The following snippet shows a standard Vuex declaration followed by an example using decorators.

    Without Decorators:

    const MyStore = new Vuex.Store({
      state: {
        prop: 'value'
      getters: {
        ['myStore/myGetter'](state, getters) {
          return state.prop + ' gotten';
        ['myStore/myOtherGetter'](state, getters) {
          return getters.myGetter + ' again';
      actions: {
        ['myStore/myAction']({commit, getters}, payload) {
          commit('myStore/myMutation', getters.['myStore/myOtherGetter'] + payload.prop);
      mutations: {
        ['myStore/myMutation'](state, payload) {
          state.prop = payload;

    With Decorators:

    class MyStore {
      prop = 'value';
      get myGetter(): string {
        return this.prop + ' gotten';
      get myOtherGetter(): string {
        return this.myGetter + ' again';
      private myAction(payload: string): Promise<void> {
        this.myMutation(this.myOtherGetter + payload.prop);
      private myMutation(payload: string) {
        this.prop = payload;

    Typing your stores and modules

    It's important to note that by themselves, these decorators do not provide full type-safety. Instead they allow us to write our stores and modules in a way that allows us to achieve type-safety via normal TypeScript conventions.

    Declaring actions, getters and mutations

    Leveraging TypeScript's “declaration merging” we can easily specify our store's api to achieve type-safety and code-completion throughout our application.

    In order to define our api, we first import a few constants and declare our module/store's api:

    // myStore.ts
    import {Actions, Getters, Mutations, Promises, Store} from 'vuex-ts-decorators/constants';
    declare module 'vuex-ts-decorators/constants' {
      // name: payload type
      interface Actions {
        'myStore/myAction': string;
      // name: promise type *required*
      interface Promises {
        'myStore/myAction': void;
      // name: payload type
      interface Mutations {
        'myStore/myMutation': string;
      // name: type
      interface Getters {
        'myStore/myGetter': string,
        'myStore/myOtherGetter': string

    Example usage and code structure

    For futher answers and information, please check out the companion vuex-ts-example project. You'll be able to see the decorators in action as well as some guidance on how you can structure your code for the best results.




    npm i vuex-ts-decorators-fork-7

    DownloadsWeekly Downloads






    Last publish


    • avatar