pinia持久化存储的使用

最新推荐文章于 2024-07-24 11:11:41 发布
最新推荐文章于 2024-07-24 11:11:41 发布
阅读量216 收藏
点赞数 4
分类专栏： 前端好用组件封装 文章标签： vue.js 前端 typescript webpack 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63029264/article/details/136678586
版权

1.通过持久化插件

1.下载依赖

npm i pinia-plugin-persistedstate@3.2.0

2.在pinia的module中新增persist模块

2.1 修改持久化存储的位置，这里也可以使用 localStorage

2.$subscribe监听state的实时变化修改本地变量

蔡蔡不太菜
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue状态管理 pinia pinia-plugin-persist安装使用
m0_67402013的博客
06-18 2031
任意vue项目，我以uniapp为例 官方地址 ：pinia github 2安装pinia及持久化工具pinia-plugin-persist 使用 1项目根目录下创建文件夹pinia-store pinia-store文件夹名字可以任意起文件名字可以任意起 index.js login.js...
大事件管理系统（vue3）compositionAPI/pinia/pinia持久化处理
05-22
3. **Pinia持久化处理**： 在Pinia中，可以使用插件如`pinia-plugin-persistedstate`来实现状态的持久化。它将store的状态存储在浏览器的localStorage或sessionStorage中，当用户再次访问应用时，可以自动恢复之前...
pinia 持久化插件pinia-plugin-persistedstate 安装、使用(图文详解)
xuelang532777032的博客
06-08 1万+
5、压缩localStorage 要存的数据，我记得每个浏览器对localStorage 的存储是有限制大小的有的1M 有的6M。序那边博主开头说了，每个浏览器对localStorage 是有限制大小的，你不压缩，有时候你触发了某个bug，你都不知道怎么回事，来，跟着博主操作。3、其实就是省略掉localStorage 这一步，会自己写的小伙伴自己写个也是蛮快的。1、博主vue3、ts 5.x、pinia 2.1.3版本，2、配置stores/index.ts​​​​​​​。1、这个是两个变量（
Pinia 使用方法，配合localStorage实现存储用户信息
weixin_43589681的博客
07-04 282
Pinia 是 Vue.js 应用程序的一个现代化的状态管理库，它用于集中管理和共享组件之间的数据，state、getter、和 action 是构建状态管理的核心概念，它们分别对应数据存储、计算属性和操作方法。
Pinia简单使用和Pinia持久化插件使用
weixin_58447501的博客
09-25 290
【代码】Pinia简单使用和Pinia持久化插件使用。
Pinia使用方法及持久化存储
热门推荐
前端学习笔记
03-24 2万+
Pinia是Vue的专属状态管理库，它允许你跨组件或页面共享状态。它跟Vuex有一定的相似度，但还是有很大的区别。愿意看这篇博客的人，想必已经看过了官方文档，官方文档很详细，包含各种使用情景和理论，因此本文不说理论，只说具体的使用方法，想深入研究的建议去看官方文档，本文适合拿来即用。Pinia 官方文档。
uniapp+vue3+pinia框架（模块化+持久化存储）
06-15
对于持久化存储，Pinia 提供了插件支持，如`pinia-plugin-persistedstate`，可以将store的状态保存到浏览器的localStorage或sessionStorage中，实现数据在页面刷新后仍能保持。 【模块化】 在uniapp+vue3+pinia的...
在vue中使用pinia，并且保持数据持久化
04-15
5. 数据持久化：根据需求，选择合适的方式实现数据持久化，如使用`store.toState()`获取当前store状态并存储到浏览器缓存中。 总之，Pinia为Vue 3应用提供了一种更现代、更简洁的状态管理解决方案。它的设计使得...
Vue 3 + NaiveUi + pinia + Vite
03-25
数据持久化是指将应用程序的状态存储在本地存储或IndexedDB中，即使页面刷新，数据也能保持。这在管理后台应用中尤其重要，能够保存用户的设置和未保存的工作。 在提供的文件列表中，我们看到了配置文件如`tailwind...
day12-Pinia入门.pdf
04-09
### Pinia 快速入门详解 #### 一、Pinia简介 Pinia 是一款专为 Vue.js 设计的新一代状态管理工具，被视为 Vuex 的一种替代方案。...5. **持久化**：通过 pinia-plugin-persistedstate 插件轻松实现状态的持久化存储。
分享一个Pinia存储的数据持久化插件
忧郁的蛋的专栏
12-12 379
Pinia和vuex的通病就是，页面刷新会导致数据丢失。存放store名字的文件。这个就是本文的主角了。
Pinia 数据持久化储存（pinia-plugin-persistedstate），简单入门使用（有手就行系列）
前端小攻城狮的博客
07-06 930
完整代码参考。
Pinia的简单使用
m0_61591740的博客
06-26 1533
Pinia的简单使用
pinia 持久化存储
wxid_mtnujb6ipc0322的博客
11-22 544
说到持久化存储，大家第一想到的就是结合localStorage或者setionStorage进行存储。没错，本文章讲解的就是pinia结合localStorage的使用以及pinia-plugin-persist插件。
持久化 pinia 状态
最是人间留不住，朱颜辞镜花辞树。
12-13 4066
localStorage中，只是插件会帮助自动存入与取出，不需要自己去操作localstorage。pinia-plugin-persistedstate或者pinia-plugin-persist都无效！pinia的状态与vuex一样把数据存在内存中，在刷新页面后会清理内存，数据会丢失。在需要使用store的页面修改数据的时候，不要使用赋值解构取出，而是直接取出并修改。要解决这个问题非常简单，在状态改变时将其同步到浏览器的存储中，如。插件来实现持久化，原理也是把数据存入。
Pinia的使用
m0_62883662的博客
01-07 1369
Pinia 的使用
pinia简单介绍与使用
鲸落鹿林
02-19 7985
依据Pinia官方文档，Pinia是2019年由vue.js官方成员重新设计的新一代状态管理器，更替Vuex4成为Vuex5。 1 pinia特点 兼容vue2和vue3版本 删除mutations 现不能与vuex 混用 支持插件扩展功能 支持模块热更新无需加载页面可以修改容器，可以保持任何现有的状态 更完美TS支持 支持服务端渲染 2 基本使用 首先我们先安装 npm install pinia 在main.js中引入pinia并创建容器挂载到根实例上 import { createPinia }
【pinia的使用】
regretTAT的博客
06-11 973
是一个Vue状态管理工具，vue2推荐的状态管理工具是vuex vue3推荐的状态管理工具是pinia。pinia去除了vuex中Mutations和Actions只剩下三大核心，而且相比于vuex，pinia对于typescript的支持性更好在vue3项目中安装pinia 3.数据持久化 插件 pinia-plugin-persist 可以辅助实现数据持久化功能。...
详解Vue中nextTick的原理与作用
最新发布
fengjing81的专栏
07-24 618
Vue中的nextTick是一个非常重要的API，它允许开发者延迟回调函数的执行直到下次DOM更新循环之后。这一机制在Vue开发中非常有用，特别是在处理DOM更新和异步操作时。下面将详细解释nextTick的原理与作用。
pinia持久化存储
07-27
Pinia提供了一种自定义插件的方式来实现持久化存储。你可以编写一个插件来将Pinia的状态存储在本地存储中，比如localStorage或sessionStorage。你可以使用Pinia的`createPinia`函数创建一个Pinia实例，并使用`pinia.use`方法来安装插件。在插件的`install`方法中，你可以读取本地存储中的状态，并将其恢复到Pinia的状态中。然后，你可以使用`pinia.state.subscribe`方法来监听Pinia状态的变化，并将其保存到本地存储中。 以下是一个示例代码，将Pinia的状态存储在localStorage中： ```javascript import { createPinia } from 'pinia'; const pinia = createPinia(); pinia.use({ install(app) { const storageKey = 'pinia-state'; // 从本地存储中读取状态 const storedState = localStorage.getItem(storageKey); if (storedState) { // 将本地存储的状态转换为 JSON const parsedState = JSON.parse(storedState); // 恢复存储的状态 pinia.state.value = parsedState; } // 监听Pinia状态的变化并将其保存到本地存储 pinia.state.subscribe(newState => { localStorage.setItem(storageKey, JSON.stringify(newState)); }); }, }); ``` 你也可以使用第三方库`vuex-persistedstate`来实现Pinia的持久化存储。你可以使用`createPersistedState`函数创建一个持久化插件，并将其传递给`pinia.use`方法。你可以通过指定`storage`参数来选择要使用的本地存储，默认为`window.localStorage`。以下是一个示例代码，将Pinia的状态存储在sessionStorage中： ```javascript import { createPinia } from 'pinia'; import createPersistedState from 'vuex-persistedstate'; const pinia = createPinia(); pinia.use(createPersistedState({ storage: window.sessionStorage, key: 'pinia', })); ``` 除了使用插件，你还可以使用Pinia的Options式写法来自定义持久化。你可以使用`defineStore`函数来定义一个store，并在`state`选项中返回一个包含状态的对象。然后，你可以在插件中使用`pinia.use`方法来安装持久化插件。以下是一个示例代码： ```javascript import { defineStore } from 'pinia'; export const useStudyStore = defineStore('studyId', { state: () => { return { counter: 0, }; }, getters: {}, actions: {}, }); ``` 希望以上信息对你有所帮助！ #### 引用[.reference_title] - *1* *2* [Pinia实现持久化保存数据](https://blog.csdn.net/weixin_53156345/article/details/130972351)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [快速搞懂Pinia及数据持久化存储(详细教程)](https://blog.csdn.net/G_ing/article/details/128192480)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值