Vue3 不同版本的Pinia如何做持久化存储

不同版本的pinia支持的存储插件不同，高/低版本的持久化存储插件整合如下，都是我实践过的，请放心使用。😊

一、Vue3.2，pinia <= 2.0.5，用pinia-plugin-persist

提示：不要去下最新的pinia-plugin-persistedstate，那是给vue3.3和pinia2.1以上版本使用的。

1、安装

npm i pinia-plugin-persist
或 yarn add pinia-plugin-persist

2.引入

//  store/index.tsimport piniaPluginPersist from "pinia-plugin-persist"; // 引入pinia.use(piniaPluginPersist);  // 使用持久化存储插件

3.需要存储的子store

在与actions同层级添加persist对象
storage: 有sessionStorage和localStorage，临时和长缓存，根据自身需求选择
paths:要存储当前store哪些数据，例如：我要存储用户登录信息loginForm，填入即可。

import { defineStore } from "pinia";
export const useUserStore = defineStore("User", {state: () => ({loginForm: {},}),getters: {},actions: {},persist: {// 开启持久化enabled: true,// 选择存储方式和内容strategies: [{ storage: localStorage, paths: ["loginForm"] }],},
});

插一句：由于我的项目是老的vue3.2和pinia2.0.5，如果项目全面升级为3.3，那需要改动的东西太多了，到时各种依赖的版本冲突就出来了，不好整，所以就保留当前版本，但我要用插件存储，找了很多方案都是vue3.3的，找了很久才找到匹配vue3.2的文章。因此做个笔记，方便以后查阅。其实用H5的localStorage.getItem/setItem也可以实现，只是那个设置和取值没这个方便，所以选了这个。
参考文章：https://www.cnblogs.com/yuwenjing0727/p/17163069.html

二、vue3.2/3.3，pinia >= 2.1.7 pinia-plugin-persistedstate

1、安装

pnpm add pinia-plugin-persistedstate@2.3.0 -S

2、pinia引入使用
store/index.ts

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'// 使用持久化存储插件
pinia.use(piniaPluginPersistedstate)

3、需要长缓存的store这样配置

store/modules/user.tsexport const useStore = defineStore({id: 'user',state: () => ({name: '很老很老的值',}),actions: {changeName(name: string) {this.name = name},},// 核心代码在这里 ↓//persist:true //存储整个对象// 选择性的长缓存persist: {storage: localStorage, //default localStorage//设置['name'] -->只会将name 这个key进行缓存paths: ['name'],},
})