vue3项目之持久化存储

最新推荐文章于 2024-10-03 05:28:31 发布

goto_w

最新推荐文章于 2024-10-03 05:28:31 发布

阅读量580

点赞数 1

分类专栏： vue ts 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_52696618/article/details/128896485

版权

vue 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

9 篇文章 0 订阅

订阅专栏

文章介绍了如何创建一个名为persistencePlugin的自定义Pinia插件，用于在浏览器的localStorage中实现应用状态的持久化存储。插件接受一个配置对象列表，包含要持久化的store名称和对应的状态键。在store订阅变更时，如果状态列表中的键发生变化，插件会将新的值存储到localStorage中。

摘要由CSDN通过智能技术生成

pinia插件的方式,实现持久化存储

创建插件: persistencePlugin.ts

import type { PiniaPluginContext } from 'pinia'

// 定义接口约束插件使用时需要传递的参数
interface PersistenceItem {
  name: string,
  stateList: string[]
}

const persistenceSet = (key: string, value: string) => {
  localStorage.setItem(key, value)
}

const persistenceGet = (key: string) => {
  return localStorage.getItem(key) ? localStorage.getItem(key) : ''
}

// 内层函数才是真正的插件,外层函数用于接收插件参数
export function persistencePlugin(persistenceList: PersistenceItem[]) {
  // 持久化插件
  return (context: PiniaPluginContext) => {
    persistenceList.forEach(item => {
      if (context.store.$id === item.name && item.stateList.length > 0) {
        // 从本地存储中恢复数据
        item.stateList.forEach(key => {
          // 本地存储中没有该值初始化为''
          context.store.$state[key] = persistenceGet(key)
        })
        // 符合条件开启存储
        context.store.$subscribe((mutation) => {
          // 只有userid 发生变化才会触发userid的本地存储变化
          if (item.stateList.includes((<any>mutation.events).key)) {
            const value = (<any>mutation.events).newValue
            const valueType = typeof value
            persistenceSet((<any>mutation.events).key, valueType === 'string' ? value : JSON.stringify(value))
          }
        })
      }
    })
  }
}

main.ts 中使用插件

// ...
import { persistencePlugin } from './stores/plugins/persistencePlugin'

const app = createApp(App)
const pinia = createPinia()
pinia.use(persistencePlugin([{
  name: 'user',
  stateList: ['userid']
}]))

// ...