《Vue企业开发实战》电子教案25-状态管理与Pinia

《网站开发技术（VUE）》·教案25第页一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目9大觅项目中插件的使用授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目9的任务2。理解跨组件共享状态的场景，掌握Pinia基本用法，能在购票相关组件间共享例如登录信息或所选演出。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务2状态管理与Pinia使用场景；Pinia安装与store；state/getters/actions基本用法教材9.2三、学情分析学生已会父子通信，但选座页、确认页、个人中心要共享同一份数据时，层层props很痛苦。本课要求会建store，两个组件能读到同一状态。四、教学目标（一）知识目标1.理解何时需要全局状态管理。2.掌握Pinia的store、state、getters、actions基本概念。3.了解在组件中使用store的方法。（二）能力目标1.能安装并注册Pinia。2.能定义一个store并在两个组件中读写。3.能说明何种数据不该放进全局。（三）素质目标1.按业务需要选型，不把所有数据塞进store。2.遵守密钥与组件使用规范。3.规范操作。五、教学重点与难点类型内容突破办法重点store的读写两页改同一count或所选票难点什么放store什么放组件内用“有没有跨页共享”判断六、教学方法与准备方法：场景驱动、对照props链、理实一体。导入用“确认页要显示选座结果，中间隔了好几层”。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入画一张隔三层的props链。提问：有没有更合适的共享方式？引出Pinia。说明第1章脚手架当时不选Pinia，现在按需引入。指出大觅哪些数据跨页。用真实层级痛点导入。明确学习目标出示目标：store能建、两组件能共享。对照目标勾画。用两页同一数据当达标。任务2讲解讲场景：登录态、所选演出、购物车。演示安装、createPinia、defineStore、组件内使用。getters类比computed，actions里改state。跟建一个user或ticketstore。接到已有组件化知识。上机练习两个路由页面共享同一状态，一处修改另一处可见。独立完成共享验证。为购票流程的跨页数据打底。小结与作业回扣：跨页再上store。预告支付/出票用二维码。保存store文件。接入最后一件常用插件。课堂检测：①什么数据适合放Pinia？②getters类似什么？③组件里如何拿到store？八、上机任务与评价练习任务要求合格标准常见问题上机1安装注册Pinia并定义store应用能启动，store文件结构正确未app.use、defineStore写错上机2两个组件读写同一状态一处修改另一处同步仍只用props层层传、未useStore过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.简述状态管理的使用场景。2.列出大觅中适合放入store的三类数据。书面作业：设计一个购票相关store的state字段；下次课抽查。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：___________________________________