chore: update

Author: ZDF2EBLOG

README.md

@@ -1,2 +1,36 @@
 # vuex-localForage
-本项目作为一个Vuex 插件，用于把store中的数据通过localForage存储到indexDB中
+
+本项目是一个[Vuex](https://vuex.vuejs.org/) plugin，用于自动把store中的数据永久存储，例如localStorage、Cookies、localForage。
+
+**package status**
+[![GitHub stars](https://img.shields.io/github/stars/championswimmer/vuex-persist.svg?style=social&label=%20vuex-refesh-storage)](http://github.com/blackdous/vuex-refesh-storage)
+[![npm](https://img.shields.io/npm/v/vuex-refesh-storage.svg?colorB=dd1100)](http://npmjs.com/vuex-refesh-storage)
+[![npm](https://img.shields.io/npm/dw/vuex-refesh-storage.svg?colorB=fc4f4f)](http://npmjs.com/vuex-refesh-storage)
+[![license](https://img.shields.io/github/license/blackdous/vuex-refesh-storage.svg)]()
+
+**package:size**
+[![npm:size:gzip](https://img.shields.io/bundlephobia/minzip/vuex-refesh-storage.svg?label=npm:size:gzip)](https://bundlephobia.com/result?p=vuex-refesh-storage)
+[![umd:min:gzip](https://img.badgesize.io/https://unpkg.com/vuex-refesh-storage?compression=gzip&label=umd:min:gzip)](https://unpkg.com/vuex-refesh-storage)
+[![umd:min:brotli](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/vuex-refesh-storage?compression=brotli&label=umd:min:brotli)](https://cdn.jsdelivr.net/npm/vuex-refesh-storage)
+
+## Install
+
+```bash
+  npm install vuex-refesh-storage -S
+  # or yarn
+  yarn add vuex-refesh-storage
+```
+
+使用 [UMD](https://github.com/umdjs/umd)、[unpkg](https://unpkg.com):
+
+```html
+<script src="https://unpkg.com/vuex-refesh-storage@0.1.0/dist/umd/index.min.js"></script>  
+```
+
+会在全局暴露一个`window.VuexRefeshStorage`对象。
+
+## 用法
+
+**vuex-refesh-storage**
+
+

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@blackdous/vuex_refesh_storage",
-  "version": "1.0.0",
+  "name": "vuex-refesh-storage",
+  "version": "0.1.0",
   "description": "A Vuex Refesh Storage plugin Typescript ",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

src/Options.ts

@@ -3,7 +3,7 @@
  * @Author: 19080088
  * @Date: 2021-04-19 08:51:29
  * @LastEditors: 19080088
- * @LastEditTime: 2021-04-22 17:15:49
+ * @LastEditTime: 2021-04-22 22:58:09
  */
 import { Store, MutationPayload } from 'vuex'
 import { AsyncStorage } from './AsyncStorage'
@@ -52,12 +52,16 @@ export interface Options<State> {
   /**
    * method to get state
    */
-  getState?: (key: string, storage: Storage | AsyncStorage | DefaultStorage) => Promise<void> | void
+  getState?: (key: string, storage: Storage | AsyncStorage | DefaultStorage) => void | Promise<void>
   /**
    * filter state.replace
    */
   filter?: (mutation: MutationPayload) => boolean
-
+  // after Store.replaceState execution
+  initAfterFunction?: (store: Store<State>) => {}
+  /**
+   * filter modules 
+   */
   reducer?: (state: State) => {}
   /**
    * Method to retrieve state from persistence

src/index.ts

@@ -40,6 +40,7 @@ export class VuexRefeshStorage<State> implements Options<State> {
   public setState: (key: string, state: any, storage: Storage | AsyncStorage | DefaultStorage) => Promise<void> | void
   public reducer: (state: State) => Partial<State>
   public filter: (mutation: Payload) => boolean
+  public initAfterFunction: (store: Store<State>) => {}
 
 
   /**
@@ -70,6 +71,9 @@ export class VuexRefeshStorage<State> implements Options<State> {
     this.overwrite = options.overwrite || false
 
     this.filter = options.filter || ((mutation) => true)
+    this.initAfterFunction = options.initAfterFunction || ((store) => {
+      return {}
+    })
     this.setState = (
       options.setState ? 
         options.setState : 
@@ -96,6 +100,7 @@ export class VuexRefeshStorage<State> implements Options<State> {
         const reState = this.overwrite ? initState : merge(store.state, currentState || {}, this.deepMergeOptions)
         store.replaceState(reState as State)
 
+        this.initAfterFunction(store)
         this.subscribe(store)((mutation: MutationPayload, state: State) => {
           if (this.filter(mutation)) {
             this.setState(this.key, this.reducer(state), this.storage)
@@ -120,10 +125,12 @@ export class VuexRefeshStorage<State> implements Options<State> {
 
         this.install = (store: Store<State>) => {
           const initState = this.initStorage ? this.getState(this.key, this.storage) : {}
+          // console.log('initState: ', this.getState(this.key, this.storage), initState);
           const reState = this.overwrite ? initState : merge(store.state, initState || {}, this.deepMergeOptions)
           store.replaceState(reState as State)
-
+          this.initAfterFunction(store)
           this.subscribe(store)((mutation: MutationPayload, state: State) => {
+            // console.log('mutation: ', mutation);
             if (this.filter(mutation)) {
               // console.log('this.filter(mutation): ', this.reducer(state), state, options?.modules);
               this.setState(this.key, this.reducer(state), this.storage)

test/vuex-asyncStorage.spec.ts

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
+import Vuex, { Store, MutationPayload } from 'vuex';
 // @ts-ignore
 import Storage from 'dom-storage';
 
@@ -8,8 +8,8 @@ const newJSON = require('flatted');
 import { VuexRefeshStorage } from '../src/index';
 
 Vue.use(Vuex)
-
 const storage = new Storage();
+const objStorage: any = {}
 
 describe("test: options", () => {
   it("test: options custome", () => {
@@ -28,7 +28,7 @@ describe("test: options", () => {
     expect(vuexRefeshStorage.overwrite).toBe(true);
     expect(vuexRefeshStorage.key).toBe('custumer');
     expect(storage.getItem('custumer')).toBe(null);
-  })
+  });
 
   it("test: options.initStorage: false or true ", () => {
     // options.initStorage: true
@@ -82,7 +82,7 @@ describe("test: options", () => {
     expect(storeTwo.state).toEqual({
       normal: 'default'
     })
-  })
+  });
 
   it("test: modules", () => {
     storage.clear();
@@ -110,7 +110,7 @@ describe("test: options", () => {
 
     store.commit('custom/changeState');
     expect(storage.getItem('custom')).toBe(JSON.stringify({custom: { change: "state" }}))
-  })
+  });
 
   it("test: flatted to should not clone circular objects", () => {
     storage.clear();
@@ -137,7 +137,7 @@ describe("test: options", () => {
     vuexRefeshStorage.install(store);
     store.commit('updateState')
     expect(storage.getItem('vuex')).toBe(newJSON.stringify({ circularState: initState }))
-  })
+  });
 
   it("should not persist whole store if modules array is empty", () => {
     storage.clear();
@@ -162,7 +162,7 @@ describe("test: options", () => {
     vuexRefeshStorage.install(store);
     store.commit('updateState');
     expect(storage.getItem('common')).toBe(JSON.stringify({}))
-  })
+  });
 
   it("should not persist whole store if modules array", () => {
     storage.clear();
@@ -190,7 +190,7 @@ describe("test: options", () => {
     expect(storage.getItem('common')).toBe(JSON.stringify({circularState: {
       name: '12312'
     }}))
-  })
+  });
 
   it("should not persist null values", () => {
     storage.clear();
@@ -214,7 +214,7 @@ describe("test: options", () => {
       orignal: '222',
       default: null
     }))
-  })
+  });
   it("should not merge array values when rehydrating by default", () => {
     storage.clear();
 
@@ -234,43 +234,111 @@ describe("test: options", () => {
       persisted: ["state", "json"]
     });
     expect(store.subscribe).toBeCalled()
-  })
+  });
 
-  it("should apply a custom arrayMerger function", () => {
-    storage.clear();
+it("should apply a custom arrayMerger function", () => {
+  storage.clear();
 
-    storage.setItem("vuex", JSON.stringify({ persisted: [1, 2] }));
+  storage.setItem("vuex", JSON.stringify({ persisted: [1, 2] }));
 
-    const store = new Vuex.Store({ state: { persisted: [1, 2, 3] } });
-    store.replaceState = jest.fn();
-    store.subscribe = jest.fn();
+  const store = new Vuex.Store({ state: { persisted: [1, 2, 3] } });
+  store.replaceState = jest.fn();
+  store.subscribe = jest.fn();
+
+  const vuexRefeshStorage = new VuexRefeshStorage({
+    storage,
+    deepMergeOptions: {
+      arrayMerge: function (store:any, saved:any) {
+        return ["hello!"];
+      }
+    }
+  });
+  vuexRefeshStorage.install(store)
+  expect(store.replaceState).toBeCalledWith({
+    persisted: ["hello!"],
+  });
+  expect(store.subscribe).toBeCalled();
+  });
+
+  // it("rehydrates store's state through the configured getter", () => {
+  //   storage.clear();
+  //   const store = new Vuex.Store({
+  //     state: {}
+  //   });
+  //   store.replaceState = jest.fn();
+  //   const vuexRefeshStorage = new VuexRefeshStorage({
+  //     storage,
+  //     getState: (key, storage) => () => ({ getter: "item" })
+  //   });
+  //   vuexRefeshStorage.install(store);
+  //   expect(store.replaceState).toBeCalledWith({ getter: "item" });
+  // })
+  it("persist the changed state back through the configured setter", () => {
+    expect.assertions(1);
+    storage.clear();
 
+    const store = new Vuex.Store({
+      state: {
+        setter: ''
+      },
+      mutations: {
+        setCommit (state) {
+          state.setter = "item"
+        }
+      }
+    });
     const vuexRefeshStorage = new VuexRefeshStorage({
       storage,
-      deepMergeOptions: {
-        arrayMerge: function (store:any, saved:any) {
-          return ["hello!"];
+      setState: (key, state) => {
+        expect(state).toEqual({ setter: "item" })
+      }
+    });
+
+    vuexRefeshStorage.install(store);
+    store.commit('setCommit')
+  });
+
+  it("filters to specific mutations", () => {
+    storage.clear();
+    const store = new Vuex.Store({
+      state: {
+        normal: ''
+      },
+      mutations: {
+        defaultCommit (state, newVal) {
+          state.normal = newVal
+        },
+        filter (state, newVal) {
+          state.normal = newVal
         }
       }
     });
-    vuexRefeshStorage.install(store)
-    expect(store.replaceState).toBeCalledWith({
-      persisted: ["hello!"],
+    const vuexRefeshStorage = new VuexRefeshStorage({
+      storage,
+      filter: (mutation) => mutation.type === 'filter'
     });
-    expect(store.subscribe).toBeCalled();
-    })
+    vuexRefeshStorage.install(store);
+    store.commit('defaultCommit', 'state');
+    expect(storage.getItem('vuex')).toBeNull()
+    store.commit('filter', 'state');
+    expect(storage.getItem('vuex')).toBe(JSON.stringify({normal: 'state'}))
+  })
 
-    it("rehydrates store's state through the configured getter", () => {
-      storage.clear();
-      const store = new Vuex.Store({
-        state: {}
-      });
-      store.replaceState = jest.fn();
-      const vuexRefeshStorage = new VuexRefeshStorage({
-        storage,
-        getState: () => ({ getter: "item" })
-      });
-      vuexRefeshStorage.install(store);
-      expect(store.replaceState).toBeCalledWith({ getter: "item" });
-    })
+  it("should call rehydrated callback once the state is replaced", () => {
+    storage.clear();
+
+    storage.setItem('vuex', JSON.stringify({ persisted: "json" }));
+    const store = new Vuex.Store({
+      state: { original: "state" }
+    });
+    const initAfterFunction = jest.fn();
+
+    const vuexRefeshStorage = new VuexRefeshStorage({
+      storage,
+      initAfterFunction
+    });
+    vuexRefeshStorage.install(store);
+
+    expect(initAfterFunction).toBeCalledWith(store);
+  });
 })