Vuex Class Component

vuex
typescript

#1

Vuex Class Component

Find More on NPM

A Type Safe Solution for Vuex Modules using ES6 Classes and ES7 Decorators that works out of the box for TypeScript and JavaScript.

  • Ensure your Codebase is type safe when writing Vuex Modules.

  • Provide proxies for getters, mutations and actions in a type safe way

  • Create a Vuex Manager for handling all vuex calls throughout your codebase.

import { VuexModule, mutation, action, getter, Module } from "vuex-class-component";

// TypeScript Only. (JavaScript devs don't need this)
interface Name { 
  firstname:string;
  lastname:string;
}

@Module({ namespacedPath: "user/" })
export class UserStore extends VuexModule {
  
  private firstname = "John";
  private lastname = "Doe";
  @getter specialty = "JavaScript";
  @getter occupation = "Developer";

  @mutation 
  changeName({firstname, lastname}:Name) {
    this.firstname = firstname;
    this.lastname = lastname;
  }

  @action() 
  doSomethingAsync() { ... }

  @action() 
  doAnotherAsyncStuff(payload) { ... }

  get fullName() {
    return this.firstname + " " + this.lastname;
  }
}

Use in component like so:

  @Component
  export class MyComponent extends Vue {
    
    user = UserStore.CreateProxy( this.$store, UserStore );

    mounted() {
      /** Now we can easily call */
      this.user.fullName; /** John Doe */
      this.user.occupation; /** Developer */
      this.user.changeName({ firstname:"John", lastname:"Doe" });
      this.user.doAnotherAsyncStuff(payload)
      .then( result => console.log( result ) );
    }
  }