ADD vuex getters to module + UPDATE readme

Author: Sascha Braun

README.md

@@ -38,13 +38,20 @@ In this part, we create a basic counter module for vuex
 ```ts
 // modules/counter.ts
 
-import { Mutation, Module } from 'vuex-simple';
+import { Mutation, Module, Getter, State } from 'vuex-simple';
 
 @Module('counter')
 class MyCounter {
   @State()
   public counter: number = 0;
 
+  // A simple getter that is cached and made reactive by vuex
+  @Getter()
+  public get myGetter() {
+    console.log('my getter!');
+    return 42;
+  }
+
   // A simple mutation function
   // You can only modify your state in here, or Vuex will give you an error
   @Mutation()
@@ -87,6 +94,9 @@ myCounter.increment();
 myCounter.incrementBy(10);
 
 myCounter.asyncIncrement();
+
+// call vuex getter
+myCounter.myGetter;
 ```
 
 Let's explain what we are doing here a bit:
@@ -95,6 +105,8 @@ Let's explain what we are doing here a bit:
 
 - To add a mutation, we simply write a normal function and add a `@Mutation()` decorator to it. For now, mutations can only have at most 1 parameter.
 
+- To add a getter, we simply write a normal getter and add a `@Getter()` decorator to it.
+
 - To add an action, we simply write a normal function and add a `@Action()` decorator to it. As for mutations, actions can, for now, only have at most 1 parameter.
 
 **Note on actions:** vuex use actions to do their async stuff, but we don't really need an action for that, a simple function that can call our mutations is all we need, as shown above.
@@ -131,7 +143,7 @@ Here a simple example:
 import { Container, Service } from 'typedi';
 import Vue from 'vue';
 
-import VuexSimple, { getStoreBuilder, Mutation, VuexModule } from 'vuex-simple';
+import { Mutation, Module, State } from 'vuex-simple';
 
 @Service()
 @Module('counter')

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuex-simple",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "A simpler way to write your Vuex store in Typescript",
   "main": "build/main/index.js",
   "typings": "build/main/index.d.ts",

src/decorators.ts

@@ -37,6 +37,12 @@ export function State<T>() {
   };
 }
 
