1. Pinia概述简介Pinia 是 Vue 官方新一代状态管理库现已正式替代 Vuex 成为 Vue3 标准全局状态管理方案。作用存放全局共享数据的工具三层核心结构State全局响应式数据源等同于组件data存储共享原始数据可直接修改或通过$patch批量更新。Getters派生计算状态等同于组件computed基于 state 做数据加工、缓存自动缓存依赖。Actions业务逻辑方法等同于组件methods同步、异步操作统一放在 Actions可发请求、修改 state、跨 Store 调用DevTools 可完整追踪操作记录。常用场景登录后的用户信息、购物车商品所有页面都要用不用来回传值统一存在这里管理。2. 快速入门安装npm install pinia定义store/stores/counter.tsimport{defineStore}frompiniaimport{ref,computed}fromvue// StoreexportconstuseCounterStoredefineStore(counter,(){// 组合式写法 State 可以有多个constcountref(0);// GetterconstdoubleCountcomputed(()count.value*2);// Action// 箭头函数写法constadd(){count.value;}// 普通函数写法functionreset(){count.value0;}// 必须暴露出去才能使用return{count,doubleCount,add,reset};})组件中使用templatedivp数值{{counter.count}}/pp两倍数值{{counter.doubleCount}}/pbuttonclickcounter.add1/buttonbuttonclickcounter.reset重置/button/div/templatescript setup// 引入需要的Storeimport{useCounterStore}from/stores/counter// 获取Store实例constcounteruseCounterStore()/script3. 学习总结Pinia的三大核心结构、且可以用来替代VueX管理全局数据。使用步骤npm安装、创建仓库storestate、action、getter最后return暴露出来、在组件中引用并使用