大菠萝 Pinia 持久化方案 Pinia Persist Own

在使用 Pinia 时，一直想找到一个可以持久化的插件，不过用了很多都不是很理想，所以抽空的时候，自己写了一个。

安装

# npm
npm i pinia-persist-own
# pnpm
pnpm add pinia-persist-own

使用

store.js

import { persist, createPersist } from 'pinia-persist-own'
import { createPinia } from 'pinia'

const pinia = createPinia()

// 这里传入的是公共参数，每个 store 均共享此参数
const createPersist = persist(/* 可进行传递通用参数 */)

/**
 * 如果不想进行统一设置参数的话，可以直接使用导出的 'createPersist' 
 * 每个 store 均可以进行单独进行配置，单独的配置要优先于公用配置
 */

// 添加持久化
pinia.use(createPersist)

app.use(pinia)

通用参数

 { 
	// 使用何种方式进行持久化, 默认: sessionStorage
	storage: window.sessionStorage
	// 持久化时，是否启用加密，需自行加密, 默认: false
	// 当 useCrypt 为 true 时，加密解密方法必传
	useCrypt: false,
	// 加密数据方法
	encrypt: (data /* 待加密数据 */) => {
		// 加密实现
	},
	decrypt: (secretData) => {
		// 解密实现
	}
}

私有参数

import { defineStore } from 'pinia' 

interface PersistProps{
	// 持久化名称
	name?: string;
	// 需要进行单独持久化的 keys => state 中的 key 集合
	keys?: keyof State[];
	// 持久化方式，localStorage 和 sessionStorage 
	// 或者自行实现，自行实现 Storage 时，注意要实现的方法
	storage?: Storage;
	// 是否使用加密进行存储
	useCrypt?: false;
	// 加密方法
	encrypt?: (data: string) => string;
	// 解密方法
	decrypt?: (secretData: string) => string;
}

const useStore = defineStore('default-store', {
	// 是否启用持久化，传入 true/[] 均可，表示使用公用参数进行持久化
	persist: boolean | PersistProps[]
	state,
	getters,
	actions
})

完整示例

// store/index.ts
import type { App } from 'vue';
import { createPinia } from 'pinia';
import { createPersist } from 'pinia-persist-own';

const store = createPinia();
store.use(createPersist);

// store/modules/app.ts
interface AppState {
  reloadFlag: boolean;
  userInfo: UserInfo;
  token: string;
  auth: string;
  role: string[];
}
export const useAppStore = defineStore('app-store', {
  persist: true,
  // or
  persist: [
	  {
		name: 'custom',
		storage: localStorage,
		keys: ['userInfo', 'token'],
		useCrypt: true,
		encrypt: code => fnEncrypt(code),
		decrypt: decode => fnDecrypt(decode)
	  },
	  {
		name: 'other',
		storage: Cookie,
		keys: ['auth', 'role']
	  }
  ],
  state: (): AppState => ({
    reloadFlag: true
  }),
  actions: {
    setReload(isReload: boolean) {
      this.reloadFlag = isReload;
    },
  }
});

PS:
在使用 pinia 的过程中，可能很多开发者经常会遇到一个错误，"getActivePinia()" was called but there was no active Pinia. Did you forget to install pinia?，很多博主给的方案都是在使用 store的时候传入 pinia ，以此来解决报错的问题。目前没有更好的办法来解决此问题，但是如果使用了此方式来避免报错的话，需要注意一下，就是使用store(pinia)方法的 store不能进行持久化了。