文章目录一、Pinia 核心介绍1. 核心优势2. 核心概念二、Vue 3 中配置 Pinia1. 安装2. 全局注册main.ts/main.js三、Store 定义两种风格方式 1选项式Options API兼容 Vue 2方式 2组合式Composition APIVue 3 推荐四、组件中使用script setup1. 基础使用2. 多 Store / 异步示例五、高级特性1. 状态持久化刷新不丢失2. $reset / $subscribe / $onAction六、Pinia vs Vuex核心区别七、最佳实践Pinia 是Vue 官方推荐的新一代状态管理库专为 Vue 3 设计兼容 Vue 2是 Vuex 的精神继任者。它以轻量、简洁、类型安全、模块化为核心优势彻底简化 Vue 状态管理。一、Pinia 核心介绍1. 核心优势API 极简去掉 Vuex 的mutations同步/异步逻辑统一在actions处理模块化扁平每个store天然独立、无嵌套、无命名空间冲突TS 友好原生类型推导无需额外配置极致轻量gzip 后约 1KB几乎无性能负担组合式友好完美适配 Vue 3 Composition APIDevTools 集成支持时间旅行、热更新、状态追踪SSR 支持无缝兼容服务端渲染2. 核心概念Store全局状态仓库用defineStore创建State存储响应式数据类似组件dataGetters基于 State 的计算属性类似computedActions修改 State 的方法支持同步/异步替代mutationsactions二、Vue 3 中配置 Pinia1. 安装npminstallpinia# 或yarnaddpiniapnpmaddpinia2. 全局注册main.ts/main.jsimport{createApp}fromvueimport{createPinia}frompiniaimportAppfrom./App.vueconstappcreateApp(App)constpiniacreatePinia()// 创建 Pinia 实例app.use(pinia)// 注册到 Vueapp.mount(#app)三、Store 定义两种风格方式 1选项式Options API兼容 Vue 2// src/stores/counter.tsimport{defineStore}frompinia// 第一个参数store 唯一 ID必须全局唯一exportconstuseCounterStoredefineStore(counter,{// 1. 状态必须箭头函数返回对象state:()({count:0,name:Pinia Counter}),// 2. 计算属性带缓存getters:{// 直接访问 statedoubleCount:(state)state.count*2,// 访问其他 getter 用 thisdoubleCountPlusOne():number{returnthis.doubleCount1}},// 3. 动作同步/异步修改 stateactions:{// 同步increment(){this.count},// 异步async/awaitasyncincrementAsync(delay1000){awaitnewPromise(resolvesetTimeout(resolve,delay))this.count},// 批量重置reset(){this.count0this.nameReset}}})方式 2组合式Composition APIVue 3 推荐// src/stores/user.tsimport{defineStore}frompiniaimport{ref,computed}fromvueexportconstuseUserStoredefineStore(user,(){// 1. 状态ref/reactive 定义constuserInforef({name:,age:0})consttokenref()constisLoadingref(false)// 2. 计算属性computed 替代 gettersconstisAdultcomputed(()userInfo.value.age18)constuserNamecomputed(()userInfo.value.name||未登录)// 3. 动作普通函数同步/异步functionsetUser(info){userInfo.valueinfo}asyncfunctionlogin(account,pwd){isLoading.valuetruetry{// 模拟接口请求constresawaitfetch(/api/login,{method:POST,body:JSON.stringify({account,pwd})})constdataawaitres.json()token.valuedata.token userInfo.valuedata.userreturntrue}catch(err){console.error(登录失败,err)returnfalse}finally{isLoading.valuefalse}}// 必须返回暴露给组件return{userInfo,token,isLoading,isAdult,userName,setUser,login}})四、组件中使用script setup1. 基础使用template div h2{{ counter.name }}/h2 p计数{{ counter.count }}/p p双倍{{ counter.doubleCount }}/p p双倍1{{ counter.doubleCountPlusOne }}/p button clickcounter.increment1/button button clickcounter.incrementAsync(1500)异步1/button button clickcounter.reset重置/button !-- 解构必须用 storeToRefs 保持响应式 -- p解构计数{{ count }}/p /div /template script setup import { useCounterStore } from /stores/counter import { storeToRefs } from pinia // 1. 获取 store 实例 const counter useCounterStore() // 2. 响应式解构关键 const { count, doubleCount } storeToRefs(counter) // 3. 直接修改简单场景 const setDirect () { counter.count 100 } // 4. $patch 批量修改推荐 const batchUpdate () { counter.$patch({ count: 50, name: 批量更新 }) // 函数形式复杂逻辑 counter.$patch((state) { state.count 10 state.name 函数批量 }) } /script2. 多 Store / 异步示例template div p用户{{ userStore.userName }}/p p成年{{ userStore.isAdult ? 是 : 否 }}/p button clickhandleLogin :disableduserStore.isLoading {{ userStore.isLoading ? 登录中... : 登录 }} /button /div /template script setup import { useUserStore } from /stores/user const userStore useUserStore() const handleLogin async () { const success await userStore.login(admin, 123456) if (success) alert(登录成功) } /script五、高级特性1. 状态持久化刷新不丢失安装插件npminstallpinia-plugin-persistedstate注册main.tsimport{createPinia}frompiniaimportpersistfrompinia-plugin-persistedstateconstpiniacreatePinia()pinia.use(persist)// 注册持久化Store 开启exportconstuseUserStoredefineStore(user,{state:()({token:}),persist:true,// 全量持久化localStorage// 或自定义persist:{key:app-user,// 存储 keypaths:[token],// 仅持久化 tokenstorage:sessionStorage// 切换存储}})2. $reset / $subscribe / $onAction// 重置 state选项式counter.$reset()// 监听 state 变化counter.$subscribe((mutation,state){console.log(状态变更,mutation,state)})// 监听 actionscounter.$onAction(({name,after,onError}){console.log(Action 开始,name)after(()console.log(Action 完成))onError(errconsole.error(Action 错误,err))})六、Pinia vs Vuex核心区别特性PiniaVuex 3/4核心概念state、getters、actionsstate、getters、mutations、actions异步处理actions 直接支持 async/awaitactions 提交 mutations模块化天然扁平、独立 store嵌套 modules、命名空间TS 支持原生、类型推导强需额外配置、类型弱体积~1KB较大组合式完美适配适配一般七、最佳实践按业务拆分 Storeuser、cart、setting、layout 等解构必用 storeToRefs避免丢失响应式复杂修改用 $patch批量更新、性能更优异步放 actions统一逻辑、便于调试非共享状态用组件内 ref不要滥用全局状态