feat(integration): add migration example using key

integration/app/app.module.ts

@@ -29,7 +29,22 @@ import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
     IonicStorageModule.forRoot(),
     NgxsModule.forRoot([CounterState]),
     NgxsResetPluginModule.forRoot(),
-    NgxsAsyncStoragePluginModule.forRoot(StorageService),
+    NgxsAsyncStoragePluginModule.forRoot(StorageService, {
+      key: ['counter'],
+      migrations: [
+        {
+          version: 0,
+          key: 'counter',
+          migrate(state) {
+            state = {
+              count: 5,
+              version: 1
+            };
+            return state;
+          }
+        }
+      ]
+    }),
     NgxsLoggerPluginModule.forRoot({ disabled: environment.production })
   ],
   providers: [

integration/app/home/home.page.html

@@ -8,13 +8,12 @@
 
 <ion-content class="ion-padding">
   <ng-container *ngIf="counter$ | async as counter">
-    <h1>{{ counter }}</h1>
+    <h1>{{ counter.count }}</h1>
   </ng-container>
   ​
   <ion-button (click)="increment()">Increment</ion-button>
   <ion-button (click)="decrement()">Decrement</ion-button>
 
-
   <ion-button (click)="resetState()">
     Reset State
   </ion-button>

integration/app/home/home.page.ts

@@ -1,3 +1,4 @@
+import { CounterStateModel } from './../store/counter.state';
 import { Component } from '@angular/core';
 import { Select, Store } from '@ngxs/store';
 import { CounterState, Increment, Decrement } from '../store/counter.state';
@@ -11,9 +12,9 @@ import { StateResetAll } from 'ngxs-reset-plugin';
 })
 export class HomePage {
   @Select(CounterState)
-  public counter$: Observable<number>;
+  public counter$: Observable<CounterStateModel>;
 
-  constructor(private store: Store) {}
+  constructor(private store: Store) { }
 
   increment() {
     this.store.dispatch(new Increment());

integration/app/store/counter.state.ts

@@ -5,17 +5,27 @@ export class Increment {
 export class Decrement {
   public static readonly type = '[Counter] Decrement';
 }
-@State<number>({
+
+export interface CounterStateModel {
+  count: number;
+  version: number;
+}
+
+@State<CounterStateModel>({
   name: 'counter',
-  defaults: 0
+  defaults: {
+    count: 0,
+    version: 0
+  }
 })
 export class CounterState {
   @Action(Increment)
-  public increment({ setState, getState }: StateContext<number>) {
-    setState(getState() + 1);
+  public increment({ patchState, getState }: StateContext<CounterStateModel>) {
+    patchState({ count: getState().count + 1 });
   }
+
   @Action(Decrement)
-  public decrement({ setState, getState }: StateContext<number>) {
-    setState(getState() - 1);
+  public decrement({ patchState, getState }: StateContext<CounterStateModel>) {
+    patchState({ count: getState().count - 1 });
   }
 }