matias-pinia-persisted-state

说明

pinia状态的本地持久化。

安装与使用

1. 安装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

2. 引用

• 在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。

3. 使用

完成引入后，则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中的数据就行。

版本

0.2.0

• web storage存储使用matias-storage库
• 添加custom properties的缓存
• 移除state中必须包含stateName属性的限制，使用store id来保存对应的store
• 更新丰富配置项

0.1.8

• fix

1. store.$subscribe添加detached:true。

0.1.7

1. state没有stateName属性添加提示。

0.1.6

• 开启代码压缩

0.1.5

• 目录结构调整

0.1.4

• 更新类型文件导出

0.1.3

• 更新package.json的导出目录

0.1.2

• 更新目录结构及名称

0.1.1

• 添加类型声明文件

0.1.0

• 实现基本的本地持久化功能