Vue3使用Pinia持久化存储（超详细介绍）

已于 2024-03-25 10:04:22 修改
阅读量854 收藏 3
点赞数 1
文章标签： vue.js npm 前端
于 2023-05-19 09:30:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nibabaoo/article/details/130759474
版权

1、为什么要进行持久化存储？

        1.1. 因为刷新页面会导致数据重置

2、怎么进行持久化存储？

        2.1. 下载插件: npm i pinia-plugin-persistedstate

        2.2. 在main.ts或main.js中进行稍微配置

        2.3. 在仓库中使用

3、 经过以上配置，你的pinia仓库就能进行持久化存储啦！！！ 

bbamx.
关注
Vue3中pinia的使用 持久化处理
weixin_46029529的博客
05-16 1003
3.创建 Pinia 存储 在你的应用程序中，你需要创建一个 Pinia 存储来管理你的状态。在模板里面使用{{ counter.xxx }}可以正常取到我们放入pinia的数据 此时 当点击按钮“加1”时 store里面的count会在原来的基础上++在这个 clickHandle函数里面 使用counter中我们定义的action 叫做"increment"的方法。与 Vue 2 中的 Vuex 不同，Pinia 使用了 Vue 3 中的。4.Pinia的使用 在组件中使用Pinia。
【超详细】vue3+pinia+自动持久化插件+自定义存储器对象实现状态数据持久化
Samdy_Chan的专栏
03-08 1907
vue3 + pinia + pinia-plugin+persistedstate + js-cookie 实现状态管理及数据自动持久化到 localStorage、sessionStorage、cookieStorage
Vue3 + Pinia 持久化存储
Yana's Blog
10-09 5657
本文使用Pinia及插件做持久化存储，避免修改 store 后还需要手动修改 storage本文弃用插件，该插件无法配置一个 store 中的变量分别存储于 localStorage 和 sessionStorage。
Vue3 Pinia持久化存储
最新发布
ning的博客
10-03 719
使用组合式 API 定义 Store，并设置persist选项来启用持久化。token: ''}),actions: {},logout() {},persist: {})使用选项式 API 定义 Store，并同样设置persist选项。items: []}),getters: {},actions: {},})persist: {storage: sessionStorage // 使用 sessionStorage 而不是 localStorage。
Vue3中的pinia使用（收藏版）
weixin_57677300的博客
12-08 2万+
pinia官方文档Pinia 的优点更多查看文档… 在main.js中引入pinia并创建容器挂载到根实例上 创建stores文件夹和index.js文件（这个文件以后基本不用管了） 在stores文件夹下创建counter.js文件。这个文件就是存有关counter相关的数据。（类似vuex的模块化） defineStore 是需要传参数的， 然后再组件中使用： 运行效果： 可以用vue3的调试工具看pinia案例需求，点击按钮加一： 一个不解构，一个不解构看看区别。 运行结
Vue3中pinia持久化
IT菜鸟
08-22 399
使用 pinia-plugin-persistedstate 插件。与正常用法多了第三个参数：{ persist: true }调用时不要直接解构，如要解构可使用 toRefs。
vue3使用pinia，并且持久化存储
liuli0927的博客
04-14 579
2.在src下创建一个store文件夹，在store文件夹下创建index.ts。3.在store文件夹下新建一个test.ts文件，里面就是你要是用的了。4.在main.ts中引用pinia。5.在页面上使用pinia。2.下载持久化存储插件。
Pinia+Vue3使用案例及Pinia持久化存储
m0_67401228的博客
08-02 1129
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。Pinia是Vue的一个存储库，它允许你跨组件/页面共享状态。这对于单页应用程序是正确的，但如果是服务器端呈现，则会暴露应用程序的安全漏洞。..
怎么在Vue3+Vite+pinia+ts中使用 Pinia持久化数据
西西的染坊
05-29 3871
在Vue3中使用Pinia持久化 最近开启了Vue3的项目，发现官方仓库下面有个状态库Pinia，使用Pinia 过程中， 需要用到一个持久化的场景，搜了一下没有看到比较成熟的持久化库（vuex持久化库可以配合加密使用） 通过搜索 找到一个库，pinia-use-persist, 集成了加密和持久化的效果，记录一下使用过程： 这个库可以通过配置式开启 加密和存储的 Storage类型（比如loclStorage或者sessionStorage、cookie等） 使用效果非常好 使用过程 // mai
vue3 pinia 持久化存储
lemon_sugar的博客
08-17 1287
vue3 中使用pinia进行数据持久化
Vue3如何使用Pinia详细介绍、pinia持久化存储(pinia-plugin-persistedstate详细配置)
热门推荐
H524268015wsw的博客
11-23 3万+
1、在stores文件夹下创建一个store ，名为user.js ，命名是尽量是见名知意的。2、定义user.jsStore 是使用定义的，并且它需要一个唯一名称，作为第一个参数传递这个name，也称为id，是必要的，Pinia 使用它来将 store 连接到 devtools。将返回的函数命名为use...是跨可组合项的约定// defineStore('userInfo',{}) userInfo就是这个仓库的名称nameusername: '赫赫',age: 30,hobby: [
在Vue3中使用pinia实现持久化
qq_45569925的博客
04-25 700
第三步：在src文件夹下创建store文件夹并在其下创建index.js文件作为临时仓库。第一步：安装pinia以及持久化插件pinia-plugin-persist。第二步：在main.js中全局引入。
vue3 中使用pinia，实现持久化存储
qq_43575827的博客
07-05 1814
pinia可以根据名称直接划分模块，不需要借助modules。新建store文件夹，新建index.ts。新建user.ts，shop.ts。在main.ts中引入。在main.ts中引用。
Vue3-Pinia-持久化
2301_77029516的博客
06-13 321
持久化官网。
vue3 + pinia 持久化
qq_59028899的博客
08-04 418
注意：在安装 pinia-plugin-persistedstate 时，必须先安装了 pinia，因为 pinia-plugin-persistedstate 是基于 pinia 之上的插件。在 persist 对象中，加入 paths，并将需要持久化的 状态以字符串数组的形式传给 paths 即可。在 vue3 中，我们会用 pinia 来代替 vuex 完成状态的管理，而我们的持久化插件也变成了。在设置好的 store 后面加上 persist 对象，设置为 true，则所有状态都为持久化。
vue3实现pinia持久化
03-23
在Vue 3中实现Pinia持久化的方法如下[^1]： 1. 首先，安装`pinia`和`pinia-persist`插件： ```shell npm install pinia pinia-persist ``` 2. 在Vue应用的入口文件（通常是`main.js`）中导入和使用`pinia`和`pinia...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

bbamx.

谢谢您

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值