博客

趁着周末编写Vue有关的状态管理插件 ， 抛出三个方法

{ 
    Storage,
    createVuexPersistedState,
    createPiniaPersistedState 
} 

Storage 直接操作H5缓存特性 【window.sessionStorage,window.localStorage】

let s = new Storage({source:window.localStorage}) //默认为window.localStorage

s.get(key)

s.set(key,value,expires=undefined) // expires 缓存的时间 单位为毫秒 

createVuexPersistedState 配合Vuex 进行状态管理

createVuexPersistedState({

    key:'vuex', // 默认key为'vuex'

    storage:window.localStorage,//默认为 window.localStorage

    whiteList:[], // 白名单 配置缓存的key  通常配置whiteList

    blackList: [], // 黑名单 配置不缓存的key

}) 

createPiniaPersistedState 配合新版状态管理 Pinia

store.js

store.use(createPiniaPersistedState()); 

//or 

store.use(createPiniaPersistedState({ 
    key:'You want the cache key', // 默认为‘pinia-’ + 你的模块ID
    storage:'The way you want to cache' // 缓存方式window.sessionStorage || window.localStorage  默认window.localStorage
})); 

模块js

import { defineStore } from "pinia"; 
const useUser = defineStore("user", { 
    state: () => { 
        return { userName: "zhangsan", 
    }; },
    getters: {}, 
    actions: {}, 
    whiteList: ["userName"], // 白名单 需要缓存的key  默认为全部参与缓存 
}); 
export default useUser; 

以下为三个方法具体使用示例

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, 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;