这里是使用方法,如果想看安装和引入pinia请前往:引入pinia
pinia官方文档:pinia中文文档
一,Pinia的优点:
1. 简单易用:Pinia 提供了简单直观的 API,使得状态管理变得简单和直观。它借鉴了 Vuex 的概念,但在设计上更加简洁和易于理解。
2. 面向未来:Pinia 是专为 Vue 3 开发的,使用了 Vue 3 的新特性和优化。它充分利用了 Vue 3 的响应式系统和编译时优化,提供更好的性能和开发体验。
3. 类型安全:Pinia 提供了 TypeScript 支持,可以在代码中使用类型来定义状态、操作和 getter。这有效地减少了运行时的错误,并提供了更好的代码智能感知和自动补全。
4. 模块化:Pinia 支持以模块化的方式组织状态,每个模块可以拥有自己的状态、操作和 getter,使得状态管理逻辑更加清晰、可维护和可扩展。
5. 插件化:Pinia 允许你使用插件来扩展其功能。你可以为 Pinia 编写自定义插件,以满足特定的需求,并将其应用在应用程序中。
6. 性能优化:Pinia 在内部使用了按需加载状态的机制,只有当组件需要访问特定的状态时,才会进行响应式追踪,减少了响应式系统的负担,提升了性能。
总的来说,Pinia 是一个简单、高效、类型安全的状态管理库,能够帮助开发者更好地管理和组织应用程序的状态。如果你正在使用 Vue 3,Pinia 是一个值得考虑的选择。
二,pinia基本使用(这里简单略过安装和引入 详细请前往:引入pinia)
1. npm install pinia 安装插件
2. 在main.ts挂载
3. 在src目录下创建store文件夹,并在store文件夹下创建index.ts
(这个就类似于仓库,里面管理pinia的存储信息)
defineStore函数接受两个参数,第一个参数是id,简单说就是一个名称,第二个参数store 的配置对象,分为三个核心概念:
-
State: State 表示应用程序的状态数据,在 Pinia 中,你可以通过定义 State 类或普通对象来表示你的状态,然后在组件中访问和修改它。
-
Getters: Getters 是从状态中派生出来的计算属性,用于提供对状态的计算和转换。在 Pinia 中,你可以定义 Getters 来获取和处理状态的值,并在需要时从组件中访问和使用它们。Getters 可以类比为 Vue 组件中的计算属性。
-
Actions: Actions 是用于操作和修改状态的方法。在 Pinia 中,你可以定义 Actions 来处理异步操作、状态的变更和其他业务逻辑。Actions 可以在组件中触发和调用,然后执行相应的逻辑以更新状态。
//定义关于counter的store
import {defineStore} from 'pinia'
const useCounter = defineStore("counter",{
state:() => ({
count: 0,
}),
getters: {
},
actions: {
}
})
//暴露这个useCounter模块
export default useCounter
4.在页面中使用
使用 storeToRefs
函数可以将 store 中的状态属性转换为具有响应式能力的 ref 对象,使得状态变化在组件中能够自动更新
我们可以在调试工具里面直接看到pinia
三,修改state的数据
1. 页面通过点击事件触发修改
2. 用$path函数修改 (这里我建了一个新的库 user来演示)
$state 方式(这个是替换的方式)这个基本不用,可以看查阅官方文档。
四,重置数据
function resetUser() { //重置
userCon.$reset()
}
五,getters的使用
1. 基本用法
在counter里面演示:
页面中:
2. 引入另一个getters
3. getters中取别的store中的数据
测试:在counter模块里面拿到user中的age数据
六,actions的使用