Pinia-Plugin-Storage
概述
在使用之前请确保你已经 安装 Pinia
- 支持单独配置
- 支持配置策略
- 内置方法
- 支持存储状态双向更新
安装
pnpm i pinia-plugin-storage
使用
import { createPinia } from "pinia"
import piniaPluginStorage from "pinia-plugin-storage"
const pinia = createPinia()
pinia.use(piniaPluginStorage)
const useUserStore = defineStore({
id: "user",
state: () => ({
token: 1,
userInfo: { name: "xxx" }
}),
storage: {
// 全局存储 key,默认 store 的 id
globalKey: 'GLOBAL-KEY',
// 配置是否启用,默认 false
enabled: true,
// 配置存储方式,默认 localStorage
storage: localStorage,
// 配置策略,默认存储全部
strategies: [
{
// 存储的 key
key: "TOKEN",
// 存储单个状态,数据类型为状态类型
paths: "token",
// 存储方式,优先级大于外层
storage: localStorage
},
{
key: "USER-INFO",
// 存储多个状态为一个对象,数组的每一项为对象的 key
paths: ["token", "userInfo"]
}
]
}
})
可以通过原生 localStorage.setItem
更新状态
localStorage.setItem("TOKEN", 2)
方法
方法名 | 说明 | 版本 |
---|---|---|
setItem |
设置状态 | >= 0.0.6 |
getItem |
获取状态 | >= 0.0.6 |
removeItem |
移除状态 | >= 0.0.6 |
clear |
清除状态 | >= 0.0.6 |
JSONParse |
JSON反序列化,支持 function 和 symbol | >= 0.0.8 |
JSONStringify |
JSON序列化,支持 function 和 symbol | >= 0.0.8 |
import { setItem, getItem } from 'pinia-plugin-storage'
interface User { name: string }
setItem<User>('USER-INFO', { name: 'yyy' })
const userInfo = getItem<User>('USER-INFO')
console.log(userInfo)
类型说明
clear(): void
removeItem(key: string, storage: Storage): void
getItem<V>(key: string, storage: Storage): V | null
setItem<V>(key: string, value: V, storage: Storage): void
JSONParse<V>(data: string): V
JSONStringify<T>(data: T): void