vuex-class-module/README.md

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

# Vuex Class Module (Deprecated!)
### Use Vuex Class Component on [Github](https://github.com/michaelolof/vuex-class-component) or [NPM](https://www.npmjs.com/package/vuex-class-component)
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.