Vue.js3前端开发基础及项目化应用教案单元9状态管理——Vuex.docx

《Vue.js3前端开发基础及项目化应用教案单元9状态管理——Vuex.docx》由会员分享，可在线阅读，更多相关《Vue.js3前端开发基础及项目化应用教案单元9状态管理——Vuex.docx（9页珍藏版）》请在优知文库上搜索。

1、Vue.js前端开发基础及项目化应用教学设计课程名称：Vuejs前端开发基础及项化应用授课年级：授课学期：学年第一学期教师找名：2023年09月09日课题名称单元9状态管理Vuex计划学时6学时内容分析针对复杂逻辑中，仅通过组件通信或是全局定义已无法适应需要，Vue提供了状态管理VUeX来处理组件间的共享数据（状态）。本单元将介绍状态管理VUeX插件的安装，Vuex状态管理模式，VUeX核心属性，以及VUeX管理共享状态的具体方法和应用。通过在“记录用户浏览历史”任务中应用Vuex,帮助学习者进一步理解状态管理模式，并掌握stategetters,mutationsactions等属性的应用方

2、法。教学目标及基本要求1 .理解Vuex状态管理模式2 .能够安装和使用Vuex3 .能够利用store实例存储和更新共享状态4 .能够应用Vuex管理共享状态教学重点1 .能够利用store实例存储和更新共享状态2 .能够应用Vuex管理共享状态教学难点能够应用Vuex管理共享状态教学方式教学采用教师使用PPT讲解和案例示范相结合的方式教学过程第一课时（状态管理模式，VlleX安装与使用）一、创设情境，引入VlleX状态管理1.教师通过应用场景描述，引出共享状态管理的概念。当大型项目中，有多个组件需要共享某些数据时，因组件间错综复杂的关系，会使得组件间通信代码的编写和维护也随之变得更为困难。

3、VUe提供的Vuex能够很好地对共享数据进行统一管理，它就像一个专门管理数据的仓库，使得组件间的数据共享更为简单高效。2.明确学习目标。 了解单向数据流概念 了解状态管理模式 掌握Vuex的安装和使用方法二、进行重点知识的讲解1.教师根据课件，介绍单向数据流原理，并通过代码进行演示。（1）单向数据流单向数据流是指只能从一个方向来修改状态的数据流。（2）使用案例讲解单向数据流的实现。2 .教师根据课件，讲解状态管理模式的工作机制。（1）状态管理模式概念Vuex的核心思想是采用StOre（容器）管理组件间共享的一组状态。（2）状态管理模式的核心属性属性名描述state用于存储状态getters类似

4、于VUe组件的计算属性，用于市新处理state并返回处理结果mutations更新State的唯一途径，目使用同步方式actions定义state的异步方式的修改操作modules定义StOre的子模块（3）状态管理模式的工作流程3 .教师根据课件，讲解VUeX安装和使用方法，并使用代码进行演示。（1）使用CDN方式安装VUeX（2） VUeX使用方法通过例9-2讲解Vuex应用过程。三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括单向数据流、Vuex状态管理模式的核心属性,Vuex状态管理模式的工作流程,Vuex安装步

5、骤，Vuex应用方法。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第二课时（Vuex核心属性：state和getters）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了单向数据流，VUeX状态管理模式，VUeX状态管理模式的核心屈性、工作流程，VUeX的安装与使用方法。接下来，本节课将通过实例讲解VUeX核心属性中的state和getters的使用方法。3 .明确学习目标。

6、 掌握State的使用方法 掌握getters的使用方法二、进行重点知识的讲解1 .教师根据课件，介绍SIaIe的作用和使用方法，并使用代码进行演示。（1）state的作用。state用于存储状态。2 2）State使用方法，并使用代码进行演示。/直接读取方式/辅助函数方式2.教师根据课件，介绍getlers的作用和使用方法，并使用代码进行演示。（1） getters的作用。getters可以理解为store实例的计算属性。（2） getters使用方法，并使用代码进行演示。/直接读取方式/辅助函数方式三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总

7、结本节课需要（解的statesgetters作用，state和getters的多种使用方法，并了解各自的应用场景。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第三课时（VlIeX核心属性：mutationsNactionsmodules）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍rVuex核心属性中的state和getters的使用方法。接下来，本节课将通过实例讲解VUe

