Matias-pinia-persisted-state NPM

matias-pinia-persisted-state

说明

pinia状态的本地持久化。

安装与使用

安装matias-pinia-persisted-state

pnpm导入
$ pnpm add -D matias-pinia-persisted-state
yarn导入
$ yarn add -D matias-pinia-persisted-state
npm导入
$ 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中的数据就行。