Pinia是一个用于vue的状态管理库，类似于vuex,是vue的另一种状态管理工具。
Pinia 是 Vue 的存储库，它允许跨组件/页面共享状态。实际上，Pinia就是Vuex的升级版，官网也说过，为了尊重原作者，所以取名pinia，而没有取名Vuex，所以大家可以直接将Pinia比作为vue3的vuex。 很多人也将Pinia称为vuex5。
在Pinia中，每个store都是单独存在，一同进行状态管理。
一：pinia与vuex的区别
与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。
1.mutations 不再存在。
2.无需创建自定义复杂包装器来支持 TypeScript，所有内容都是类型化的，并且 API 的设计方式尽可能利用 TS 类型推断。
3.不再需要注入、导入函数、调用函数、享受自动完成功能！
4.无需动态添加 Store，默认情况下它们都是动态的
5.不再有 modules 的嵌套结构
二：基本配置和使用
1、安装
可以用自己常用的包管理器安装，例如：
pnpm install pinia yarn add pinia npm install --save pinia2、 基本使用
①：创建pinia实例并挂载
在main.ts中：
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引用
import {createPinia } from 'pinia'
// 创建Pinia实例
const Pinia = createPinia()
// 挂载pinia
createApp(App).use(Pinia).mount('#app')②： 配置状态管理专用文件，在根目录下创建一个store文件，并新建一个index.ts文件
③：通过import将下载好的pinia引入到index.ts中并导出 并使用defineStore创建store对象
import { defineStore } from 'pinia'
//
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('main', {
})三：pinia基础特性
1、state
创建state
import { defineStore } from 'pinia'
// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('main', {
state:()=>{//创建状态
return {
text:"我是pinia的一个状态变量"
}
}
})组件中使用
<template>
<div>
<!-- 3.使用 -->
我是测试pinia的组件--{{store.text}}
</div>
</template>
<script lang="ts" setup>
// 1.引用
import 名字 from "你pinia编写的文件"
// 2.创建
let store=名字()
</script>
<style>
</style>
（1）默认情况下，通过 store 实例访问 state，可以直接读取和写入，
如：@click="store.count++"
（2）通过 store.$reset() 方法可以将 state 重置为初始值。
（3）除了直接通过 store 修改 state，还可以通过 store.$patch() 方法提交多个更改。
（4）可以通过 store.$subscribe() 订阅 State 的变化，在 patches 修改之后订阅只会触发一次。默认情况下，订阅绑定到添加它的组件，当组件卸载时，它们将自动删除，也可以配置将其保留。
2、getters
（1）Getters 属性的值是一个函数，接受 state 为第一个参数，目的是鼓励使用箭头函数。 （2）非箭头函数会绑定 this，建议仅在需要获取整个 store 实例的场景使用，且需要显式定义函数返回类型。
import { defineStore } from 'pinia'
export const useStoreb = defineStore('mainb', {
state:()=>{
return {
text:"abcdefg"
}
},
actions:{
},
getters:{
newtext(){
return this.text.toUpperCase()
}
}
})3、actions--修改
修改方式一： 组件内创建触发。
① store.你在pinia中actions中创建的修改函数
<template>
<div>
我是测试pinia的组件--{{store.text}}
<button @click="update()">点我修改</button>
</div>
</template>
<script lang="ts" setup>
import {useStore} from "../store/index"
let store=useStore()
let update=()=>{
// 调用修改方法 store.你在pinia中actions中创建的修改函数
store.TEXT_UPDATE()
}
</script>
<style>
</style>② pinia中创建修改方法
import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
state:()=>{
return {
text:"我是pinia的一个状态变量"
}
},
actions:{
TEXT_UPDATE(){//修改方法
this.text="我变了"
}
}
})修改方式二：$patch
//在组件内调用$parch 便可直接修改数据
let update=()=>{
store.$patch({
//你要修改state的数据: 你要修改的value值
text:"我是$patch直接修改"
})
}
//方式2
let update=()=>{
store.$patch((state)=>{
console.log(state)
state.text="你又被改了"
})
}store是一个对象，在数据很多的情况下，那么我们可以使用解构。但是使用解构之后，数据会失去响应式，这个时候我们可以使用 storeToRefs来保持数据的响应式。
<template>
<div>
我是测试pinia的组件--{{text}}
<button @click="update()">点我修改</button>
</div>
</template>
<script lang="ts" setup>
import {useStore} from "../store/index"
import {storeToRefs} from "pinia"
let store=useStore()
// 解构取值
// let {text}=store
// storeToRefs 让数据快去取出 并且不丢失响应式
let {text}=storeToRefs(store)
let update=()=>{
// 调用修改方法 store.你在pinia中actions中创建的修改函数
store.updatetext()
}
</script>
4、action--处理异步操作
在pinia中acition不但能处理同步操作 同样也可以处理异步操作
使用方式和vuex一致
在组件中：
<template>
<div>
我是测试pinia的组件--{{store.text}}
<button @click="demoAxios()">点我获取异步数据</button>
</div>
</template>
<script lang="ts" setup>
import {useStore} from "../store/index"
let store=useStore()
let demoAxios=()=>{
store.link()
}
</script>在pinia中：
import { defineStore } from 'pinia'
import $http from "axios"
export const useStore = defineStore('main', {
state:()=>{
return {
text:"我是pinia的一个状态变量"
}
},
actions:{
async link(){
try {
let data= await $http({
url:"",
method:"get"
})
//需要的操作
} catch (error) {
console.log("失败")
}
}
}
})5、$reset--重置数据
意思就是让数据恢复为state的初始值
<template>
<div>
我是测试pinia的组件--{{store.text}}
<button @click="update()">点我修改</button>
<button @click="reset()">点我恢复初始值</button>
</div>
</template>
<script lang="ts" setup>
import {useStore} from "../store/index"
let store=useStore()
let update=()=>{
store.updatetext()
}
let reset=()=>{
// $reset
store.$reset()
}
</script>
6、$subscribe--监听数据修改
$subscribe 监听pinia数据修改 当数据改变了 那么subscribe也会触发
<template>
<div>
我是测试pinia的组件--{{store.text}}
<button @click="update()">点我修改</button>
</div>
</template>
<script lang="ts" setup>
import {useStore} from "../store/index"
let store=useStore()
let update=()=>{
store.updatetext()
}
// 监听store数据修改
let sub=store.$subscribe((params,state)=>{
console.log("params",params);//修改的操作
console.log("state",state);//修改后的数据
})
</script>7、模块化
pinia中取消了modules。
pinia中定义模块，只需要定义多个store即可。
因为pinia没有单一数据源这个概念，在其中可以定义多个store对象 文章来源：https://www.toymoban.com/news/detail-467151.html
<template>
<div>
<h1> 第一个store：{{storeone.text}}</h1>
<h1> 第二个store：{{storetwo.text}}</h1>
</div>
</template>
<script lang="ts" setup>
// 引用第一个store
import {useStore} from "../store/index"
// 引用第2个store
import {useStoreb} from "../store/indexb"
let storeone=useStore()
let storetwo=useStoreb()
</script>四：pinia优势
综上，pinia的优点已经很明显了文章来源地址https://www.toymoban.com/news/detail-467151.html
- ts兼容性好 、不需要命名空间，可以创建多个store、mutation删掉了
- pinia只具备以下几个属性，状态、计算属性、动作
- pinia大小也会更小巧一些
到了这里，关于pinia状态管理 用法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
