【vue】Pinia-1 入门

最新推荐文章于 2024-07-23 21:45:00 发布
最新推荐文章于 2024-07-23 21:45:00 发布
阅读量283 收藏
点赞数 3
分类专栏： # Javascript基础+Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63070489/article/details/137720193
版权
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

tao355667
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3使用Pinia-store选项式api和组合式api两种使用方式-快速入门demo
JackieDYH的博客
07-24 799
Vue3使用Pinia-store选项式api和组合式api两种使用方式-快速入门demo
vue3+pinia+element-plus搭建的模板工程
01-04
无论您是一名经验丰富的开发者还是刚入门的新手，这个Pinia+Vue3+Element Plus+Webpack 5搭建的系统模板工程都将成为您的得力助手。 此zip解压后即可立即运行，为了保证项目依赖一致性，我将node_modules也一起上传...
Pinia 数据持久化储存（pinia-plugin-persistedstate），简单入门使用（有手就行系列）
前端小攻城狮的博客
07-06 930
完整代码参考。
Nuxt3+pinia+pinia-plugin-persist（踩坑指南）
楚羽幽的博客
08-10 2773
nuxt3与pinia的初步入门使用
Vue3 pinia快速入门
青春流年的博客
04-07 2051
安装脚手架vite npm create vite@latest 然后按照提示操作即可！ 安装状态管理pinia npm install pinia --save 创建 Store 新建 src/store 目录并在其下面创建 index.js，导出 store // src/store/index.js import { createPinia } from 'pinia' const store = createPinia() export default store 在 main.ts 中引入并
Vue3之Pinia 快速入门
m0_63831957的博客
03-15 404
Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态，类似 Vuex, 是 Vue 的另一种状态管理方案，支持 Vue2 和 Vue3。Pinia 相比 Vuex 的知识点更少也更简单，而且 Pinia 可以自由扩展，使用起来也更加方便。
VUE3-从入门到弃坑
欲望如海水，越喝越渴。
09-07 1130
vue项目的搭建，从入门到弃坑！
vue3-vite前端快速入门教程 vue-element-admin
m0_61634551的博客
12-07 1215
vue-element-admin是一个后台前端解决方案，它基于vue和element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。一上来就看到那么多文件夹确实头疼，咱先不管别的，主要先了解标注部分文件。
Vue3下pinia的状态管理原理和具体使用示例
YunWisdom
06-09 3448
Pinia在Composition API的设计背景下，以Vuex下一代的构想设计了新的Vue存储状态管理库；Pinia 是一个基于 Vue 3 的状态管理库，它提供了一个可组合的、类型安全的 API 来管理 Vue 应用程序的状态。
Vue2或Vue3使用Pinia快速入门
TangMonk的博客
09-26 1567
Store” 在上下文中通常指的是状态管理库中的一个概念，用于存储应用程序的数据状态。在 Vue.js 中，“store” 通常是指 Vuex，而在使用 Pinia 的情况下，它指的是 Pinia 的 store 对象，用于管理应用程序的状态。这样，你就可以在 Vue 2 或Vue3项目中使用 Pinia 进行状态管理。请注意，Vue 2 和 Vue 3 的生命周期和一些语法细节可能有所不同，需要根据你的项目进行适当的调整。
Pinia快速入门.pdf
09-06
《Pinia快速入门详解》 Pinia，作为Vue生态中的新一代状态管理库，是Vuex的现代化替代方案，旨在提供更为简洁的API和与Vue3新语法的无缝对接。Pinia的优势在于其易于理解和使用的特性，包括去除了复杂的mutation...
Vue3pdf中文文档
06-06
- **Vue3工具链**：Vue3可以与Vite、TypeScript、Pinia（状态管理）等现代工具链结合，提供更强大的开发环境。 5. **升级Vue2到Vue3** 从Vue2迁移到Vue3需要注意API的变化和兼容性问题。开发者需评估项目需求，...
基于vue3+pinia+element-plus实现的仿网易云音乐网站源码(课程设计).zip
01-11
1.项目代码功能经验证ok，确保稳定可靠运行。欢迎下载使用！ 2.主要针对各个计算机相关专业，包括计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网等领域的在校学生、专业教师或企业员工使用。 3.项目...
仿美团民宿；技术栈主要为Vue3+Vite4+Pinia+Vant3等；适合学习Vue3入门等；.zip
04-03
1. **Vue3**: Vue3 是 Vue.js 的最新版本，提供了许多优化和新特性，如Composition API、Suspense 组件、 teleport、更好的类型检查等。Composition API 允许开发者更灵活地组织代码，提高代码复用性和可维护性。 2...
谷粒商城实战笔记-38-前端基础-Vue-指令-单向绑定&双向绑定
epitomizelu的专栏
07-20 1005
安全性v-text更安全，因为它总是将数据作为纯文本插入，不解析 HTML。v-html则可能引发安全问题，因为它会解析并渲染 HTML 标签。用途v-text适用于插入文本数据，而v-html适用于插入需要被解析为实际 HTML 的数据。处理 HTML 标签v-text忽略 HTML 标签，将其视为普通文本；v-html则会解析并显示 HTML 标签。二者都是单向绑定，元素绑定model，model不绑定元素，元素值改变时model值不会更新。
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 397
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
vue3 学习笔记17 -- 基于el-menu封装菜单
最新发布
weixin_46328739的博客
07-23 164
前提条件：组件创建完成。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 990
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
vue3 pinia-plugin-persistedstate设置pinia时效
07-02
在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、付费专栏及课程。

余额充值