【pinia持久化存储】使用pinia和pinia-plugin-persistedstate依赖进行数据的持久化存储

这篇具有很好参考价值的文章主要介绍了【pinia持久化存储】使用pinia和pinia-plugin-persistedstate依赖进行数据的持久化存储。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

简言

使用pinia和pinia-plugin-persistedstate依赖进行数据的持久化存储。
存储方式 :

  • localStorage
  • sessionStorage

pinia-plugin-persistedstate 中文官网

pinia 中文官网

安装

安装和使用 pinia ,请参考使用pinia文章。

安装 pinia-plugin-persistedstate :

npm i pinia-plugin-persistedstate
# 或
pnpm i pinia-plugin-persistedstate
# 或
yarn add pinia-plugin-persistedstate

使用pinia-plugin-persistedstate持久化存储

挂载

使用前先将 pinia-plugin-persistedstate添加到pinia实例上。

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

在添加的时候,可以添加参数修改pinia-plugin-persistedstate的 默认配置,例如:

pinia.use(piniaPluginPersistedstate({
	auto:true,	//	该配置将会使所有 Store 持久化存储,且必须配置 persist: false 显式禁用持久化。
    storage: sessionStorage,	//	默认持久化存储方式 修改为 sessionStorage
  })

上面的修改的默认配置是 开启所有的store持久化存储,且默认存储方式是sessionStorage

store上使用

创建 Store 时,将 persistent 选项设置为 true。

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      someState: '你好 pinia',
    }
  },
  persist: true,
})

或者

import { defineStore } from 'pinia'

export const useStore = defineStore(
  'main',
  () => {
    const someState = ref('你好 pinia')
    return { someState }
  },
  {
    persist: true,
  }
)

上面的store内所有的数据都会开启持久化存储,使用默认配置。

默认配置

  • 使用 localStorage 进行存储
  • store.$id 作为 storage 默认的 key
  • 使用 JSON.stringify/JSON.parse 进行序列化/反序列化
  • 整个 state 默认将被持久化

个性化配置

persist可以是一个对象。

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => ({
    someState: '你好 pinia',
  }),
  persist: {
    // 在这里进行自定义配置
  },
})

persist对象可以配置以下属性:

  • key
    类型:string
    默认值:store.$id
    Key 用于引用 storage 中的数据
  • storage
    类型:StorageLike
    默认值:localStorage
    将数据持久化到的 storage 中,必须具有 getItem: (key: string) => string | null 和 setItem: (key: string, value: string) => void 两个方法
  • paths
    类型:string[]
    默认值:undefined
    用于指定 state 中哪些数据需要被持久化。[] 表示不持久化任何状态,undefined 或 null 表示持久化整个 state
  • serializer
    类型:Serializer
    默认值:JSON.stringify/JSON.parse
    该配置能够指定持久化时所使用的序列化方法,以及恢复 Store 时的反序列化方法。另外,必须具有 serialize: (value: StateTree) => string 和 deserialize: (value: string) => StateTree 方法。
  • beforeRestore
    类型:(context: PiniaPluginContext) => void
    默认值:undefined
    该 hook 将在从 storage 中恢复数据之前触发,并且它可以访问整个 PiniaPluginContext,这可用于在恢复数据之前强制地执行特定的操作。
  • afterRestore
    类型:(context: PiniaPluginContext) => void
    默认值:undefined
    该 hook 将在从 storage 中恢复数据之后触发,并且它可以访问整个 PiniaPluginContext,这可用于在恢复数据之后强制地执行特定的操作
  • debug
    类型:boolean
    默认值:false
    当设置为 true 时,持久化/恢复 Store 时可能发生的任何错误都将使用 console.error 输出

例子

/*
 * @Date: 2022-11-30 17:26:39
 * @LastEditors: zhangsk
 * @LastEditTime: 2023-04-14 11:26:46
 * @FilePath: \basic-demo\src\store\index.ts
 * @Label: Do not edit
 */
import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  //  类似data
  state: () => {
    return {
      userInfo: localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo') as string) : undefined,
      token: undefined as string | undefined,
      num: 1,
    }
  },
  //  类似计算属性
  getters: {
    getNum2: (state) => state.num * 2
  },
  // 类似methods
  actions: {
    setUserInfo(info = null) {
      this.userInfo = info || undefined
      console.log(info);

      localStorage.setItem('userInfo', JSON.stringify(info))
    }
  },
  persist: {
    paths: ['num'],
    storage: sessionStorage,
    key: 'my_num'
  }
})


【pinia持久化存储】使用pinia和pinia-plugin-persistedstate依赖进行数据的持久化存储
【注意】这个持久化存储是自动存储的,什么时机呢?在你使用store的时候。

选择性持久化数据

大部分时候 ,store里的数据只需要存储一部分数据。
persist 还接受一个数组。可以选择性的存储部分数据

import { defineStore } from 'pinia'

defineStore('store', {
  state: () => ({
    toLocal: '',
    toSession: '',
    toNowhere: '',
  }),
  persist: [
    {
      paths: ['toLocal'],
      storage: localStorage,
    },
    {
      paths: ['toSession'],
      storage: sessionStorage,
    },
  ],
})

示例:

/*
 * @Date: 2022-11-30 17:26:39
 * @LastEditors: zhangsk
 * @LastEditTime: 2023-04-14 13:42:52
 * @FilePath: \basic-demo\src\store\index.ts
 * @Label: Do not edit
 */
