§ Pinia 状态管理库

Vue Vue第三方库 Web Pinia (发音为 /piːnjʌ/，类似英文中的 “peenya”) 是最接近有效包名 piña (西班牙语中的 pineapple，即“菠萝”) 的词。 菠萝花实际上是一组各自独立的花朵，它们结合在一起，由此形成一个多重的水果。 与 Store 类似，每一个都是独立诞生的，但最终它们都是相互联系的。 它(菠萝)也是一种原产于南美洲的美味热带水果。

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态，更详细文档请访问官网地址：https://pinia.vuejs.org/zh/

。它具备如下特性：

• 💡 所见即所得 ：与组件类似的 Store。其 API 的设计旨在让你编写出更易组织的 store；
• 🔑 类型安全：类型可自动推断，即使在 JavaScript 中亦可为你提供自动补全功能！
• ⚙️ 开发工具支持：不管是 Vue 2 还是 Vue 3，支持 Vue devtools 钩子的 Pinia 都能给你更好的开发体验。
• 🔌 可扩展性 ： 可通过事务、同步本地存储等方式扩展 Pinia，以响应 store 的变更。
• 🏗 模块化设计：可构建多个 Store 并允许你的打包工具自动拆分它们。
• 📦 极致轻量化: Pinia 大小只有 1kb 左右，你甚至可能忘记它的存在！

安装

npm install pinia

安装完成后需要在 vue 中注册：

// 引入全局状态管理 Pinia
import { createPinia } from 'pinia'
 
const pinia = createPinia()
 
// 应用 Pinia
app.use(pinia)

使用

Pinia 使用 store 来管理应用程序的状态。我们可以在项目中创建一个或多个 store，每个 store 对应一个特定的状态域。

• pinia-store