• Version 3.1.3
  • Published
  • 224 kB
  • 2 dependencies
  • MIT license


npm i vuex-persist
yarn add vuex-persist
pnpm add vuex-persist


A Vuex persistence plugin in Typescript



variable MockStorage

let MockStorage: { new (): Storage; prototype: Storage };
  • Created by championswimmer on 22/07/17.


class VuexPersistence

class VuexPersistence<S> implements PersistOptions<S> {}
  • A class that implements the vuex persistence. S type of the 'state' inside the store (default: any)


constructor(options?: PersistOptions<S>);
  • Create a VuexPersistence object. Use the plugin function of this class as a Vuex plugin.

    Parameter options

property asyncStorage

asyncStorage: boolean;

    property filter

    filter: (mutation: Payload) => boolean;

      property key

      key: string;

        property mergeOption

        mergeOption: MergeOptionType;

          property modules

          modules: string[];

            property plugin

            plugin: Plugin<S>;
            • The plugin function that can be used inside a vuex store.

            property reducer

            reducer: (state: S) => Partial<S>;

              property RESTORE_MUTATION

              RESTORE_MUTATION: Mutation<S>;
              • A mutation that can be used to restore state Helpful if we are running in strict mode

              property restoreState

              restoreState: (key: string, storage?: AsyncStorage | Storage) => Promise<S> | S;

                property saveState

                saveState: (
                key: string,
                state: {},
                storage?: AsyncStorage | Storage
                ) => Promise<void> | void;

                  property storage

                  storage: Storage | AsyncStorage;

                    property strictMode

                    strictMode: boolean;

                      property subscribed

                      subscribed: boolean;

                        property supportCircular

                        supportCircular: boolean;


                          interface AsyncStorage

                          interface AsyncStorage {}

                            method clear

                            clear: () => Promise<void>;

                              method getItem

                              getItem: <T>(key: string) => Promise<T>;

                                method key

                                key: (keyIndex: number) => Promise<string>;

                                  method length

                                  length: () => Promise<number>;

                                    method removeItem

                                    removeItem: (key: string) => Promise<void>;

                                      method setItem

                                      setItem: <T>(key: string, data: T) => Promise<T>;

                                        interface PersistOptions

                                        interface PersistOptions<S> {}

                                          property asyncStorage

                                          asyncStorage?: boolean;
                                          • If your storage is async i.e., if setItem(), getItem() etc return Promises (Must be used for asynchronous storages like LocalForage) false

                                          property filter

                                          filter?: (mutation: Payload) => boolean;
                                          • Method to filter which mutations will trigger state saving Be default returns true for all mutations. Check mutations using mutation.type

                                            Parameter mutation

                                            object of type Payload

                                          property key

                                          key?: string;
                                          • Key to use to save the state into the storage

                                          property mergeOption

                                          mergeOption?: MergeOptionType;
                                          • Whether to replace or concat arrays when merging saved state with restored state defaults to replacing arrays

                                          property modules

                                          modules?: string[];
                                          • Names of modules that you want to persist. If you create your custom PersistOptions.reducer function, then that will override filter behaviour, not this argument

                                          property reducer

                                          reducer?: (state: S) => {};
                                          • Function to reduce state to the object you want to save. Be default, we save the entire state. You can use this if you want to save only a portion of it.

                                            Parameter state

                                          property restoreState

                                          restoreState?: (key: string, storage?: Storage) => Promise<S> | S;
                                          • Method to retrieve state from persistence

                                            Parameter key

                                            Parameter storage

                                          property saveState

                                          saveState?: (key: string, state: {}, storage?: Storage) => Promise<void> | void;
                                          • Method to save state into persistence

                                            Parameter key

                                            Parameter state

                                            Parameter storage

                                          property storage

                                          storage?: Storage | AsyncStorage;
                                          • Window.Storage type object. Default is localStorage

                                          property strictMode

                                          strictMode?: boolean;
                                          • Set this to true to support Vuex Strict Mode false

                                          property supportCircular

                                          supportCircular?: boolean;
                                          • Support serializing circular json objects let x = {a: 10} x.b = x console.log(x.a) // 10 console.log(x.b.a) // 10 console.log(x.b.b.a) // 10 false

                                          Package Files (4)

                                          Dependencies (2)

                                          Dev Dependencies (19)

                                          Peer Dependencies (1)


                                          To add a badge like this badgeto your package's README, use the codes available below.

                                          You may also use to create a custom badge linking to

                                          • Markdown
                                          • HTML
                                            <a href=""><img src="" alt=""></a>