小白也懂的 Pinia 基础知识全解

Pinia概述

Pinia是一个轻量级的状态管理库，状态管理库是用于管理应用程序全局状态的工具。

pinia官网：https://pinia.vuejs.org/zh/

在这里插入图片描述

以登录为例:

使用Pinia创建一个userStore来集中管理用户的登录状态和过期时间

• 当用户登录成功时: 设置userStore中用户的登录状态为已登录,并设置过期时间
• 当用户退出登录时: 修改userStore中用户的登录状态为未登录,并删除过期时间

Pinia的使用

安装命令：npmi pinia-plugin-persistedstate

在这里插入图片描述

Pinig 和 组件通信 的区别

虽然Vue提供的父传子、子传父以及跨组件通信也可以用于状态共享但在大型项目中,随着组件数量的增加,会导致以下问题: 1.组件之间传递大量的props,会使项目变得非常繁琐和难以维护 2.非父子组件间过度依赖provide/iniect,使状态散落在各个组件之间

Pinia 可以解决以下问题:

1.全局状态管理 所有组件都可以访问和修改状态,而不用在每个组件内部进行状态管理 2.简化组件之间的通信 避免在组件之间传递大量的props 3.状态持久化 可以将应用程序的状态保存到本地存储中，在应用程序重启后会保留状态,对于登录等场景非常有用

总的来说,Pinig可以处理大型项目中复杂的状态管理需求，而父传子、子传父以及跨组件通信,可以解决一些简单的状态传递问题，更适合小型项目。

Pinia 和 localStorage 的区别

• localStorage LocalStorage只能存储字符串类型的数据LocalStorage有大小限制,通常为5MB左右
• Pinia Pinia可以存储任何类型的数据,包括对象、数组等Pinia没有大小限制,可以存储大量的数据

总的来说,对于复杂的状态管理需求,使用Pinia是更好的选择，而对干简单的状态管理需求,使用localStorage是更简单的解决方案。

注：pinia持久化插件也是存储到localStorage中，为什么不直接使用localStorage?

• 自动状态同步 持久化插件自动将Pinia的状态存储到localStorage中 无需手动处理状态的读取和写入
• 易用性 无需手动处理localStorage的键值对存储、数据转换等繁琐过程
• 与Vue组件状态紧密集成 持久化插件与Vue组件的响应式数据完美结合 当状态改变时,依赖这些状态的组件会自动更新视图 与仅仅从localStorage中读取静态数据相比更加灵活和强大