vue-persistedstate

explain

This plug-in is useful for state management because it is impossible to predict how a user will cache, exposing three methods: Storage createVuexPersistedState createPiniaPersistedState

Installation

Package Manager

# npm
npm i vue-persistedstate

# yarn
yarn add vue-persistedstate

Storage example

/**
 * @name: s
 * @param {key:string}
 * @return {value:any}
 * @return {expires:number}
 */
import { Storage } from "vue-persistedstate"

let s = new Storage({source:window.sessionStorage}) //The default value is the window. The localStorage
s.set("userInfo",{uName:"zhangsan",upwd:"123456"},5000)
setInterval(()=>{
console.log(s.get('uName'))  // Undefined is displayed after 5s
},1000)

Vuex example

The createVuexPersistedState method has four parameters

1. Key The default cache key is VUex
2. Storage how caching (window. SessionStorage | | window. The localStorage) default window. The localStorage
3. WhiteList Attributes are cached
4. BlackList Indicates that blackList attributes are not cached

import { createVuexPersistedState } from "vue-persistedstate";

/**
 * @name: createVuexPersistedState
 * @param {key:string}
 * @param {storage}
 * @param {whiteList:Array<string>}
 * @param {blackList:Array<string>}
 * @return {storage}
 */

export default new Vuex.Store({
  plugins: [
    createVuexPersistedState({
      key:'vuex',
      storage:window.localStorage,
      whiteList:[],
      blackList: [],
    }),
  ],
  modules: {},
  state: {},
  mutations: {},
  actions: {},
  modules: {},
});

Pinia example

store.js

import { createPinia } from "pinia";

import { createPiniaPersistedState } from "vue-persistedstate";

const store = createPinia();

store.use(createPiniaPersistedState());
//or
store.use(createPiniaPersistedState({
    key:'You want the cache key',  // Default is pinia- your Module ID
    storage:'The way you want to cache' // The default value is the window. The localStorage
}));

export default store;

modules->moduleJS example

Set whiteList in the module: Array

import { defineStore } from "pinia";
const useUser = defineStore("user", {
  state: () => {
    return {
      userName: "zhangsan",
    };
  },
  getters: {},
  actions: {},
  whiteList: ["userName"], // Only userName is cached
});

export default useUser;