vuex-persisted-states

Keep your VUex state between page reloads

The principle of

The vuEX state is stored using a caching mechanism

Installation (Install)

npm install vuex-persisted-states -D

yarn add vuex-persisted-states -D

Copy the code

Use (Usage)

Basic usage

In vuex’s index file

By default, all state is stored to window.localstorage

import Vuex from "vuex";
import vuexPersistedStates from "vuex-persisted-states";

const store = new Vuex.Store({
    // ...
    plugins: [vuexPersistedStates()]
})
Copy the code

Advanced Parameter Configuration (Options)

• key

  Key The flag of the cache to modify or retrieve the cached value

  The default cache key is vuex

  // ...
  const store = new Vuex.Store({
      // ...
      plugins: [vuexPersistedStates({
          // Change the key to storage
          key: "storage"})]})Copy the code

• storage

  Caching mechanism

  LocalStorage, sessionStorage, js-cookie, cookie…

  // ...
  const store = new Vuex.Store({
      // ...
      plugins: [vuexPersistedStates({
          // Change the location of the storage
          storage: window.sessionStorage
      })]
  })
  Copy the code

• paths

  A collection of cache states

  // ...
  const store = new Vuex.Store({
      state: {
          a: 1.b: {
              c: 2.d: 3}},// ...
      plugins: [vuexPersistedStates({
          // Cache the status of a and B.C
          paths: ["a"."b.c"]]}}))Copy the code

• spreadPaths

  The set of Paths is cached in storage by default

  SpreadPaths can cache different state properties in different locations

  // ...
  const store = new Vuex.Store({
      state: {
          a: 1.b: {
              c: 2.d: 3}},// ...
      plugins: [vuexPersistedStates({
          // Cache a to window.sessionStorage
          // Cache B to window.localstorage
          spreadPaths: [{storage: window.sessionStorage,
              // Change the key of different storage
              key: "session".paths: ["a"] {},paths: ["b"]}]})]})Copy the code

• resetMutationType

  Triggers the mutation method that restores the state

  The mutation method of a resetStates method is declared by default

  // ...
  const store = new Vuex.Store({
    state: {
      a: 1.b: {
          c: 2.d: 3}},mutations: {resetStates(state, params){
        return;
      },
      // cleanStates(state, params){
      // return;
      // }
    },
    // ...
    plugins: [vuexPersistedStates({
        // Modify the method for resetting states mutations
        // resetMutationType: "cleanStates"})]})// call within the component
  // Params restores all state without passing a value
  // params = ["a"] accepts string[] to restore the specified state
  this.$store.commit("resetStates")
  // this.$store.commit("cleanStates")
  // this.$store.commit("resetStates",["a"])
  // this.$store.commit("cleanStates",["a"])
  Copy the code

• filterMutation

  Filtering those mutation methods does not require caching operations, reducing unnecessary code runs

  // ...
  const store = new Vuex.Store({
      state: {
          a: 1.b: {
              c: 2.d: 3}},// ...
      plugins: [vuexPersistedStates({
          filterMutation: (mutation) = >{
            // Filter out the cleanStates method based on mutation type
            if(mutation.type! = ="resetStates") {return true;
            }
            return false; }})]})Copy the code

• Do security for the state value store

  Encrypt the value for storage

  // ...
  import { Base64 } from "js-base64"
   
  const store =  new Vuex.Store({
    // ...
    plugins: [vuexPersistedState({
      setState(value) {
        / / save the encryption
        return Base64.encode(JSON.stringify(value))
      },
      getState(value) {
        / / decryption
        return JSON.parse(Base64.decode(value))
      }
    })]
  })
  Copy the code

Attribute

Path[]

Code Address:

vuex-persisted-states

References:

Vuex replacestate Vuex SUBSCRIBE Vuex-PersistedState