English | 中文

pinia-persisted-state

说明

pinia状态的本地持久化。

安装

• pnpm导入

$ pnpm add @matiastang/pinia-persisted-state

• yarn导入

$ yarn add @matiastang/pinia-persisted-state

• npm

$ npm install @matiastang/pinia-persisted-state

配置

• 在main.ts中如下便捷导入@matiastang/pinia-persisted-state：

// pinia状态管理
import { createPinia } from 'pinia'
import { createPersistedState, persistedConfig } from '@matiastang/pinia-persisted-state'

const app = createApp(App)

// pinia
const pinia = createPinia()

// 便捷使用
pinia.use(createPersistedState)
// 查看默认配置
console.log(persistedConfig)

app.use(pinia)

• 在main.ts中如下带配置导入@matiastang/pinia-persisted-state：

// pinia状态管理
import { createPinia } from 'pinia'
import { createPersistedState, persistedConfig } from '@matiastang/pinia-persisted-state'

const app = createApp(App)

// pinia
const pinia = createPinia()

// 带配置使用
pinia.use(
    createPersistedState({
        key: 'pinia-key',
    })
)
// 查看配置
console.log(persistedConfig)

app.use(pinia)

• persistedConfig为@matiastang/pinia-persisted-state的配置。
• persistedConfig.key是本地持久化key，默认值是pinia-key。
• persistedConfig.customKey是custom properties本地持久化key，默认值是pinia-custom-key。
• persistedConfig.customFilterKey是判定 store 成员是否缓存为custom properties的过滤函数，默认排除$、_、set前缀的属性。

使用

完成引入后，则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熟悉。因此可以自己写一个插件放到@matiastang/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 '@matiastang/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"}
}

有点儿说多了，只需要知道@matiastang/pinia-persisted-state将持久化存储pinia中的数据就行。

测试

$ pnpm run typecheck        # 类型检查
$ pnpm test                 # 单元/集成测试
$ pnpm run test:coverage    # 覆盖率报告
$ pnpm run test:e2e         # 端到端测试（自动启动演示工程）

详细说明见 specs/001-test-suite/quickstart.md。

版本

版本更新记录见 CHANGELOG.md。

许可证

MIT © matiastang