Pinia是专为 Vue 应用程序开发的状态管理库，Pinia 支持 Vue2和 Vue3。在 Vue3项目中,既可以使用传统的 Vuex实现状态管理，又可以使用 Pinia 实现状态管理。本章将对 Pinia的基本使用方法进行讲解。
一.Pinia 概述
Pinia 是新一代的轻量级状态管理库，它允许跨组件或页面共享状态，解决了多组件间的数据通信，使数据操作更加简洁。
Pinia与 Vuex相比，主要优点如下。
- Pinia 支持 Vue2和 Vue 3，支持选项式 API和组合式 API。
- Pinia 简化了状态管理库的使用方法,抛弃了mutations,只有 state、getters和actions,让代码编写更容易也更直观。
- Pinia 不需要嵌套模板，符合 Vue3中的组合式 API，让代码更加扁平化。
- Pinia 提供了完整的 TypeScript 支持。
- Pinia 分模块不需要借助 modules,使代码更加简洁,可以实现良好的代码自动分隔。
- Pinia 支持 Devtools 调试工具，便于进行调试。
- Pinia 体积更小，性能更好。
- Pinia 支持在某个组件中直接修改 Pinia 的 state 中的数据。
- Pinia 支持服务器端渲染。
二.安装 Pinia
使用包管理工具安装 Pinia，具体命令如下。
#使用yarn 包管理器安装
yarn add pinia --save
#使用 npm 包管理器安装
npm install pinia --save上述命令展示了使用两种包管理工具安装 Pimnia 的方法，在使用时任选其一即可。
下面演示如何在项目中安装Pinia，基本步骤如下。
① 打开命令提示符,切换到 D:\vue\chapter07目录,使用 yarn 创建一个名称为 my-pinia的项目，具体命令如下。
yarn create vite my-pinia --template vue在上述命令中，my-pinia 表示项目名称。
在命令提示符中，切换到my-pinia目录，为项目安装所有依赖，具体命令如下。
cd my-pinia
yarn② 在 my-pinia 目录下，使用 yam 安装 Pinia，具体命令如下。
yarn add pinia@2.0.27--save③ 使用 VS Code 编辑器打开 my-pinia 目录。
④ 执行命令启动服务，具体命令如下。
yarn dev项目启动后，会默认开启一个本地服务，地址为htp://127.0.0.1:5173/。
至此，my-pinia项目创建完成，并在项目中成功安装了Pinia。
三.使用 Pinia
在项目中使用 Pinia时,通常先在项目中创建一个 store 模块,然后创建并挂载 Pimnia 实例。其中，store 模块是用于管理状态数据的仓库。
创建 srclstore\index.js 文件，编写 store 模块的代码，具体代码如下。
import { defineStore } from 'pinia'
export const useStore = defineStore('storeld',{
state:()=>{},
getters:{},
actions:{}
})在上述代码中，第1行代码用于导人 defineStore( )函数;第2行代码使用 defineStore( )函数定义 store 对象，并通过 export 关键字导出 useStore()函数。通过调用 userStore( )函数可以获取 store 对象。
defneStore()函数接收2个参数,第1个参数 storeld是状态管理容器的名称,也是 store的唯一id，必须传人;第2个参数是一个配置对象，包含 state、getters 和 actions 属性，具体解释如下。
① state:用于管理数据,它被定义为一个返回初始状态的函数，使得 Pinia 可以同时支持服务器端和客户端。
② geuers:用于获取数据之前进行再次编译，从而得到新的数据，类似于 Vue 中的computed 属性。
③ actions:用于定义事件处理方法，可以进行同步或异步操作。
在sre\mainjs 文件中创建并挂载 Pimia 实例，具体代码如下。
import { createApp } from 'vue'
import'./style.css'
import ( createpinia } from 'pinia'
import App from './App.vue'
const app = createApp (app)
const pinia = createPinia()// 创建 Pinia 实例
app.use (pinia)//导入Pinia 实例
app.mount('#app' )在上述代码中，第3行代码用于导人 createPinia()函数;第6行代码使用 createPinia()数创建一个 Pinia 实例;第7行代码使用 app.use()方法挂载 Pinia 实例。
四.Pinia 计数器案例
具体步骤如下。
① 清空 srepp.vue 文件中的内容，重新编写如下代码。
<template>
<p>
每次增加1:<button @click="increment">+</button>
数字:0
</p>
<P>
每次减少1:<button @click="reduction">-</button>
数字:100
</p>
</template>
<script setup>
const increment=()=>{}
const reduction=()=>{}
</script>
<style>
button {
background-color: aquamarine;
}
</style>② 编写 src\store\index.js 文件，具体代码如下。
import { defineStore }from 'pinia'
export const useStore = defineStore('storeId',{
state:()=>{
return {
add:0，
reduce: 100
}
},
getters:{},
actions:{
increase(){
this.add++
},
decrease() {
this.reduce--
}
}
})在上述代码中，第3~8行代码在 state 中定义了初始数据;第 10~17行代码在 actions中定义了 inerease()方法和 decrease()方法。
③ 修改 src\App.vue 文件，调用 actions 中定义的increase( )方法和 decrease( )方法，具体代码如下。
<script setup>
import { useStore }from './store'
import { storeToRefs ) from 'pinia'
const store =useStore()
const { add,reduce)= storeToRefs(store)
const increment=()=>{
store.increase()
}
const reduction=()=>{
store.decrease()
}
</script>在上述代码中，第2行代码导入了 useStore()函数;第3行代码导人了 storeToRefs()函数;第4行代码通过 useStore()函数获取 store 对象;第5行代码用于调用 storeToRefs()函数将 store 对象转换为响应式数据，并解构出了 add 和 reduce 数据;第7行代码调用了 stor对象的 increase()方法;第10行代码调用了 store 对象的 decrease( )方法。
④在<template>模板中输出 state 中的数据，显示在页面中，具体代码如下。
<p>
每次增加1:<button @click="increment">+</button>
数字:{{ add }}
</p>
<p>
每次减少1:<button @click="reduction">-</button>
数字:{{reduce})
</p>在上述代码中,第3行代码通过{{ add))输出 state 中定义的 add 变量的值;第7行代码通过{{reduce }}输出 state 中定义的 reduce 变量的值。
保存上述代码，在浏览器中访问 htp://127.0.0.1:5173/，页面初始效果与图 1 所示的效果相同。单击一次“+”按钮后,运行效果与图 2所示的效果相同。刷新并单击一次“-按钮后，运行效果与图 3所示的效果相同。
图1
图2
图3
感谢大家的阅读，如有不对的地方，可以私信我，感谢大家！
