update readme & samples (add examples with dependency injection for easier migration)

Author: Sascha Braun

CHANGELOG.md

@@ -1,7 +1,7 @@
 # Changelog
 
 2.0.0:
-  - Remove typedi / dependency injections
+  - Remove typedi / dependency injections: now available in a separate package [vue-typedi](https://github.com/sascha245/vue-typedi)
   - Remove deprecated functions
   - Cleaner and easier usages
   - Submodules

README.md

@@ -5,12 +5,12 @@ A simpler way to write your Vuex store in Typescript
 ## Changelog
 
 2.0.0:
-  - Remove typedi / dependency injections
+  - Remove typedi / dependency injections: : now available in a separate package [vue-typedi](https://github.com/sascha245/vue-typedi)
   - Remove deprecated functions
   - Cleaner and easier usages
   - Submodules
 
-## Usage
+## Install
 
 1. Install vuex
 `npm install vuex --save`
@@ -125,7 +125,7 @@ import { MyStore } from '@/store/store';
 @Component
 export default class MyComponent extends Vue {
 
-  public store = useStore<MyStore>(this.$store);
+  public store: MyStore = useStore(this.$store);
 
   public get readState() {
     // access state like a property
@@ -153,6 +153,82 @@ export default class MyComponent extends Vue {
 }
 ```
 
+## Example with dependency injections
+
+#### Module with dependency injection
+
+```ts
+// store/modules/foo.ts
+
+import { Mutation, State } from 'vuex-simple';
+import { Inject, Injectable } from 'vue-typedi';
+import { MyService } from '...';
+
+@Injectable()
+export class FooModule {
+
+  @Inject()
+  public myService!: MyService;
+
+  ...
+}
+```
+
+#### Vue component with module injection
+
+```ts
+// store/tokens.ts
+
+import { Token } from 'vue-typedi';
+
+export default {
+  BAR: new Token('bar'),
+  BAR_FOO1: new Token('bar/foo1'),
+  BAR_FOO2: new Token('bar/foo2')
+};
+
+// store/index.ts
+
+import Vue from 'vue';
+import Vuex from 'vuex';
+import { Container } from 'vue-typedi';
+
+import { createVuexStore } from 'vuex-simple';
+
+import { MyStore } from './store';
+
+import tokens from './tokens'
+
+Vue.use(Vuex);
+
+const instance = new MyStore()
+
+Container.set(instance.bar, tokens.BAR);
+Container.set(instance.bar.foo1, tokens.BAR_FOO1);
+Container.set(instance.bar.foo2, tokens.BAR_FOO2);
+
+export default createVuexStore(instance, {
+  strict: false,
+  modules: {},
+  plugins: []
+});
+
+// In your vue component
+
+import { Inject } from 'vue-typedi';
+import { FooModule } from '@/store/modules/foo';
+import tokens from '@/store/tokens';
+
+@Component
+export default class MyComponent extends Vue {
+
+  @Inject(tokens.BAR_FOO1)
+  public foo1!: FooModule;
+
+  ...
+}
+```
+
 ## Features
 
 #### State

package.json

@@ -39,6 +39,7 @@
     "vue-property-decorator": "^7.0.0",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.5.17",
+    "vue-typedi": "^1.1.1",
     "vuex": "^3.0.1"
   },
   "browserslist": [

samples/main.ts

@@ -1,12 +1,14 @@
 import 'reflect-metadata';
 
 import Vue from 'vue';
+import VueTypedi from 'vue-typedi';
 
 import App from './App.vue';
 import router from './router';
 import store from './store';
 
 Vue.config.productionTip = false;
+Vue.use(VueTypedi);
 
 new Vue({
   render: h => h(App),

samples/store/index.ts

@@ -1,11 +1,20 @@
 import Vue from 'vue';
+import { Container } from 'vue-typedi';
 import Vuex from 'vuex';
 
 import { createVuexStore } from '../../src';
 import { MyStore } from './store';
+import tokens from './tokens';
 
 Vue.use(Vuex);
 
-export default createVuexStore(new MyStore(), {
+const instance = new MyStore();
+
+Container.set(tokens.MY, instance.my);
+Container.set(tokens.TEST, instance.test);
+Container.set(tokens.TEST_MY1, instance.test.my1);
+Container.set(tokens.TEST_MY2, instance.test.my2);
+
+export default createVuexStore(instance, {
   strict: true
 });

samples/store/modules/InjectableModule.ts

@@ -0,0 +1,22 @@
+import { Inject, Injectable } from 'vue-typedi';
+
+import { Getter, Module } from '../../../src';
+import { MyModule } from './MyModule';
+import { TestModule } from './TestModule';
+
+@Injectable()
+export class InjectableModule {
+  @Inject()
+  public testModule!: TestModule;
+
+  @Module()
+  public my1 = new MyModule(5);
+
+  @Module()
+  public my2 = new MyModule();
+
+  @Getter()
+  public get total() {
+    return this.my1.counter + this.my2.counter;
+  }
+}

samples/store/services/TestService.ts

@@ -1,9 +1,7 @@
-import { Service } from "typedi";
+import { Service } from 'vue-typedi';
 
 @Service()
 export class TestService {
-  private _something = 42;
-
   public async countItems() {
     await new Promise(r => setTimeout(r, 500));
     return 42;

samples/store/tokens.ts

@@ -0,0 +1,8 @@
+import { Token } from 'vue-typedi';
+
+export default {
+  MY: new Token('my'),
+  TEST: new Token('test'),
+  TEST_MY1: new Token('test/my1'),
+  TEST_MY2: new Token('test/my2')
+};

samples/views/Home.ts

@@ -1,15 +1,21 @@
 import { Component, Vue } from 'vue-property-decorator';
+import { Inject } from 'vue-typedi';
 
 import { useStore } from '../../src';
+import { TestModule } from '../store/modules/TestModule';
 import { MyStore } from '../store/store';
+import tokens from '../store/tokens';
 
 @Component
 export default class Home extends Vue {
-  public store = useStore<MyStore>(this.$store);
+  public store: MyStore = useStore(this.$store);
 
-  public get testModule() {
-    return this.store.test;
-  }
+  @Inject(tokens.TEST)
+  public testModule!: TestModule;
+
+  // public get testModule() {
+  //   return this.store.test;
+  // }
 
   public get counter() {
     return this.testModule.counter;
@@ -21,6 +27,4 @@ export default class Home extends Vue {
   public increment() {
     this.testModule.increment();
   }
-
-  public created() {}
 }