vuex-persisted-states

在页面重新加载之间保持您的 vuex 状态

原理

借助缓存机制来存储 vuex 状态

安装(Install)

npm install vuex-persisted-states -D

yarn add vuex-persisted-states -D

使用(Usage)

基础用法

在 vuex 的 index 文件中引入

默认将所有的 state 存储到 window.localStorage

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

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

高阶参数配置(options)

• key

  key 缓存的标志，来修改或获取缓存的值

  默认缓存的 key 为 vuex

  // ...
  const store = new Vuex.Store({
      // ...
      plugins: [vuexPersistedStates({
          // 修改 key 为 storage
          key: "storage"
      })]
  })
  

• storage

  缓存的机制

  localStorage 、sessionStorage、js-cookie、cookie...

  // ...
  const store = new Vuex.Store({
      // ...
      plugins: [vuexPersistedStates({
          // 修改存储的位置
          storage: window.sessionStorage
      })]
  })
  

• paths

  缓存状态的集合

  // ...
  const store = new Vuex.Store({
      state: {
          a: 1,
          b: {
              c: 2,
              d: 3
          }
      },
      // ...
      plugins: [vuexPersistedStates({
          // 缓存 a 和 b.c 的状态
          paths:["a","b.c"]
      })]
  })
  

• spreadPaths

  paths 的集合默认是缓存到 storage中

  spreadPaths 可以将不同的状态属性缓存的位置不一样

  // ...
  const store = new Vuex.Store({
      state: {
          a: 1,
          b: {
              c: 2,
              d: 3
          }
      },
      // ...
      plugins: [vuexPersistedStates({
          // 缓存 a 到 window.sessionStorage
          // 缓存 b 到 window.localStorage
          spreadPaths:[{
              storage: window.sessionStorage,
              // 修改不同 storage 的 key
              key: "session",
              paths: ["a"]
          },{
              paths: ["b"]
          }]
      })]
  })
  

• resetMutationType

  触发还原 state 状态的 mutation 方法

  默认声明一个 resetStates方法的mutation方法

  // ...
  const store = new Vuex.Store({
    state: {
      a: 1,
      b: {
          c: 2,
          d: 3
      }
    },
    mutations:{
      resetStates(state, params){
        return;
      },
      // cleanStates(state, params){
      //   return;
      // }
    },
    // ...
    plugins: [vuexPersistedStates({
        // 修改重置 states 的 mutations 的方法
        // resetMutationType: "cleanStates"
    })]
  })
   
  // 在组件内调用
  // params 不传值则还原所有的state的状态
  // params = ["a"]  接受 string[] 来还原指定的 state 状态
  this.$store.commit("resetStates")
  // this.$store.commit("cleanStates")
  // this.$store.commit("resetStates",["a"])
  // this.$store.commit("cleanStates",["a"])
  

• filterMutation

  过滤那些 mutation 方法不需要进行缓存操作 ,减少不必要的代码运行

  // ...
  const store = new Vuex.Store({
      state: {
          a: 1,
          b: {
              c: 2,
              d: 3
          }
      },
      // ...
      plugins: [vuexPersistedStates({
          filterMutation: (mutation)=>{
            // 根据mutation type 过滤掉 cleanStates 方法
            if(mutation.type!=="resetStates"){
              return true;
            }
            return false;
          }
      })]
  })
  

• 对状态值存储做安全处理

  对值进行加密存储

  // ...
  import { Base64 } from "js-base64"
   
  const store =  new Vuex.Store({
    // ...
    plugins: [vuexPersistedState({
      setState(value) {
        // 存加密
        return Base64.encode(JSON.stringify(value))
      },
      getState(value) {
        // 取解密
        return JSON.parse(Base64.decode(value))
      }
    })]
  })
  

Attribute

属性	类型	默认值
key	string	vuex
storage	Storage	localStorage
paths	string[]	-
spreadPaths	Path[]	-
resetMutationType	string	resetStates
filterMutation	(mutation:Store)=>boolean	true
setState	(value:any)=>string	-
getState	(value:string)=>any	-

Path[]

属性	类型	默认值
storage?	Storage	localStorage
key?	string	vuex
paths	string[]	-

代码地址：

vuex-persisted-states

参考文献：

Vuex 插件开发文档
Vuex replacestate方法
Vuex subscribe
前人栽树 vuex-persistedstate