---

• 本人最近在找工作，有推荐的小伙伴私我，不胜感激。

一、介绍

• 官网：https://pinia.web3doc.top/introduction.html
• Pinia 是 Vue 官方团队开发的一个全新状态管理库
• Vue2和Vue3都可以使用
• 去除了mutations，简化了状态管理的使用
• 支持TS，Vuex对TS的语法支持不是完整的
• 去除了命名空间模块，鉴于 Store 的扁平架构，“命名空间” Store 是其定义方式所固有的，因为每个store都会有唯一的store id

二、install

pnpm install pinia --save

三、store

1、创建并全局引入

• 创建src/store/index.ts

• main.ts中全局注册

// 引入pinia
import { createPinia } from 'pinia'// 挂载到vue根实例
createApp(App).use(createPinia)

2、使用

1. index.js

import {defineStore} from 'pinia'/*** 创建第1个store** userStore：容器名称* user：store的id，必须唯一*/
export const userStore = defineStore('user', {state: () => {return {user: {name: 'kimi',age: 18,honor: ['1-三好学生','1-优秀班干部','2-优秀班干部']}}},//普通函数的写法时，函数中的this代表该storegetters: {/*** 使用store** @param store* @returns*/getUserHonorNum: (store) => {return store.user.honor.length},/*** 使用本store的getters** @param store* @returns*/getUserAvgHonorNum: (store) => {return store.getUserHonorNum / 3},/*** 传入自定义参数** @param store* @returns*/getUserAvgHonorNumber: (store) => {return (year) => {return store.getUserHonorNum / year}},/*** 访问其它store中的getters** @param store* @returns*/getAppNum: (store) => {//导入其它storeconst otherStore = appStore()return otherStore.num}},//actions书写格式和methods一样，因为他不会传入任何默认参数//普通函数的写法时，函数中的this代表该storeactions: {/*** 年龄+1，异步操作，2秒之后再执行*/setAgeIncrement() {setTimeout(() => {this.user.age++}, 2000)},/*** 传入自定义参数 - 单个** @param age*/setAge(age) {this.user.age = age},/*** 传入自定义参数 - 多个** @param name* @param age*/setUser(name, age) {this.$patch((state) => {state.user.name = namestate.user.age = age})}}
})/*** 创建第2个store*/
export const appStore = defineStore('app', {state: () => {return {num: 5}},getters: {},actions: {}
})

2. 组件中使用

<script setup>
import { storeToRefs } from 'pinia'
import {userStore} from '@/store/index'//1、state
//访问state
userStoreData.user//就像setup 中的props 一样，我们不能对其进行解构，因为它会破坏响应式
const { user } = userStoreData//为了从 Store 中提取属性同时保持其响应式，可以使用pinia的storeToRefs()， 它将为任何响应式属性创建refs
const { user } = storeToRefs(userStoreData)//直接修改state中的共享状态
userStoreData.user.age++//批量修改state中的共享状态，通过调用 $patch 方法
userStoreData.$patch((state) => {state.user.name = 'sally'state.user.age++
})//通过调用store上的$reset()方法将状态重置到其初始值
userStoreData.$reset()//订阅状态，与常规的 watch() 相比，使用 $subscribe() 的优点是 subscriptions 只会在 patches 之后触发一次
userStoreData.$subscribe((mutation, state) => {/*打印一下mutation{//类型type: 'direct'、'patch object'、'patch function',//store的id，创建store的第一个参数storeId: 'user',events:{......}}*/
})//2、getters
userStoreData.getUserHonorNum
userStoreData.getUserAvgHonorNum
userStoreData.getUserAvgHonorNumber(3)//传入自定义参数
userStoreData.getAppNum//3、actions
userStoreData.setAgeIncrement()
userStoreData.setAge(20)//传入自定义参数 - 单个
userStoreData.setUser('sally',25)//传入自定义参数 - 多个
</script>