pinia-plugin-persistedstate 丰富的功能可以使 Pinia Store 的持久化更易配置：
- 与
vuex-persistedstate相似的 API - 所有 Store 均可单独配置
- 自定义 storage 和数据序列化
- 恢复持久化数据前后的 hook
- 每个 Store 具有丰富的配置
- 兼容 Vue 2 和 3
- 无任何外部依赖
安装
使用你喜欢的js包管理器安装，比如npm
npm i pinia-plugin-persistedstate
将插件添加到 pinia 实例上（编辑main.js）
import { createPinia } from 'pinia'
// 导包
**import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'**
const pinia = createPinia()
// 初始化
**pinia.use(piniaPluginPersistedstate)**
使用方法
在创建store仓库时，添加store的选项（组合式api定义store）
import { defineStore } from 'pinia'
// 在定义store的时候提供第三个options参数对象。
export const useStore = defineStore(
'main',
() => {
const someState = ref('你好 pinia')
return { someState }
},
** {
persist: true,
}**
)
选项式：
import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
state: () => {
return {
someState: '你好 pinia',
}
},
persist: true,
})
现在，你的整个 Store 将使用默认持久化配置保存。
默认持久化保存配置如下:
- 使用
localStorage进行存储 store.$id作为 storage 默认的 key- 使用
JSON.stringify/JSON.parse进行序列化/反序列化 - 整个 state 默认将被持久化
自定义
如何你不想使用默认持久化保存配置，将一个对象传递给 Store 的 persist 属性来配置持久化。
import { defineStore } from 'pinia'
// 在定义store的时候提供第三个options参数对象。
export const useStore = defineStore(
'main',
() => {
const someState = ref('你好 pinia')
return { someState }
},
{
// persist: true， 改成给定一个对象配置，即可自定义。
persist: {
// 在这里自定义配置
},
}
)
常用自定义配置项：
key: 指定storeage中存储的key名，默认为store的key-id。有时候太简单容易和别的冲突，所以一般可以自定义key名。
**paths: ** 指定state中那些数据需要被持久化存储。默认是持久化所有state中的数据。
实例：
persist: {
// 将存储的key名改成mychannel
key: 'mychannel',
// 只是将channelList持久化存储
paths: ['channelList']
}
效果：