import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  //  类似data
  state: () => {
    return {
      userInfo: localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo') as string) : undefined,
      token: 'aaxswkjaoksjdohasdh' as string | undefined,
      num: 1,
    }
  },
  //  类似计算属性
  getters: {
    getNum2: (state) => state.num * 2
  },
  // 类似methods
  actions: {
    setUserInfo(info = null) {
      this.userInfo = info || undefined
      console.log(info);

      localStorage.setItem('userInfo', JSON.stringify(info))
    }
  },
  persist: [
    {
      paths: ['num'],
      storage: sessionStorage,
      key: 'my_num'
    },
    {
      paths: ['token'],
      key: 'token',
      storage: localStorage
    },
  ]
})


【pinia持久化存储】使用pinia和pinia-plugin-persistedstate依赖进行数据的持久化存储

注意

由于数据将会被序列化,因此非基本类型(如 Date)不会以 Date 对象形式存储,而是作为 string。
当提供自定义 storage 时,其方法必须是同步的,这是因为 Pinia 的状态订阅($subscribe)是同步的(与 mutations 一致)。

结语

结束了。文章来源地址https://www.toymoban.com/news/detail-416660.html

到了这里,关于【pinia持久化存储】使用pinia和pinia-plugin-persistedstate依赖进行数据的持久化存储的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3使用pinia和pinia-plugin-persist做持久化存储

    插件和版本 src/store/home.js(可直接复制) 参考文章1 参考2 参考3

    2024年02月13日
    浏览(39)
  • 快速搞懂Pinia及数据持久化存储(详细教程)

    一.安装及使用Pinia 1.安装Pinia两种方式都可,根据个人习惯来 2.在main.ts 中引入并挂载到根实例 3.src目录下新建store/study/index.js并写入 Store 是用defineStore()定义的,它的第一个参数是一个独一无二的id,也是必须传入的,Pinia 将用它来连接 store 和 devtools。 defineStore()第二个参数可

    2023年04月15日
    浏览(39)
  • 前端开发小技巧 - 【Vue3 + TS】 - 在 TS + Vue3 中使用 Pinia,实现 Pinia 的持久化,优化Pinia(仓库统一管理)

    ts 中使用 pinia 和 Vue3 基本一致,唯一的不同点在于,需要根据接口文档给 state 标注类型,也要给 actions 标注类型; 以下都是 组合式API 的写法, 选项式API 的写法大家可以去官网看看; Pinia; 持久化插件 - pinia-plugin-persistedstate; 目标文件: src/types/user.d.ts (这里以 user.d.t

    2024年04月09日
    浏览(52)
  • pinia数据持久化,解决刷新state数据丢失

    下载插件 插件 pinia-plugin-persist 可以辅助实现数据持久化功能。 安装插件 在入口文件main.js中 配置数据持久化 数据已经存储到了本地

    2024年02月11日
    浏览(42)
  • 【k8s存储--使用OpenEBS做持久化存储】

    使用OpenEBS,你可以将有持久化数据的容器,像对待其他普通容器一样来对待。OpenEBS本身也是通过容器来部署的,支持Kubernetes、Swarm、Mesos、Rancher编排调度,存储服务可以分派给每个pod、应用程序、集群或者容器级别,包括: 跨节点的数据持久化 跨可用区和云厂商的数据同步

    2024年04月23日
    浏览(34)
  • uniapp项目实战第五章:小程序Pinia持久化

    说明:项目中 Pinia 用法平时完全一致,主要解决持久化插件 兼容性 问题。 持久化存储插件 持久化存储插件: pinia-plugin-persistedstate 插件默认使用 localStorage 实现持久化,小程序端不兼容,需要替换持久化 API。 网页端持久化 API 多端持久化 API 参考代码 现在可以持续化了

    2024年02月01日
    浏览(41)
  • Vue3状态管理库Pinia——自定义持久化插件

    个人简介 👀 个人主页: 前端杂货铺 🙋‍♂️ 学习方向: 主攻前端方向,正逐渐往全干发展 📃 个人状态: 研发工程师,现效力于中国工业软件事业 🚀 人生格言: 积跬步至千里,积小流成江海 🥇 推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒

    2024年02月13日
    浏览(34)
  • K8S使用持久化卷存储到NFS(NAS盘)

    参考文章:K8S-v1.20中使用PVC持久卷 - 知乎 目录 1、概念: 1.1 基础概念 1.2 PV的配置 1.2.1 静态PV配置 1.2.2 动态PV配置 1.2.3 PVC与PV的绑定 1.2.4 PVC及PV的使用 2 部署PV及PVC 2.1 所有K8S机器都需要安装NFS程序 2.2 仅针对需要暴露文件服务的机器开启NFS服务         2.2.1 Linux为例开启NFS服

    2023年04月26日
    浏览(52)
  • Docker Desktop使用宿主机Windows的配置文件持久化存储数据

    《微软官网Windows 上的 Docker 引擎帮助文档》 以Nginx为例 把Nginx的配置文件复制到Windows 注意:Windows的盘符是小写的,以及目录直接是用反斜杠的!(我掉这坑里好久!!!) 修改宿主机的nginx.conf配置文件 删除nginx容器 重启启动一个新的Nginx容器 访问localhost

    2024年02月09日
    浏览(52)
  • 从零开始Vue3+Element Plus后台管理系统(六)——状态管理Pinia和持久化

    官网:https://pinia.vuejs.org/zh/ Pinia 是 Vue 的专属状态管理库,相比Vuex更好用,优点不多了说官网有,用起来最重要! 在应用的根部注入创建的 pinia 定义store,拿用户登录举个简单例子 在src目录新建文件夹store,然后新建文件user.ts 在Vue页面中使用Pinia 如果我们把登录用户的信息

    2024年02月05日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包