day14_电商项目_vuex.ppt

Vue_day14,Contents,目,录,Vuex概述 Vuex基本使用 待办事项案例,Contents,目,录,Vuex概述 Vuex基本使用 待办事项案例,了解今天的学习目标是vuex,要点提示,学习目标,掌握程度：了解,1.1 学习目标,了解vuex是用来干什么的,要点提示,vuex基础-vuex概述,掌握程度：了解,1.2 vuex概述,了解如何创建一个vuex项目,要点提示,vuex基础-vuex的基本使用,掌握程度：了解,1.3 vuex的基本使用,了解布局完成计数器项目,要点提示,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.6 action的基本使用,了解如何在使用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 完成添加事项的操作,