pinia数据持久化插件pinia-plugin-persistedstate的基础使用+vue3组合式，有手就会系列。

 🔮 欢迎点赞 👍٩( ´︶` )( ´︶` )۶ 收藏 🌟留言 💌 欢迎讨论！💕
🔮 本文由 【第四人称Alice】 原创，首发于 优快云 ✨✨✨
🌍 由于博主还属于前期的前端开发小白，欢迎大家留言提出更好的意见，大家共同进步！💭

首先附上官网地址，:快速开始 | pinia-plugin-persistedstate，有疑惑的宝子可以去看官网哦~

说明一下，博主使用的是v3.2.0版本，技术栈为vue3+ts，看了很多博主的持久化用法都不是自己想要的，最后自己扒官网写了最新的用法，废话不多说，马上开始。

一、安装

1、 安装pinia-plugin-persistedstate依赖🐋

npm i pinia-plugin-persistedstate

pnpm i pinia-plugin-persistedstate

yarn add pinia-plugin-persistedstate

2、安装压缩加密依赖🐋

 npm i zipson -S

 主要为了避免存储的数据量过大，导致数据结构被破坏以及数据被丢失问题。

二、配置

1、 main.ts文件🐋

import { createPinia } from "pinia";
import piniaPluginPersist from "pinia-plugin-persistedstate";

let app = createApp(App);
const pinia = createPinia();
app.use(pinia.use(piniaPluginPersist)).mount("#app");

 2、 store.ts文件🐋

①state中的全部数据持久化

写法一：

import { defineStore } from "pinia";
import { parse, stringify } from "zipson";
export const useStore = defineStore({
  id: "main",
  state: (): { token?: any; searchWord?: any; loginInfo?: any } => ({
    token: window.localStorage.getItem(import.meta.env.BASE_URL + "token") || "",
    searchWord: "",
    loginInfo: {},
  }),
  actions: {
    setToken(token: string) {
      this.token = token;
      window.localStorage.setItem(import.meta.env.BASE_URL + "token", token);
    },
    setLoginInfo(loginInfo: object) {
      this.loginInfo = loginInfo;
    },
    setSearchWord(word: any): void {
      this.searchWord = word;
    },
  },
 // 默认存储到本地，存储内容为state中的全部数据
  persist: true,

});

写法二：

export const useStore = defineStore("main", {
  state: (): { token?: any; searchWord?: any; loginInfo?: any } => {
    return {
      token: window.localStorage.getItem(import.meta.env.BASE_URL + "token") || "",
      searchWord: "",
      loginInfo: {},
    };
  },
  actions: {
    setToken(token: string) {
      this.token = token;
      window.localStorage.setItem(import.meta.env.BASE_URL + "token", token);
    },
    setLoginInfo(loginInfo: object) {
      this.loginInfo = loginInfo;
    },
    setSearchWord(word: any): void {
      this.searchWord = word;
    },
  },
  // 默认存储到本地，存储内容为state中的全部数据
  persist: true,
});

②单个持久化配置，缓存state中的单个数据

   persist: {
     key: "role",
     storage: sessionStorage,
     paths: ["loginInfo"],
     serializer: {
       deserialize: parse,
       serialize: stringify,
     },
   },

③单个持久化配置，缓存state中的多个数据

   persist: {
     key: "role",
     storage: sessionStorage,
     paths: ["loginInfo","token"],
     serializer: {
       deserialize: parse,
       serialize: stringify,
     },
   },

④多个持久化配置

  persist: [
    {
      key: "role",
      storage: sessionStorage,
      paths: ["loginInfo"],
      serializer: {
        deserialize: parse,
        serialize: stringify,
      },
    },
    {
      key: "message",
      storage: localStorage,
      paths: ["token", "searchWord"],
      serializer: {
        deserialize: parse,
        serialize: stringify,
      },
    },
  ],

3、配置项:🐋

官网：配置 | pinia-plugin-persistedstate

配置项	类型	默认值	参数解释
key	string	store.$id	密钥名称
storage	StorageLike	localStorage	存储方式
paths	string['','',...]	undefined	被存储数据
serializer	Serializer	JSON.stringfy/JSON.parse	用于将数据进行反序列化和序列化
beforeRestore	(context:PiniaPluginContext) => void	undefined	该 hook 将在从 storage 中恢复数据之前触发
aftreRestore	(context:PiniaPluginContext) => void	undefined	该 hook 将在从 storage 中恢复数据之后触发
debug	boolean	false	输出错误

4、pinia-plugin-persistedstate插件的局限性🔕

①引用不会被持久化

②基本类型之外的将不会被持久化

③存储必须是同步的

目前解决办法参考官网：局限性 | pinia-plugin-persistedstate

后续博主在实际开发中使用到或者有空时继续填坑，感谢补充。