10vuex day14_电商项目_vuex

Vue day14 Contents 目 录 Vuex概述Vuex基本使用待办事项案例 Contents 目 录 Vuex概述Vuex基本使用待办事项案例 了解今天的学习目标是vuex 要点提示 学习目标 掌握程度 了解 1 1学习目标 了解vuex是用来干什么的 要点提示 vuex基础 vuex概述 掌握程度 了解 1 2vuex概述 了解如何创建一个vuex项目 要点提示 vuex基础 vuex的基本使用 掌握程度 了解 1 3vuex的基本使用 了解布局完成计数器项目 要点提示 vuex基础 初始化计数器项目的基本结构 掌握程度 了解 1 4初始化计数器项目的基本结构 练习 创建一个计数器的Vuex项目 提示 按照步骤完成计数器项目的初始化A 创建一个Vuex项目B 在项目中创建并布局Addition vue组件C 在项目中创建并布局Subtraction vue组件 8分钟 1 4初始化计数器项目的基本结构 案例 初始化计数器项目 Contents 目 录 Vuex概述Vuex基本使用待办事项案例 了解使用this store state访问数据的方式 要点提示 vuex基础 定义并访问全局共享的数据 掌握程度 了解 2 1定义并访问全局共享的数据 了解使用mapState将数据映射成计算属性访问数据 要点提示 vuex基础 组件访问state中数据的第二种方式 掌握程度 了解 2 2组件访问state中数据的第二种方式 了解一般情况下不应该使用state修改数据 应该使用mutations修改数据 要点提示 vuex基础 学习mutation的基本使用 掌握程度 了解 2 3学习mutation的基本使用 了解如何在使用mutations时携带参数 要点提示 vuex基础 在触发mutation的时候携带参数 掌握程度 了解 2 4在触发mutation的时候携带参数 了解使用mapMutations将mutations映射成methods中的方法 要点提示 vuex基础 触发mutation的第二种方式 掌握程度 了解 2 5触发mutation的第二种方式 练习 使用state保存数据使用mutations修改数据 提示 按步骤完成操作 A 使用store js中的state保存数据 在组件中使用插值表达式或者计算属性展示数据B 在store js中的mutations中添加方法以修改数据 在组件中调用方法完成修改数据的操作 10分钟 2 5触发mutation的第二种方式 案例 编写计数器案例 了解actions用来完成异步操作 要点提示 vuex基础 action的基本使用 掌握程度 了解 2 6action的基本使用 了解如何在使用actions时携带参数 要点提示 vuex基础 在触发action的时候携带参数 掌握程度 了解 2 7在触发action的时候携带参数 了解使用mapActions将actions映射成methods中的方法 要点提示 vuex基础 触发action的第二种方式 掌握程度 了解 2 8触发action的第二种方式 练习 使用actions完成异步操作 提示 按步骤完成操作 A 在store js中的actions中添加异步操作的方法并调用mutations的方法修改数据B 在组件中调用actions中的方法 5分钟 2 8触发action的第二种方式 案例 编写计数器案例 上午复习 Vue第十四天 上午复习 当我们需要在组件中访问state中保存的数据时 我们可以编写代码this store state 全局数据名称来访问保存的数据 当我们需要在组件中修改state中保存的数据时 不能直接使用state进行修改 而是必须通过mutations提供的方法来进行修改 通过this mit 方法名 参数 的方式调用方法当我们需要进行异步操作时 需要通过mactions提供的方法进行异步操作 并在方法内部调用mutations提供的方法来进行修改 上午复习 Vue第十四天 上午复习 当我们需要在组件中访问state中保存的数据时 我们可以编写代码this store state 全局数据名称来访问保存的数据 当我们需要在组件中修改state中保存的数据时 不能直接使用state进行修改 而是必须通过mutations提供的方法来进行修改 通过this mit 方法名 参数 的方式调用方法当我们需要进行异步操作时 需要通过actions提供的方法进行异步操作 并在方法内部调用mutations提供的方法来进行修改 了解如何使用getters添加计算属性 要点提示 vuex基础 介绍getter的使用 掌握程度 了解 2 9介绍getter的使用 Contents 目 录 Vuex概述Vuex基本使用待办事项案例 了解如何初始化项目 要点提示 vuex案例 新建项目并初始化基本结构 掌握程度 了解 3 1新建项目并初始化基本结构 了解如何使用axios请求数据并渲染展示 要点提示 vuex案例 动态加载任务列表数据 掌握程度 了解 3 2动态加载任务列表数据 了解如何将文本框的值与store中的数据同步 要点提示 vuex案例 实现文本框与store数据的双向同步 掌握程度 了解 3 3实现文本框与store数据的双向同步 练习 初始化项目获取list json中的数据并渲染展示将文本框的值与store js中的inputValue同步 提示 步骤如下 A 创建一个Vuex项目B 使用axios请求list json中的数据并渲染展示C 将文本框的值与store js中的inputValue进行绑定D 当文本框中的值发生改变时 调用mutations中的方法改变inputValue 10分钟 3 3实现文本框与store数据的双向同步 案例 初始化项目 了解如何完成添加事项 要点提示 vuex案例 完成添加事项的操作 掌握程度 了解 3 4完成添加事项的操作 了解如何完成删除事项 要点提示 vuex案例 完成删除任务事项的操作 掌握程度 了解 3 5完成删除任务事项的操作 了解如何通过 checked绑定复选框的选中状态 要点提示 vuex案例 动态绑定复选框的选中状态 掌握程度 了解 3 6动态绑定复选框的选中状态 了解如何修改事项的状态值done 要点提示 vuex案例 修改任务事项的完成状态 掌握程度 了解 3 7修改任务事项的完成状态 练习 完成添加 删除待办事项完成选中事项更改事项状态 提示 按步骤完成操作 A 在组件中添加事件以及事件处理函数B 在store js中添加对应的mutations方法以完成添加 删除 状态改变等操作C 使用commit调用对应的方法完成操作 10分钟 3 7修改任务事项的完成状态 案例 完善待办事项案例 了解如何显示未完成事项数 要点提示 vuex案例 使用getters统计未完成的任务条数 掌握程度 了解 3 8使用getters统计未完成的任务条数 了解如何清除已经完成的事项 要点提示 vuex案例 清除已完成的任务 掌握程度 了解 3 9清除已完成的任务 了解如何在用户点击时切换选项卡的显示效果 要点提示 vuex案例 动态切换按钮的高亮效果 掌握程度 了解 3 10动态切换按钮的高亮效果 了解如何设置getters来显示用户点击的选项卡对应的数据 要点提示 vuex案例 实现列表数据的动态切换 掌握程度 了解 3 11实现列表数据的动态切换 练习 完成待办事项 提示 按步骤完成操作 A 在组件中添加事件以及事件处理函数B 在store js中添加对应的mutations方法以完成删除已完成事项操作C 使用commit调用对应的方法完成操作D 在store js中添加getters方法以返回待办事项数 以及用户点击选项卡对应的数据 10分钟 3 11实现列表数据的动态切换 案例 完成待办事项案例 今日复习 当我们需要在组件中访问state中保存的数据时 我们可以编写代码this store state 全局数据名称来访问保存的数据 当我们需要在组件中修改state中保存的数据时 不能直接使用state进行修改 而是必须通过mutations提供的方法来进行修改 通过this mit 方法名 参数 的方式调用方法当我们需要进行异步操作时 需要通过mactions提供的方法进行异步操作 并在方法内部调用mutations提供的方法来进行修改当我们需要展示某些数据时 我们可以使用getters来提供的对应的方法返回需要的数据 vue第十四天 今日复习 今日复习 当我们需要在组件中访问state中保存的数据时 我们可以编写代码this store state 全局数据名称来访问保存的数据 当我们需要在组件中修改state中保存的数据时 不能直接使用state进行修改 而是必须通过mutations提供的方