016基于pinia完成Vue3的前端数据持久化储存storage的方案落地

• 支持自定义前缀
• 支持localStorage和sessionStorage
• 支持自定义某一些key进入缓存模式
• 采用中间件方式引入，不渗入代码层

数据缓存的读写

// 储存pinia的值
function setStorage(
  key: string,
  val: any,
  storageType: Storage = localStorage
) {
  storageType.setItem(key, JSON.stringify(val));
}
// 从缓存中获取pinia的值
function getStorage(key: string, storageType: Storage = localStorage) {
  const val = storageType.getItem(key);
  return val ? JSON.parse(val as string) : null;
}

读写缓存信息并更新状态管理

// 依据配置项综合处理缓存的读写
function doStorage(
  key: string,
  store: any,
  storageType: Storage = localStorage
) {
  const storageResult = getStorage(key, storageType);
  if (storageResult) {
    store.$patch(storageResult);
    setStorage(key, store, storageType);
    console.log(666.7007, '读取啦', key, store.$state);
  }
  store.$subscribe(() => {
    setStorage(key, store, storageType);
    console.log(666.7002, '更新啦', key, store.$state);
  });
}

封装一个中间件

// 处理pinia缓存需要的中间件
function useStorage(options: IStorageOption) {
  return (ctx: PiniaPluginContext) => {
    const { store } = ctx;
    const sid = store.$id;
    const key: string = options.key + sid;
    if (options.keeps.locals.includes(sid)) {
      doStorage(key, store, sessionStorage);
    } else if (options.keeps.sessions.includes(sid)) {
      doStorage(key, store, localStorage);
    }
  };
}

使用中间件并导出

pinia.use(useStorage(storageOption));

export default pinia;

在main.ts的入口文件引入

import pinia from './stores';

const app = createApp(App);
app.use(pinia);

完整的示例代码web-client\ui\src\stores\index.ts

import { createPinia, type PiniaPluginContext } from 'pinia'; // 引入pinia
const pinia = createPinia(); // 创建

// 定义缓存管理用的配置数据类型
interface IStorageOption {
  key: string;
  keeps: {
    sessions: string[];
    locals: string[];
  };
}
// 缓存配置数据
const storageOption: IStorageOption = {
  key: '__pinia__', //缓存名key的前置字符串
  keeps: {
    sessions: [], // 采用seesionStorage缓存的key
    locals: ['model'], // 采用localStorage缓存的key
  },
};
// 储存pinia的值
function setStorage(
  key: string,
  val: any,
  storageType: Storage = localStorage
) {
  storageType.setItem(key, JSON.stringify(val));
}
// 从缓存中获取pinia的值
function getStorage(key: string, storageType: Storage = localStorage) {
  const val = storageType.getItem(key);
  return val ? JSON.parse(val as string) : null;
}
// 依据配置项综合处理缓存的读写
function doStorage(
  key: string,
  store: any,
  storageType: Storage = localStorage
) {
  const storageResult = getStorage(key, storageType);
  if (storageResult) {
    store.$patch(storageResult);
    setStorage(key, store, storageType);
    console.log(666.7007, '读取啦', key, store.$state);
  }
  store.$subscribe(() => {
    setStorage(key, store, storageType);
    console.log(666.7002, '更新啦', key, store.$state);
  });
}
// 处理pinia缓存需要的中间件
function useStorage(options: IStorageOption) {
  return (ctx: PiniaPluginContext) => {
    const { store } = ctx;
    const sid = store.$id;
    const key: string = options.key + sid;
    if (options.keeps.locals.includes(sid)) {
      doStorage(key, store, sessionStorage);
    } else if (options.keeps.sessions.includes(sid)) {
      doStorage(key, store, localStorage);
    }
  };
}

pinia.use(useStorage(storageOption));

export default pinia;