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}
* @param {blackList:Array}
* @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, whiteList is empty or not set to all cache, default is all cache, whiteList can be set to cache other keys do not cache
`
import { defineStore } from "pinia";
const useUser = defineStore("user", {
state: () => {
return {
userName: "zhangsan",
};
},
getters: {},
actions: {},
whiteList: ["userName"], // Only userName is cached
});

export default useUser;
``