Allow custom replaceState

championswimmer · Jan 19, 2021 · 83ba66c · 83ba66c
1 parent 9b7dd48
commit 83ba66c
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -204,6 +204,7 @@ Here are the properties, and what they mean -
 | storage         | Storage (Web API)                      | localStorage, sessionStorage, localforage or your custom Storage object. <br>Must implement getItem, setItem, clear etc. <br> _**Default: window.localStorage**_                     |
 | saveState       | function<br> (key, state[, storage])   | If not using storage, this custom function handles <br>saving state to persistence                                                                                                   |
 | restoreState    | function<br> (key[, storage]) => state | If not using storage, this custom function handles <br>retrieving state from storage                                                                                                 |
+| replaceState    | function<br> (store, savedState)       | Replace the state of store with custom function <br>Trigger one or more mutations from store.                                                                                            |
 | reducer         | function<br> (state) => object         | State reducer. reduces state to only those values you want to save. <br>By default, saves entire state                                                                               |
 | filter          | function<br> (mutation) => boolean     | Mutation filter. Look at `mutation.type` and return true <br>for only those ones which you want a persistence write to be triggered for. <br> Default returns true for all mutations |
 | modules         | string[]                               | List of modules you want to persist. (Do not write your own reducer if you want to use this)                                                                                         |

diff --git a/src/PersistOptions.ts b/src/PersistOptions.ts
@@ -1,7 +1,7 @@
 /**
  * Options to be used to construct a {@link VuexPersistence} object
  */
-import { Payload } from 'vuex'
+import { Payload, Store } from 'vuex'
 import { AsyncStorage } from './AsyncStorage'
 import { MergeOptionType } from './utils'
 
@@ -26,6 +26,13 @@ export interface PersistOptions<S> {
    */
   saveState?: (key: string, state: {}, storage?: Storage) => Promise<void> | void
 
+  /**
+   * Method to commit saved state to store
+   * @param store
+   * @param savedState
+   */
+  replaceState?: (store: Store<S>, savedState: S) => void
+
   /**
    * Function to reduce state to the object you want to save.
    * Be default, we save the entire state.

diff --git a/src/index.ts b/src/index.ts
@@ -26,6 +26,7 @@ export class VuexPersistence<S> implements PersistOptions<S> {
   public strictMode: boolean
   public supportCircular: boolean
   public mergeOption: MergeOptionType
+  public replaceState?: (store: Store<S>,state: S) => void
 
   /**
    * The plugin function that can be used inside a vuex store.
@@ -111,6 +112,8 @@ export class VuexPersistence<S> implements PersistOptions<S> {
       }
     }
 
+    this.replaceState = options.replaceState
+
     this.asyncStorage = options.asyncStorage || false
 
     if (this.asyncStorage) {
@@ -177,9 +180,12 @@ export class VuexPersistence<S> implements PersistOptions<S> {
          */
         (store as any).restored = ((this.restoreState(this.key, this.storage)) as Promise<S>).then((savedState) => {
           /**
-           * If in strict mode, do only via mutation
+           * If a replaceState function is provided, use that.
+           * Else check if in strict mode, do only via mutation
            */
-          if (this.strictMode) {
+          if (this.replaceState) {
+            this.replaceState(store, savedState)
+          } else if (this.strictMode) {
             store.commit('RESTORE_MUTATION', savedState)
           } else {
             store.replaceState(merge(store.state, savedState || {}, this.mergeOption) as S)
@@ -245,7 +251,9 @@ export class VuexPersistence<S> implements PersistOptions<S> {
       this.plugin = (store: Store<S>) => {
         const savedState = this.restoreState(this.key, this.storage) as S
 
-        if (this.strictMode) {
+        if (this.replaceState) {
+          this.replaceState(store, savedState)
+        } else if (this.strictMode) {
           store.commit('RESTORE_MUTATION', savedState)
         } else {
           store.replaceState(merge(store.state, savedState || {}, this.mergeOption) as S)