Pinia只能存储简单数据类型

最近用vue做了一个管理后台,登录后使用Pinia存储一个User对象,包括name,token,avator。

在接口中统一拦截,header中添加token。获取Pinia里的对象对应的token值时发现是undefined,于是会出现登录后可以正常访问接口,刷新后就没有带上token,接口返回错误。于是又尝试创建一个新的defineStore,直接保存token,发现可以拿到。原来Pinia只能存储简单数据类型。

Pinia数据持久化可以通过使用pinia-plugin-persistedstate插件来实现。‌

Pinia是一个Vue的状态管理库,它允许开发者跨组件或页面共享状态。为了实现数据的持久化,即让数据在页面刷新或重新加载后依然保持,可以使用pinia-plugin-persistedstate插件。这个插件可以将Pinia管理的状态保存到localStorage或sessionStorage中,从而实现在不同会话或浏览器关闭后数据依然可用。

使用pinia-plugin-persistedstate插件进行数据持久化的基本步骤如下:

‌安装插件‌:首先,需要通过npm安装pinia-plugin-persistedstate插件。

‌导入并使用‌:在项目的入口文件(如main.ts或main.js)中导入createPinia和piniaPluginPersistedstate,并创建Pinia实例。

‌挂载插件‌:将创建的Pinia实例挂载到Vue应用上,并使用piniaPluginPersistedstate插件。

‌在Store中使用‌:在定义Store时,将需要持久化的状态设置为可持久化(通过设置persist属性为true)。

通过这些步骤,Pinia管理的状态就会被自动同步到localStorage或sessionStorage中,从而实现数据的持久化存储。这种方式适用于保存简单的数据类型,如数字、字符串等,因为它直接操作的是浏览器的存储API。对于更复杂的数据类型,可能需要额外的序列化和反序列化处理,以确保数据能够正确地存储和恢复‌ 。

相关推荐
Irene19915 天前
Vue 2、Vue 3 、Vuex 3、Vuex 4 和 Pinia 响应式丢失场景及解决方案
vue·pinia·vuex
SuperEugene7 天前
Vue3 Pinia 状态管理规范:状态拆分、Actions 写法、持久化实战,避坑状态污染|状态管理与路由规范篇
前端·javascript·vue.js·前端框架·pinia
optimistic_chen9 天前
【Vue3入门】Pinia 状态管理 和 ElementPlus组件库
前端·javascript·vue.js·elementui·pinia·组件
Irene199112 天前
Vuex版本演进与核心特性对比(附:Vuex 4 与 Pinia 核心区别对比)
pinia·vuex·数据流
Irene199113 天前
对比总结:Vue3中的 watch 和 Pinia中的 $subscribe
vue.js·pinia·watch·subscribe
这是个栗子14 天前
【Vue3项目】电商前台项目(四)
前端·vue.js·pinia·表单校验·面包屑导航
还是大剑师兰特16 天前
Pinia在Vue3中的应用部署与使用,包括持久化方案
pinia·大剑师
p5l2m9n4o6q19 天前
Vue3后台管理系统布局实战:从零搭建Element Plus左右布局(含Pinia状态管理)
vue3·pinia·element plus·viewui·后台管理系统
Irene19912 个月前
全局状态管理:Vuex 与 Pinia 对比(附:反模式详解)
pinia·vuex·状态管理·反模式
二哈喇子!2 个月前
Pinia 状态管理库
pinia