pinia数据持久化插件

前言

前段时间用vue3、vite4、pinia、ts做一个后台系统，在状态管理方面需要实现持久化，防止刷新丢数据，一开始在网上找，找了几个插件，发现要么不支持加密，需要另外安装加密插件，要么就是不能更改缓存方式，例如只能用localStorage，就这些问题我就萌生了自己写一个插件的想法。

开始

首先我们知道利用use方法可以把整个状态传到自定义个方法里面，例如下面这段代码。

import { createPinia } from "pinia"
// 1 引入数据持久化插件
import stateForever from "stateForever"
const store = createPinia()
// 2 pinia使用数据持久化插件
store.use(stateForever)
export default store

use我们这个方法之后会把整个状态传给我们自定义的方法里面，接下来写一个方法接受这个参数

const stateForever = (stateOptions) => {
  const { options, store } = stateOptions
  const { persist } = options
}
export default stateForever

其中persist是后面我们需要用到的配置在pinia里面的对象。

这样在stateForever这个方法里面就能拿到了整个状态内容，加密方式使用base64方式，有兴趣的道友可以看一下源码，写的不好的地方，请大佬指正一下。

下面是插件介绍

本插件主要使用了pinia的发布订阅功能，加载的时候读取缓存中的数据写入到pinia里面，当状态发生变化时在存到缓存里面，因此完成了状态数据实时缓存，再说一下加密，本插件使用了base64加密方式encrypt设置为true时, 将对数据进行加密缓存。

使用方法：在状态中state同级别下设置persist对象，该对象可设置四个属性，分别是key——自定义存储id，默认为当前状态id，即store.$id，storage——缓存方式， 默认以sessionStorage方式持久化，encrypt—— 是否加密，默认不加密，paths——设置state中的状态持久化，不设置或者设置为true则持久化当前全部状态。

概要

一个轻量级的可加密的pinia持久化插件

A lightweight and encrypted pinia persistence plug-in

使用

安装

js版本

npm install stateforever --save

or

pnpm install stateforever --save

ts版本

npm install stateforever-ts --save

or

pnpm install stateforever-ts --save

使用

import { createPinia, defineStore } from "pinia"
import stateforever from 'stateforever'
const store = createPinia()
store.use(stateforever)

export const useUserStore = defineStore("user", {
  state: () => {
    return {
      a: '',
      b: '',
      c: ''
    }
  },
  persist: {
    key: "userStore", // 自定义存储id，默认为当前状态id，即store.$id
    storage: sessionStorage, // 默认以sessionStorage方式持久化
    encrypt: true, // 是否加密，默认不加密
    paths: ["a", "b"] // 设置持久化状态，不设置或者设置为true则持久化当前全部状态
  }
})