8、X其他核心属性，包括mutations、actions和modules的使用方法。3 .明确学习目标。 掌握mutations的使用方法 掌握actions的使用方法 掌握modules的使用方法二、进行重点知识的讲解1.教师根据课件，介绍mutations的作用和使用方法，并使用代码进行演ZpCo（1）mutations的作用。mutations用于State中状态的修改，并且是唯一的更新state的途径。（2）mutations使用方法，并使用代码进行演示。使用步骤如下：/在store实例中创建mutations对象，注册事件/在需要更新state中状态之处,通过提交mutations触发

9、某个事件类型的回调函数的执行2.教师根据课件，介绍actions的作用和使用方法，并使用代码进行演示。（1）actions的作用。actions用于间接进行State中状态的修改。2 2）actions使用方法，并使用代码进行演示。使用步骤如下：J在store实例中创建actions对象，注册事件,在需要更新state中状态之处，通过dispatch函数以分发方式触发事件回调函数3 .教师根据课件，介绍modules的作用和使用方法，并使用代码进行演示。（1） modules的作用。modules用于将store实例分割为多个模块，每个模块就相当于一个子store,可以拥有store的所有属性

10、。（2） modules使用方法，并使用代码进行演示。使用步骤如下：J在StOre实例中创建modules对象，注册子模块/在每个广模块中，设置namespaced属性值为true的方式，使各模块拥有自己的命名空间/使用模块的功能时，也需要指明其所属命名空间三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要了解的mutationsactions和modules作用，mutations、actions和modules的使用方法,并了解各自的应用场景。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度

11、，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第五课时（Vuex在实际项目中的应用）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了VUeX核心属性，包括mutations、actions和modules的作用以及使用方法。接下来，本节课将通过实际应用项目，来进步深入理解Vuex状态管理模式的工作流程，并掌握Vuex的应用方法。3 .明确学习目标。 理解Vuex状态管理模式 掌握Veux的五个核心属性的使用方法二、进行重点知识的讲解1.教师根据课件，介绍项目8一用户登录

12、及注册的需求描述、实现思路和代码实现。（1）需求描述为了了解用户对网站的使用情况，需要记录用户登录后浏览过的页面，保存用户行为痕迹，以便分析网站各栏目受关注的程度。（2）实现思路/将首页、登录/注册、名城诗词、旅游信息和会员中心部分均构建成局部组件，并将其作为根组件的子组件。在首页上设置“浏览历史”链接，以获取用户浏览历史页面信息。/采用Vuex来存储、记录用户浏览过的页面。创建store实例，在state中定义一个数组，用于记录用户浏览的页面（即跳转路由的名字）；在getters中定义读取数组的计算属性；在mutations中定义添加浏览页面的函数；在actions中定义模拟异步处理，实现提

13、交mutationso/通过路由管理器，实现不同页面间的跳转。创建路由管理器实例；定义全局前置守卫，判断目标路由是否满足登录要求，如果满足则跳转到目标路由，否则跳转到登录路由，同时显示来源路由；定义全局后置守卫。其功能是，当路由跳转完成时，将该路由添加到state的数组中。（3）功能实现任务9-1构建页面布局任务9-2实现浏览历史的记录和获取功能三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括进步理解VUeX状态管理模式的工作流程，掌握Vuex核心属性的使用方法，Vuex核心属性的应用过程。2 .布置随堂练习，检查学生掌

14、握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第六课时（项目实践）项目实践主要针对本单元中需要重点掌握的知识点，通过项目功能实现来加强概念的理解，熟悉并掌握编程知识点的应用，通过项目实践可以考察同学对知识点的掌握情况和应用能力。题目：请利用Vuex实现用户登录信息共享功能。创建一个程序，构建index和main两个页面，用户进入index页面，输入登录信息，登录成功后可跳转至main页面；用户进入main页面需要判断用户是否登录，如果已登录则进入main页面，否则跳转到index页面。形式：单独完成要求：利用本单元中的知识点，实现项目需求对应的功能，并且程序能够正常运行。考题和习题见教材单元9配套的习题教学后记