前端技术24vuex核心属性

课题第8章vuex第二节vuex核心属性授课时间第十周教学目的掌握vuex实例掌握vuex的核心属性教学重点vuex的核心属性教学难点Vuex的modules属性使用教学过程教学环节教学内容教学方法、手段及时间分配课前提问讲授新课课堂练习讲授新课课堂实践总结提问：vuex的作用是什么？它是vue自带的吗？为什么要使用vuex?第一节vuex的核心属性一、vuex的核心属性Vuex里面包含：1.StateVuex使用单一状态树，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源(SSOT)”而存在。这也意味着，每个应用将仅仅包含一个store实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。详细讲解State是Vuex的基本数据存储对象，类似组件的data，但它是全局的，用于存储应用中共享的数据状态。例如在上述待办事项列表应用中，所有任务数据可以存储在State中。演示如何在Vuex的Store中定义State，如：state:{tasks:[],filter:'all'}。讲解在组件中通过this.$store.state.属性名访问State数据，以及使用mapState

辅助函数将State映射为计算属性，简化访问方式，如：computed:{...mapState(['tasks','filter'])}。2.Getters是用来取数据，得到数据的，可以对拿到的数据做一些处理，例如格式化、过滤数据。3.Mutations更改Vuex的store中的状态的唯一方法是提交mutation。Vuex中的mutation非常类似于事件：每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。练习：给学生一个简单的项目需求，让他们在小组内讨论并编写代码实现以下功能：定义一个包含用户信息的State，包括用户名、年龄和邮箱；创建一个Getter用于获取用户的全名（假设用户名由姓和名组成）；在组件中使用mapState和mapGetters获取并展示这些信息。教师巡视各小组，及时给予指导和解答疑问。4.ActionsActions类似于Mutations，不同在于：Actions提交的是Mutations，而不是直接变更状态。Actions可以包含任意异步操作。5.Modules由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store对象就有可能变得相当臃肿。为了解决以上问题，Vuex允许我们将store分割成模块（module）。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。练习：给出一个新的项目场景，例如一个电商应用的商品购物车功能，要求学生在小组内合作完成以下任务：定义商品列表的State、获取商品总价的Getter、添加商品到购物车的Mutation、从服务器获取商品列表并添加到购物车的Action。然后让学生在组件中展示商品列表、购物车商品数量和总价，并实现添加商品到购物车的功能。教师在学生练习过程中提供必要的指导和技术支持。总结：总结本节课学习的Mutations和Actions的重点内容，对比它们与State和Getters的区别与联系，强调在实际应用中如何根据业务需求选择合适的方式进行状态更新和管理。提问学生关于这两个概念的理解和应用，确保学生掌握了基本的使用方法和原理。第一课时提问（5分钟）讲授（30分钟）实践（10分钟）第二课时讲授（25分钟）实践（15分钟）总结（5分钟）课堂小结作