vue3使用pinia-plugin-persistedstate 持久化不生效的问题

原创 已于 2024-02-22 09:59:05 修改 · 2.9k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

于 2024-02-21 15:55:31 首次发布
文章讨论了在IT开发中，将路由拦截器用于管理API请求的必要性，指出先前设置的路由可能会在特定配置下失效，必须将其移到拦截器中以保证所有请求正常工作。

如下图所示，需要在路由拦截器里面写。不然一个都不生效。 

【即使以前生效的，在下图【红框】中定义一下，也会失效。得挪到路由拦截器里面才行】

终于出来了 

vue3+vite+pinia+pinia-plugin-persistedstate持久化存储！！！pinia-plugin-persist 插件（持久化报错无效！！！感）
jieweiwujie的博客
09-26 2230
上面这一句defineStore报错重载有问题；因此使用2 可能和vue版本用关系吧。
Vue3 - Pinia 状态管理的数据持久化，pinia-plugin-persistedstate 插件（安装配置）
🏆 前端领域优质创作者
11-30 5454
所谓数据持久化简单说，就是将数据存到缓存中，这样刷新页面也不会丢失状态管理的数据。Pinia已经为我们提供了数据持久化的插件，把这玩意引入到项目中，简单的配置下就能实现了，非常的简单。
vue3+vite+pinia+pinia-plugin-persist持久化存储无效
热门推荐
dnpao的专栏
11-17 1万+
最近刚接触 Pinia在项目中引用相关操作，后续考虑到state的持久化存储问题，也引用了大神的推荐的插件结合，《pinia + pinia-plugin-persist持久化存储》，但怎么试都不生成，主要是我项目中之前引用过Pinia，后面在使用pinia-plugin-persist时又创建了一次pinia ，最后看到了这篇文章，一语惊出梦中人。
pinia-plugin-persistedstate 插件不生效
练习生
08-10 2074
bug记录
vue3项目使用pinia时，在使用pinia-plugin-persistedstate插件后，路由守卫的js文件中数据还是无法持久化的问题
m0_62818938的博客
08-20 1395
vue3项目使用pinia时,浏览器一刷新，存入的数据就会丢失，在大家通常会使用pinia-plugin-persistedstate插件，但是在vue的js文件和路由守卫的js文件中有一些稍不注意就会踩的坑，接下来我就把vue3如何使用pinia，如何使用pinia数据持久化插件以及在js文件中需要注意的内容分享给大家。这是因为js文件中使用pinia时还没有挂载，所以需要我们在store.js文件的同级目录新建一个文件pinia.js,以下代码是pinia.js文件中的。5.在js文件中的使用。
vue3 pinia pinia-plugin-persistedstate paths设置失效问题
博客客的博客
01-13 580
关于网上存储pinia state某个值 pinia-plugin-persistedstate 网上一堆答案都是设置paths的，经过查询最新4.2.0文档，该属性为3版本的属性，最新文本paths已替换为pick。如果发现设置的paths还是存储的所有值，请检查版本，并替换为pick，就ok了。
使用pinia-plugin-persistedstate实现状态持久化的实践与思考
muyun2800的博客
08-08 1324
本文介绍了在Vue3项目中使用Pinia配合pinia-plugin-persistedstate插件实现状态持久化的方法。该插件解决了传统前端状态管理在页面刷新时状态丢失的问题，支持多种存储方式和选择性持久化配置。文章详细讲解了插件的安装、基础配置和高级用法，包括自定义序列化、多存储策略组合等技巧，并指出了潜在问题与解决方案。最佳实践建议合理选择存储介质、最小化持久化数据并规范命名，同时强调关键业务数据仍应以后端为唯一真相源。该插件为前端状态持久化提供了简洁高效的解决方案。
vue3数据持久化方案：pinia-plugin-persistedstate源码浅析
Jinuss的博客
09-10 2486
vue3数据持久化方案原理剖析，pinia的标配
深入探究 Pinia-Plugin-Persistedstate 的持久化存储实现方式
小刘哥的博客
08-14 1108
Pinia 是 Vue.js 的官方状态管理库，它提供了一种存储和管理应用所有组件的状态的方法。与 Vuex 相比，Pinia 提供了更简单的 API 和更好的 TypeScript 集成。是一个为 Pinia 设计的插件，它通过 localStorage 或 sessionStorage 将状态持久化存储，从而使得应用状态能够在页面刷新后恢复。如果你需要自定义存储逻辑，比如使用加密存储或特定格式化，可以通过自定义storage},},info: {}}),})]});
Pinia持久化失败
qq_45415290的博客
03-11 1735
pinia借助pinia-plugin-persistedstate持久化失败
【报错】vue3项目引入pinia-plugin-persist失败，引入后又出现没有与之调用的重载问题的解决方法
m0_73444363的博客
03-24 889
在本人写vue3+vite+pinia前端项目时，想引入pinia-plugin-persist持久化插件，虽然我写的是typescript，但是我仍旧采取了这个插件，先不说为啥，先来解决我遇到的问题。首先第一步我安装插件然后在main.ts按官网引入pinia-plugin-persist然后就出现了找不到模块的错误。
pinia持久化未生效
weixin_46176940的博客
05-28 2155
pinia持久化未生效
关于vue3 pinia store持久化存储的问题
m0_55756688的博客
04-04 817
问题是我装的插件叫pinia-persistedstate-plugin。发现自己虽然写了persist:true.但是一直没装插件。但是谁懂啊 ，没生效，而且我也一直没想过是它的问题。有啥区别，为啥另一个不能生效呢？呵呵呵，就生效了，所以。
使用pinia持久化插件时踩过的坑
qq_45334976的博客
07-20 1万+
使用pinia持久化插件时踩过的坑
pinia + pinia-plugin-persistedstate + 组合式API 写法，持久化失效问题
u012533474的博客
02-28 7725
2，初始化后本地存储没有，后来经过测试发现是store里面的数据，必须改变一次才能保存，也就是说如果我第一次调用没有设置过数据，是默认数据，是不会持久化保存的（默认数据好像也没有必要保存吧），当然也可能又其他配置可以初始化保存，暂时没有找到相关文档说明。不知道是不是pinia不推荐 组合式 的写法还是什么原因，感觉组合式的例子没有几个，网上用的也很少，资料也找不到，只能自己慢慢测试，先记录一下问题吧，防止后面又遇到。3，（我主要问题）上面配置都好了，组合式不能持久化，测试。首先是组合式写法，配置持久化。
pinia-plugin-persistedstate 设置persist后不生效
最新发布
mikekale的博客
08-17 219
必须返回全部的state，只返回部分getter不行。
pinia-plugin-persist失效了
Good Luck
06-14 4091
只有真正的改变了store的值，才能触发持久化的存储,博主学习的时候在这里踩了很久的坑，当时只是改变了数据的引用，并没有真正改变pipia里面的值，以为pinia-plugin-persist失效了，看了源码才知道原理是通过$subscribe监听，断点调试发现没有触发才恍然大悟。...
Pinia 插件 pinia-plugin-persist 添加 persist 属性时报错：没有与此调用匹配的重载
Java Pro
11-16 2053
记录 Pinia 持久化不生效。
pinia 使用pinia-plugin-persistedstate持久化
03-19
Pinia 是一个用于 Vue.js 的状态管理库，它提供了一种简单且可扩展的方式来管理应用程序的状态。Pinia-plugin-persistedstate 是一个 Pinia 插件，它可以帮助你将应用程序的状态持久化到本地存储中，以便在刷新页面或重新加载应用程序时保持状态的一致性。 使用 pinia-plugin-persistedstate 插件进行持久化的步骤如下： 1. 安装插件： 你可以使用 npm 或者 yarn 来安装插件： ``` npm install pinia-plugin-persistedstate ``` 或者 ``` yarn add pinia-plugin-persistedstate ``` 2. 导入插件并注册： 在你的应用程序的入口文件中，导入 `pinia-plugin-persistedstate` 并将其注册到 Pinia 实例中： ```javascript import { createApp } from 'vue' import { createPinia } from 'pinia' import { createPersistedState } from 'pinia-plugin-persistedstate' const pinia = createPinia() pinia.use(createPersistedState()) const app = createApp(App) app.use(pinia) app.mount('#app') ``` 3. 配置插件： 你可以通过传递选项对象来配置插件，例如指定要持久化的状态模块、存储键名等： ```javascript pinia.use(createPersistedState({ key: 'my-app-state', // 存储键名，默认为 'pinia-state' paths: ['counter'], // 要持久化的状态模块，默认为全部模块 storage: localStorage // 存储引擎，默认为 localStorage })) ``` 4. 使用持久化的状态： 在你的组件中，你可以像使用普通的 Pinia 状态一样使用持久化的状态： ```javascript import { useStore } from 'pinia' export default { setup() { const store = useStore() // 读取持久化的状态 console.log(store.counter) // 修改持久化的状态 store.counter++ } } ``` 这样，你就可以使用 pinia-plugin-persistedstate 插件来实现 Pinia 状态的持久化了。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值