From 83ba66cd5ca26c2911586e4379a97f2e327968d4 Mon Sep 17 00:00:00 2001 From: Robbe Van Petegem Date: Tue, 19 Jan 2021 21:18:20 +0100 Subject: [PATCH] Allow custom replaceState --- README.md | 1 + src/PersistOptions.ts | 9 ++++++++- src/index.ts | 14 +++++++++++--- 3 files changed, 20 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index a76889b..82224a2 100644 --- 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.
Must implement getItem, setItem, clear etc.
_**Default: window.localStorage**_ | | saveState | function
(key, state[, storage]) | If not using storage, this custom function handles
saving state to persistence | | restoreState | function
(key[, storage]) => state | If not using storage, this custom function handles
retrieving state from storage | +| replaceState | function
(store, savedState) | Replace the state of store with custom function
Trigger one or more mutations from store. | | reducer | function
(state) => object | State reducer. reduces state to only those values you want to save.
By default, saves entire state | | filter | function
(mutation) => boolean | Mutation filter. Look at `mutation.type` and return true
for only those ones which you want a persistence write to be triggered for.
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 index 1872a28..f3bac05 100644 --- 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 { */ saveState?: (key: string, state: {}, storage?: Storage) => Promise | void + /** + * Method to commit saved state to store + * @param store + * @param savedState + */ + replaceState?: (store: Store, 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 index 17a2196..94d5429 100644 --- a/src/index.ts +++ b/src/index.ts @@ -26,6 +26,7 @@ export class VuexPersistence implements PersistOptions { public strictMode: boolean public supportCircular: boolean public mergeOption: MergeOptionType + public replaceState?: (store: Store,state: S) => void /** * The plugin function that can be used inside a vuex store. @@ -111,6 +112,8 @@ export class VuexPersistence implements PersistOptions { } } + this.replaceState = options.replaceState + this.asyncStorage = options.asyncStorage || false if (this.asyncStorage) { @@ -177,9 +180,12 @@ export class VuexPersistence implements PersistOptions { */ (store as any).restored = ((this.restoreState(this.key, this.storage)) as Promise).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 implements PersistOptions { this.plugin = (store: Store) => { 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)