vcm

vuex-class-module

A library offering syntatic sugar to help declare vuex modules using JavaScript ES6 classes

Showing:

Popularity

Downloads/wk

88

Maintenance

No Maintenance Data Available

Package

Dependencies

0

Size (min+gzip)

0.5KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Readme

Vuex Class Module (Deprecated!)

Use Vuex Class Component on Github or NPM

This is a simple class that utilizes ES7 decorators to provide Syntatic Sugar which enables you declare Vuex Modules using ES6 Classes.

Dependencies

  • Vue

  • Vuex

  • ES7 Decorators

Installation

npm install --save-dev vuex-class-module

How to use

We can first define a module class

import { Mutation, Action, Getter, HasGetter, extractVuexModule, VuexClass } from "vuex-class-module";
import anotherModule from "./anotherFolder/anotherModule";
import alsoAModule from "./anotherFolder/alsoAModule";


@VuexClass({
  modules: {
    anotherModule,
    alsoAModule,
  }
})


class MyModule {
  
  // Defines a vuex state and also a getter with the same name.
  @HasGetter firstname = "John";
  
  // Define a vuex state.
  lastname = "Doe";

  // Define a vuex mutation
  @Mutation changeFirstName(state, firstname) {
    state.firstname = firstname;
  }

  // yet another vuex mutation
  @Mutation changeLastName(state, lastname) {
    state.lastname = lastname;
  }

  // Define an cction
  @Action doAsync(context) {
    console.log("This should be an async process")
  }

  // Define a getter
  @Getter fullname(state) {
    return state.name + " " + state.lastname;
  }
}

Since all this is just using syntatic sugar for vuex modules, we can extract this as follows.

// This will return an object literal with all the appropriate vuex module definitions 
const myModule = extractVuexModule( MyModule )

// It can then be exported as an object as:
export default myModule;

This will output

  const myModule = {
    state: {
      firstname: "John",
      lastname: "Doe",
    },
    mutations: {
      changeFirstName: function(state, firstname) {
        state.firstname = firstname;
      },
      changeLastName: function(state, lastname) {
        state.lastname = lastname;
      },
    },
    actions: {
      doAsync: function(context) {
        console.log("This should be an async process")
      },      
    },
    getters: {
      firstname: function(state) {
        return state.firstname;
      },
      fullname: function(state) {
        return state.name + " " + state.lastname;
      }      
    },
    modules: {
      anotherModule,
      alsoAModule,    
    }
  }

Advantages

  • Works well with normal vuex store.

  • Easy to read and intuitive.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100