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。对于更复杂的数据类型，可能需要额外的序列化和反序列化处理，以确保数据能够正确地存储和恢复‌ 。

原文地址：https://blog.csdn.net/nnmmbb/article/details/142599979

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！