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

已于 2024-03-25 10:04:22 修改
阅读量792 收藏 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.
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
Vue3中pinia的使用 持久化处理
weixin_46029529的博客
05-16 908
3.创建 Pinia 存储 在你的应用程序中，你需要创建一个 Pinia 存储来管理你的状态。在模板里面使用{{ counter.xxx }}可以正常取到我们放入pinia的数据 此时 当点击按钮“加1”时 store里面的count会在原来的基础上++在这个 clickHandle函数里面 使用counter中我们定义的action 叫做"increment"的方法。与 Vue 2 中的 Vuex 不同，Pinia 使用了 Vue 3 中的。4.Pinia的使用 在组件中使用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状态管理，手写插件实现持久化
最新发布
I_am_shy的博客
06-25 574
全局插件的执行流程：在main.js中注册--->页面打开时执行（在页面维渲染时就已经执行了），一个插件其实就是实现某个功能的函数方法，并不是只有十分复杂的结构才能称为插件，当我们使用插件时，在理解了功能之后就可以尝试自己来实现。
Vue3 + Pinia 持久化存储
Yana's Blog
10-09 5130
本文使用Pinia及插件做持久化存储，避免修改 store 后还需要手动修改 storage本文弃用插件，该插件无法配置一个 store 中的变量分别存储于 localStorage 和 sessionStorage。
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 持久化存储
lemon_sugar的博客
08-17 1225
vue3 中使用pinia进行数据持久化
Vue3 Pinia持久化存储
weixin_44530344的博客
08-22 2210
pinia持久化存储
uniapp+vue3+pinia框架（模块化+持久化存储）
06-15
总的来说，这个项目结合了uniapp的跨平台能力，vue3的性能提升与 Composition API，以及pinia的高效状态管理，旨在构建一个模块化且支持持久化存储的移动应用。项目中的`index.html`是主入口文件，`main.js`是应用的...
在vue中使用pinia，并且保持数据持久化
04-15
5. 数据持久化：根据需求，选择合适的方式实现数据持久化，如使用`store.toState()`获取当前store状态并存储到浏览器缓存中。 总之，Pinia为Vue 3应用提供了一种更现代、更简洁的状态管理解决方案。它的设计使得...
vue3整合pinia案例
12-14
Pinia还提供了许多高级特性，如插件支持、异步操作、状态持久化等。通过使用`pinia-plugin-persistedstate`这样的插件，你可以使store的状态在刷新页面后仍然保留。 在这个"vue3整合pinia案例"中，你可以进一步学习...
大事件管理系统（vue3）compositionAPI/pinia/pinia持久化处理
05-22
3. **Pinia持久化处理**： 在Pinia中，可以使用插件如`pinia-plugin-persistedstate`来实现状态的持久化。它将store的状态存储在浏览器的localStorage或sessionStorage中，当用户再次访问应用时，可以自动恢复之前...
操作系统实验：前端 vue3 + vite3 + pinia实现简易的生产者消费者模型
01-03
内容概要：操作系统实验，前端 vue3 + vite3 + pinia + ant design vue实现简易的生产者消费者模型，可以通过输入表单的形式手动调节生产者的消费速率和消费者的消费速率的形式，实现生产者消费者模型的可视化效果。...
在Vue3中使用pinia实现持久化
qq_45569925的博客
04-25 584
第三步：在src文件夹下创建store文件夹并在其下创建index.js文件作为临时仓库。第一步：安装pinia以及持久化插件pinia-plugin-persist。第二步：在main.js中全局引入。
vue3 中使用pinia，实现持久化存储
qq_43575827的博客
07-05 1718
pinia可以根据名称直接划分模块，不需要借助modules。新建store文件夹，新建index.ts。新建user.ts，shop.ts。在main.ts中引入。在main.ts中引用。
vue3 + pinia 持久化
qq_59028899的博客
08-04 398
注意：在安装 pinia-plugin-persistedstate 时，必须先安装了 pinia，因为 pinia-plugin-persistedstate 是基于 pinia 之上的插件。在 persist 对象中，加入 paths，并将需要持久化的 状态以字符串数组的形式传给 paths 即可。在 vue3 中，我们会用 pinia 来代替 vuex 完成状态的管理，而我们的持久化插件也变成了。在设置好的 store 后面加上 persist 对象，设置为 true，则所有状态都为持久化。
vue3使用pinia，并且持久化存储
liuli0927的博客
04-14 464
2.在src下创建一个store文件夹，在store文件夹下创建index.ts。3.在store文件夹下新建一个test.ts文件，里面就是你要是用的了。4.在main.ts中引用pinia。5.在页面上使用pinia。2.下载持久化存储插件。
uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程
qq_52602294的博客
05-02 3154
这是一个vue3配合pinia的详细教程 这里面的安装插件 尽量使用 yarn进行安装；persist有两种用法，如果persist: true 是存储全部的内容 ，把true换为paths: ['count']， 可以指定存储的数据
vue3实现pinia持久化
03-23
在Vue 3中实现Pinia持久化的方法如下[^1]： 1. 首先，安装`pinia`和`pinia-persist`插件： ```shell npm install pinia pinia-persist ``` 2. 在Vue应用的入口文件（通常是`main.js`）中导入和使用`pinia`和`pinia-persist`： ```javascript import { createApp } from 'vue' import { createPinia } from 'pinia' import { createPersist } from 'pinia-persist' const app = createApp(App) const pinia = createPinia() const persist = createPersist(pinia, { // 配置持久化存储的键名和存储方式 // 可以选择localStorage或sessionStorage // 这里以localStorage为例 storage: window.localStorage, key: 'pinia', }) app.use(pinia) app.use(persist) app.mount('#app') ``` 3. 在需要持久化的Pinia模块中使用`persist`装饰器： ```javascript import { defineStore } from 'pinia' export const useMyStore = defineStore('myStore', { state: () => ({ // 定义需要持久化的状态 count: 0, }), actions: { // 定义操作状态的方法 increment() { this.count++ }, }, persist: persist(), // 使用persist装饰器 }) ``` 通过以上步骤，你就可以在Vue 3中实现Pinia的持久化了。持久化的状态将会在页面刷新后仍然保留。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

bbamx.

谢谢您

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

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

打赏作者

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

抵扣说明：

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

余额充值