【vue】Pinia-1 入门

Pinia是Vue.js官方推荐的状态管理库,通过全局管理简化组件间通信,尤其适用于用户登录场景。与LocalStorage相比,Pinia虽不支持大文件存储,但提供了更结构化的状态管理。
摘要由CSDN通过智能技术生成

简介

Pinia是Vue.js的一个状态管理库,由Vue.js官方维护。它提供了一种简单而强大的方式来管理Vue.js应用程序中的状态。

应用场景:用户登录

解决问题

  • Pinia是全局的状态管理,所有组件都可看到
    • 避免了组件间的大量数据交换
    • 简化了组件间的通信
  • 状态可保存到本地,在登录场景十分有用

Pinia VS 组件通信

Pinia VS LocalStorage
Pinia

  • 字符串
  • 5MB
    LocalStorage
  • 不限制类型,大小

参考

https://www.bilibili.com/video/BV1nV411Q7RX

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3中,`pinia-plugin-persistedstate`是一个用于持久化状态的Pinia插件,它允许你在用户关闭和重新打开应用时保存和恢复数据。关于设置Pinia状态的时效,你需要明确你是指的状态持久化的时间范围,例如: 1. **默认保存间隔**:这个插件通常会自动保存状态到浏览器的localStorage或 sessionStorage中。默认情况下,Pinia-PersistedState可能没有特定的保存间隔,但你可以通过配置自定义保存策略。 2. **手动触发保存**:你可以选择在特定场景(如组件卸载或页面刷新前)调用保存方法,这可以让你控制保存的时机。 3. **失效时间**:对于敏感信息,你可能希望设置一个过期时间,超过这个时间后数据会被清除。这通常不是由Pinia-PersistedState直接处理,而是通过在存储选项中设置`maxAge`属性来实现,然后在加载数据时检查是否已过期。 为了具体设置pinia状态的时效,你需要在配置插件时进行以下操作: ```javascript import { createApp } from 'vue'; import { useStore } from '@pinia/core'; import { persistedState } from 'pinia-plugin-persistedstate'; const store = defineStore('myStore', { // ...定义你的状态和方法 }); // 使用 persistedState 插件 createApp({ // ...其他配置 }) .use(store) .use(persistedState, { key: 'myStore', // 存储的键名 // 可选的保存策略,如自动保存间隔、过期时间等 // 例如: // localStorage: { maxAge: 24 * 60 * 60 * 1000 }, // 一天后数据过期 }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值