+export function Getter() {
+  return (target: any, propertyName: string, descriptor: PropertyDescriptor) => {
+    Utils.setDecorator(target, propertyName, DecoratorType.GETTER);
+  };
+}
+
 export function Mutation<T>() {
   return (
     target: T,

src/metadata.ts

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import { Action as Act, Mutation as Mut } from 'vuex';
+import { Action as Act, Getter, Mutation as Mut } from 'vuex';
 
 import { ModuleBuilder } from './module-builder';
 import { DecoratorType } from './types';
@@ -21,6 +21,7 @@ export function applyDecorators<State>(moduleBuilder: ModuleBuilder<State, any>,
   applyStates(instance);
 
   const properties = Object.getOwnPropertyNames(proto);
+
   properties.forEach(key => {
     if (key === 'constructor') {
       return;
@@ -31,6 +32,12 @@ export function applyDecorators<State>(moduleBuilder: ModuleBuilder<State, any>,
 
     if (decorator) {
       switch (decorator) {
+        case DecoratorType.GETTER:
+          const accessorDescriptor = Object.getOwnPropertyDescriptor(proto, key);
+          if (accessorDescriptor && typeof accessorDescriptor.get === 'function') {
+            applyGetter(moduleBuilder, instance, constructor, accessorDescriptor, key);
+          }
+          break;
         case DecoratorType.MUTATION:
           if (descriptor) {
             applyMutation<State>(moduleBuilder, instance, constructor, descriptor, key);
@@ -86,6 +93,27 @@ function applyMutation<State>(
   };
 }
 
+function applyGetter<State>(
+  moduleBuilder: ModuleBuilder<State, any>,
+  instance: any,
+  constructor: any,
+  descriptor: PropertyDescriptor,
+  propertyName: string
+) {
+  let getterFunction: Function = descriptor.get ? descriptor.get : (state: any) => ({});
+  getterFunction = getterFunction.bind(instance);
+  const getter: Getter<State, any> = state => {
+    return getterFunction();
+  };
+  moduleBuilder.addGetter(propertyName, getter);
+
+  Object.defineProperty(constructor.prototype, propertyName, {
+    get() {
+      return moduleBuilder.read(propertyName);
+    }
+  });
+}
+
 function applyAction<State>(
   moduleBuilder: ModuleBuilder<State, any>,
   instance: any,

src/module-builder.ts

@@ -1,4 +1,4 @@
-import { Action, Module, Mutation } from 'vuex';
+import { Action, Getter, Module, Mutation } from 'vuex';
 
 import { StoreBuilder } from './store-builder';
 
@@ -7,16 +7,13 @@ export class ModuleBuilder<State = any, RootState = any> {
   private _module: Module<State, RootState>;
   private _namespace: string;
 
-  constructor(
-    storeBuilder: StoreBuilder<RootState>,
-    namespace: string,
-    state: State
-  ) {
+  constructor(storeBuilder: StoreBuilder<RootState>, namespace: string, state: State) {
     this._storeBuilder = storeBuilder;
     this._namespace = namespace;
     this._module = {
       actions: {},
       mutations: {},
+      getters: {},
       namespaced: true,
       state
     };
@@ -32,18 +29,31 @@ export class ModuleBuilder<State = any, RootState = any> {
       this._module.mutations[name] = mutation;
     }
   }
+  public addGetter(name: string, getter: Getter<State, RootState>) {
+    if (this._module.getters) {
+      this._module.getters[name] = getter;
+    }
+  }
 
   public commit(name: string, payload: any) {
     if (this._storeBuilder && this._storeBuilder.store) {
-      this._storeBuilder.store.commit(this.namespace + '/' + name, payload);
+      return this._storeBuilder.store.commit(this.namespace + '/' + name, payload);
+    } else {
+      throw new Error('Could not commit: no store created');
+    }
+  }
+
+  public read(name: string) {
+    if (this._storeBuilder && this._storeBuilder.store) {
+      return this._storeBuilder.store.getters[this.namespace + '/' + name];
     } else {
       throw new Error('Could not commit: no store created');
     }
   }
 
   public dispatch(name: string, payload: any) {
     if (this._storeBuilder && this._storeBuilder.store) {
-      this._storeBuilder.store.dispatch(this.namespace + '/' + name, payload);
+      return this._storeBuilder.store.dispatch(this.namespace + '/' + name, payload);
     } else {
       throw new Error('Could not dispatch: no store created');
     }

src/tests/simple.spec.ts

@@ -1,13 +1,27 @@
 import untypedTest, { TestInterface } from 'ava';
 import Vue from 'vue';
 
+import { Getter } from '../decorators';
 import VuexSimple, { getStoreBuilder, Module, Mutation, State } from '../index';
 
 @Module('test')
 class TestModule {
   @State()
   public counter: number = 0;
 
+  @Getter()
+  public get cachedGetter() {
+    return {
+      item: this.counter + 100
+    };
+  }
+
+  public get normalGetter() {
+    return {
+      item: this.counter + 100
+    };
+  }
+
   @Mutation()
   public increment() {
     this.counter++;
@@ -39,13 +53,23 @@ test('simple increment', t => {
   t.is(t.context.testModule.counter, 1);
 });
 
+test('simple computed getters', t => {
+  t.not(t.context.testModule.normalGetter, t.context.testModule.normalGetter);
+  t.is(t.context.testModule.cachedGetter, t.context.testModule.cachedGetter);
+  t.is(t.context.testModule.cachedGetter.item, 101);
+
+  t.notThrows(() => t.context.testModule.increment());
+
+  t.is(t.context.testModule.cachedGetter.item, 102);
+});
+
 test('simple incrementAsync', async t => {
-  t.is(t.context.testModule.counter, 1);
+  t.is(t.context.testModule.counter, 2);
 
   const p = t.context.testModule.asyncIncrement();
   t.notThrowsAsync(() => p);
 
   await p;
 
-  t.is(t.context.testModule.counter, 2);
+  t.is(t.context.testModule.counter, 3);
 });

src/types.ts

@@ -1,7 +1,8 @@
 export enum DecoratorType {
   STATE = 1,
   ACTION,
-  MUTATION
+  MUTATION,
+  GETTER
 }
 
 export type DecoratorMap = Map<string, DecoratorType>;