Pinia的简要概述

古其

已于 2024-06-14 11:37:29 修改

阅读量987

点赞数 17

文章标签： vue.js 前端 javascript

于 2024-06-14 11:36:20 首次发布

本文链接：https://blog.csdn.net/2202_75900709/article/details/139675806

版权

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所示的效果相同。