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.ts
 import 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.ts

export 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'],
	},
})

参考文章： https://download.csdn.net/blog/column/12471199/133916576