pinia 状态持久化
matias-pinia-persisted-state是一个队pinia的状态进行本地持久化的库。在我的多个项目中使用。
安装与使用
安装
pnpm导入
$ pnpm add -D matias-pinia-persisted-stateyarn导入
$ yarn add -D matias-pinia-persisted-statenpm导入
$ npm install -D matias-pinia-persisted-state使用
在main.ts中如下便捷导入matias-pinia-persisted-state：
// pinia状态管理
import { createPinia } from 'pinia'
import { createPersistedState, persistedConfig } from 'matias-pinia-persisted-state'
const app = createApp(App)
// pinia
const pinia = createPinia()
// 便捷使用
pinia.use(createPersistedState)
// 查看默认配置
console.log(persistedConfig)
app.use(pinia)在main.ts中如下带配置导入matias-pinia-persisted-state：
// pinia状态管理
import { createPinia } from 'pinia'
import { createPersistedState, persistedConfig } from 'matias-pinia-persisted-state'
const app = createApp(App)
// pinia
const pinia = createPinia()
// 带配置使用
pinia.use(
createPersistedState({
key: 'pinia-key',
})
)
// 查看配置
console.log(persistedConfig)
app.use(pinia)persistedConfig为matias-pinia-persisted-state的配置。persistedConfig.key是本地持久化key，默认值是pinia-key。persistedConfig.customKey是custom properties本地持久化key，默认值是pinia-custom-key。
完成引入后，则pinia的所有状态及更新都将保存到storage中。
注意 custom properties和state properties在赋值的时候才会同步到storage
示例
声明authUser Store，带有初始化值。
import { defineStore } from 'pinia'
interface State {
name: string
age: string
}
export const useAuthUserStore = defineStore('user', {
state: (): State => ({
name: 'name',
age: 'age',
}),
actions: {
setName(name: string) {
this.name = name
},
},
})声明custom properties
import 'pinia'
import { Ref } from 'vue'
declare module 'pinia' {
export interface PiniaCustomProperties {
// by using a setter we can allow both strings and refs
set userId(value: string | Ref<string>)
get userId(): string
// you can define simpler values too
simpleNumber: number
}
}声明state properties
import 'pinia'
import { Ref } from 'vue'
declare module 'pinia' {
export interface PiniaCustomStateProperties<S> {
set hello(value: string | Ref<string>)
get hello(): string
}
}使用并查看状态
import { useAuthUserStore } from '@/pinia/useAuthUserStore'
import { useTestStore } from '@/pinia/useTest'
const userStore = useAuthUserStore()
const testStore = useTestStore()
// 输出
console.log(
userStore.simpleNumber,
userStore.userId,
userStore.$state.hello,
testStore.simpleNumber,
testStore.userId,
testStore.$state.hello
)查看storage中保存的pinia-key数据如果配置了key则是对应的数据
{
test: {data: "data"}
user: {name: "name", age: "age"}
}说明custom properties和state properties中只是申明。所有需要赋值之后才能看到数据。
userStore.userId = '001'
userStore.simpleNumber = 99
userStore.$state.hello = 'hello user'
testStore.userId = '002'
testStore.simpleNumber = 100
testStore.$state.hello = 'hello test'{
pinia-custom-key: {userId: "001", simpleNumber: 99}
test: {data: "data", hello: "hello test"}
user: {name: "name", age: "age", hello: "hello user"}
}- 可以看到
userId和simpleNumber这种custom properties使用userStore和testStore更新都是一样的，可以理解为pinia的全局变量。而hello这种共有state properties需要每个store自己控制。使用context.store.$state.hello可以修改所有store的hello熟悉。因此可以自己写一个插件放到matias-pinia-persisted-state该插件之后，全量初始或更新state properties中的数据。
const userID = ref('000001')
const hello = ref('hello pinia')
// 自定义基础插件，更新状态
export function myPiniaPlugin(context: PiniaPluginContext) {
// 当然插件里面也可以处理custom properties
context.store.userId = userID
// 赋值
context.store.$state.hello = hello
}// pinia状态管理
import { createPinia } from 'pinia'
import { myPiniaPlugin } from '@/pinia/plugin'
import { createPersistedState, persistedConfig } from 'matias-pinia-persisted-state'
const app = createApp(App)
// pinia
const pinia = createPinia()
// 便捷使用
pinia.use(createPersistedState)
// 查看默认配置
console.log(persistedConfig)
// 有状态更新的插件
pinia.use(myPiniaPlugin)
app.use(pinia)storage中的数据将更新。
{
pinia-custom-key: {userId: "002", simpleNumber: 99}
test: {data: "data", hello: "hello pinia"}
user: {name: "name", age: "age", hello: "hello pinia"}
}有点儿说多了，只需要知道matias-pinia-persisted-state将持久化存储pinia中的数据就行。