FIX default state value is not set

Author: Sascha Braun

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuex-simple",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "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

@@ -1,7 +1,7 @@
 import { Container, Token } from 'typedi';
 import { Action, Mutation } from 'vuex';
 
-import { applyDecorators } from './metadata';
+import { applyDecorators, getInitialState } from './metadata';
 import { getStoreBuilder, StoreBuilder } from './store-builder';
 import { DecoratorType, InjectType, ModuleOptions } from './types';
 import { decoratorUtil, injectUtil } from './utils';
@@ -28,8 +28,9 @@ export function Module(pOptions: ModuleOptions | string) {
 
       const options = handleOptions(pOptions);
       const storeBuilder: StoreBuilder<any> = getStoreBuilder();
+      const initialState = getInitialState(instance);
 
-      const moduleBuilder = storeBuilder.module(options.namespace, {});
+      const moduleBuilder = storeBuilder.module(options.namespace, initialState);
 
       applyDecorators<any>(moduleBuilder, instance);
 

src/example/test-module.ts

@@ -7,7 +7,10 @@ export class TestModule {
   private testApi!: TestApi;
 
   @State()
-  public counter: number = 0;
+  public counter: number = 10;
+
+  @State()
+  public name: string = 'Will';
 
   @Getter()
   public get cachedGetter() {

src/metadata.ts

@@ -1,24 +1,15 @@
-import Vue from 'vue';
 import { Action as Act, Getter, Mutation as Mut } from 'vuex';
 
 import { ModuleBuilder } from './module-builder';
 import { DecoratorType } from './types';
 import { decoratorUtil } from './utils';
 
-function getMethodDescriptor(prototype: any, propertyName: string) {
-  const descriptor = Object.getOwnPropertyDescriptor(prototype, propertyName);
-  if (descriptor && typeof descriptor.value === 'function') {
-    return descriptor;
-  }
-  return undefined;
-}
-
 export function applyDecorators<State>(moduleBuilder: ModuleBuilder<State, any>, instance: any) {
   const constructor = instance.constructor;
   const decorators = decoratorUtil.getDecorators(constructor);
   const proto = constructor.prototype;
 
-  applyStates(moduleBuilder, instance);
+  bindStateToStore(moduleBuilder, instance);
 
   const properties = Object.getOwnPropertyNames(proto);
 
@@ -53,25 +44,51 @@ export function applyDecorators<State>(moduleBuilder: ModuleBuilder<State, any>,
   });
 }
 
-function applyStates<State>(moduleBuilder: ModuleBuilder<State, any>, instance: any) {
+export function getInitialState(instance: any) {
+  const state: object = {};
+  const properties = findStateProperties(instance);
+  properties.forEach(propertyName => {
+    state[propertyName] = instance[propertyName];
+  });
+  return state;
+}
+
+function getMethodDescriptor(prototype: any, propertyName: string) {
+  const descriptor = Object.getOwnPropertyDescriptor(prototype, propertyName);
+  if (descriptor && typeof descriptor.value === 'function') {
+    return descriptor;
+  }
+  return undefined;
+}
+
+function findStateProperties(instance: any) {
+  const properties: string[] = [];
+
   const constructor = instance.constructor;
   const decorators = decoratorUtil.getDecorators(constructor);
   const keys = Object.keys(instance);
 
   keys.forEach(propertyName => {
     const decorator = decorators.get(propertyName);
     if (decorator && decorator === DecoratorType.STATE) {
-      Object.defineProperty(instance, propertyName, {
-        get() {
-          return moduleBuilder.state()[propertyName];
-        },
-        set(val: any) {
-          moduleBuilder.state()[propertyName] = val;
-        }
-      });
-      Vue.set(instance, propertyName, instance[propertyName]);
+      properties.push(propertyName);
     }
   });
+  return properties;
+}
+
+function bindStateToStore<State>(moduleBuilder: ModuleBuilder<State, any>, instance: any) {
+  const properties = findStateProperties(instance);
+  properties.forEach(propertyName => {
+    Object.defineProperty(instance, propertyName, {
+      get() {
+        return moduleBuilder.state()[propertyName];
+      },
+      set(val: any) {
+        moduleBuilder.state()[propertyName] = val;
+      }
+    });
+  });
 }
 
 function applyMutation<State>(

src/tests/simple.spec.ts

@@ -13,23 +13,43 @@ Vue.use(VuexSimple);
 test.before(t => {
   const storeBuilder = getStoreBuilder();
   storeBuilder.loadModules([TestModule]);
-  storeBuilder.create();
+  const store = storeBuilder.create();
+
+  // create snapshot of initial state
+  (t as any).context.snapshot = JSON.stringify(store.state);
 });
 
 test.beforeEach(t => {
+  const storeBuilder = getStoreBuilder();
+  const store = storeBuilder.create();
+
+  // reset store
+  store.replaceState(JSON.parse((t as any).context.snapshot));
+});
+
+test.serial('initial state', t => {
   const testModule = Container.get(TestModule);
-  testModule.setCounter(0);
+
+  t.is(testModule.counter, 10);
+  t.is(testModule.name, 'Will');
 });
 
 test.serial('simple increment', t => {
   const testModule = Container.get(TestModule);
+
+  t.is(testModule.counter, 10);
+
+  testModule.setCounter(0);
+
   t.is(testModule.counter, 0);
   t.notThrows(() => testModule.increment());
   t.is(testModule.counter, 1);
 });
 
 test.serial('simple computed getters', t => {
   const testModule = Container.get(TestModule);
+  testModule.setCounter(0);
+
   t.not(testModule.normalGetter, testModule.normalGetter);
   t.is(testModule.cachedGetter, testModule.cachedGetter);
   t.is(testModule.cachedGetter.item, 100);
@@ -41,6 +61,7 @@ test.serial('simple computed getters', t => {
 
 test.serial('simple incrementAsync', async t => {
   const testModule = Container.get(TestModule);
+  testModule.setCounter(0);
 
   t.is(testModule.counter, 0);
 
@@ -54,6 +75,7 @@ test.serial('simple incrementAsync', async t => {
 
 test.serial('store replaceState', async t => {
   const testModule = Container.get(TestModule);
+  testModule.setCounter(0);
 
   t.is(testModule.counter, 0);
   testModule.increment();
@@ -79,6 +101,7 @@ test.serial('store replaceState', async t => {
 
 test.serial('injection in module', async t => {
   const testModule = Container.get(TestModule);
+  testModule.setCounter(0);
 
   t.is(testModule.counter, 0);
 
@@ -88,7 +111,7 @@ test.serial('injection in module', async t => {
   t.is(testModule.counter, 42);
 });
 
-test.serial('injection in component', async t => {
+test.serial('injection in non vue component', async t => {
   const testModule = Container.get(TestModule);
   const myComponent = new MyComponent();