Spring Boot+Vue全栈应用开发实践 课件23 Pinia 状态管理

罗荣良Pinia状态管理本节学习目标1.理解为什么需要全局状态管理(痛点分析)2.掌握Pinia的环境搭建与配置3.核心概念实战：State,Actions,Getters4.难点：掌握storeToRefs保持响应性5.实战：实现数据持久化(刷新页面数据不丢失)痛点：组件通信的“噩梦”属性透传：GrandParent->Parent->Child->GrandChild。数据像接力棒一样层层传递，中间组件不需要也被迫接收。结论：维护困难，耦合度高。解决方案：全局状态管理Pinia作为一个独立的Store(仓库)。组件A修改Store，组件B自动感知变化。核心理念：单一数据源。Vuex(旧)：State,Getter,Mutation,Action,Module。Pinia(新)：State,Getter,Action。优势：1.抛弃了复杂的Mutation。2.完美支持TypeScript。3.体积极小(1KB)。PiniavsVuex第一步：安装与挂载命令：npminstallpinia代码(main.js)：

核心概念三剑客定义一个Store，其实就在写一个特殊的组件：State：就是组件里的data（ref/reactive），用来存数据。Getters：就是组件里的computed，用来根据数据计算新值（比如根据token判断是否登录）。Actions：就是组件里的methods，用来写业务逻辑（比如发送登录请求、修改State）。定义Store(Setup语法)代码演示：State：管理数据场景：存储用户信息userInfo和

令牌token。代码：consttoken=ref('')注意：State必须return出去才能被外部使用。Actions：修改业务逻辑场景：登录逻辑。特点：Actions支持异步操作(async/await)。代码：场景：判断用户是否登录。特性：具有缓存功能，依赖不变不重新计算。代码：Getters：智能计算组件中使用Store代码：访问：{{userStore.username}}调用：userStore.setToken('abc-123')关键坑：解构丢失响应性错误写法：

正确写法：

注意：Actions可以直接解构，State不行。问题：浏览器一刷新，Store里的数据就清空了。解决：pinia-plugin-persistedstate配置：{persist:true}效果：自动把数据存入localStorage/sessionStorage。进阶：数据持久化(Persistence)实战场景：全栈登录流程前端登录页，用户输入账号密码。前端调用Axios发送POST请求给SpringBoot。SpringBoot验证通过，返回一个JWTToken。前端拿到Token，调用userStore.setToken(token)。Pinia自动把Token存入State和LocalStorage。用户跳转到首页。首页组件通过userStore.token验证用户身份。这就是现代全栈应用的黄金流程。本节小结与作业小结：Vue3的状态管理神器Pinia。我们学习了Setup语法的Store定义，理解了State/Getters/Action、storeToRefs的用法。作业：