单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,2022/10/3,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,2022/10/3,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,8-1 8.1 Vuex概述教学课件 Vue.js基础与应用开发实战（微课版）,8.1 Vuex,概述,8.1.1 Vuex,是什么,一份数据可以在多个组件中的使用，图,8-1,所示,E,、,F,、,I,同时都要展示,userName,。它还可能被用户修改，修改之后其他组件也要去同步的修改。,图,8-1,一份数据在多个组件中使用,图,8-1,中的,userName,怎么管理，最简单的方式是在共同的父节点去管理这些数据，也就是图,8-2,所示的,A,节点。这种通过属性的传递的方式非常脆弱，而且成本还是非常高的。,图,8-2,父节点管理方式,当状态树比较大的时候，就需要一个更加系统化的管理工具。需要动态注册响应数据，需要命名空间管理与组织数据。还希望通过插件来记录数据的更改，方便调试，这些功能都是,Vuex,要做的事情。,我们并不需要手工去完成状态管理的工作，许多流行的框架都能帮助我们管理数据状态，,Vue,的数据状态管理也有自己的官方解决方案，称作,Vuex,。其作用是帮助我们集中管理数据状态以及任何组件（无需要父子关系），也能很容易进行数据之间的交互。未使用,Vuex,与使用,Vuex,数据状态管理示意图如图,8-3,所示。,图,8-3,未使用,Vuex,与使用,Vuex,数据状态管理示意图,8.1.2,什么是“状态管理框架”？,首先分析一个简单的,Vue,计数程序。,【,实例,8-1】,使用自定义方法实现简单的,Vue,计数功能,【,操作要求,】,创建网页,0801.html,，在,data,函数中定义变量,count,，并赋初值为,1,；在,methods,方法中定义方法,increment(),，该方法用于实现计数功能；在,template,模板中按钮的,click,事件绑定方法,increment(),，并显示计数。,【,实现过程,】,创建网页,0801.html,，在该文件中编写以下代码实现要求的功能。,var vm=new Vue(,el:#app,/state,data(),return,count:1,/view,template:,count,/actions,methods:,increment(),this.count+,),【,实现过程,】,状态管理简单的理解就是统一管理和维护各个,vue,组件的可变化状态。,vue,是单向数据流的，它的状态管理一般包含如下几部分：,（,1,）,state,：驱动应用的数据源，一般指,data,中返回的数据。,（,2,）,view,：以声明方式将,state,的数据映射到视图，一般是指模板。,（,3,）,actions,：响应在,view,上的用户输入导致的状态变化。,【,实现过程,】,Vuex,是一种状态管理模式，,State-View-Actions,之间也是单向数据流，“单向数据流”示意图如图,8-4,所示。,图,8-4 State-View-Actions,之间单向数据流示意图,【,实现过程,】,但是当我们的应用遇到多个组件共享状态时候，那么单向数据流可能不太满足我们的需求。比如如下几个方面：,（,1,）多个视图依赖于同一状态。,（,2,）来自不同视图的行为需要变更同一状态。,由于传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。我们也会经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。,【,实现过程,】,因此我们可以把组件的共享状态提取出来，作为全局单例模式来管理，因此,vuex,产生了。,vuex,的主要优点是解决了组件之间共享同一状态的问题。,在这种模式下，组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为。通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，代码将会变得更结构化且易维护。这就是,Vuex,的基本原理。,8.1.3 Vuex,的运行机制,Vuex,是可以独立的提供响应式数据的，它和组件没有强相关的关系。,Vuex,通过,State,提供数据驱动视图,View,，视图通过,Dispatch,派发,Actions,，在,Actions,中可以进一步完成异步操作，可以通过,ajax,接口去后端获取想要的数据，然后通过,Commit,的形式，提交给,Mutations,，由,Mutations,来最终更改,State,。这就是,Vuex,的运行机制，示意图如图,8-5,所示。,图,8-5 Vuex,的运行机制示意图,为什么要经过,Mutations,呢？原因是要在,Devtools,里面记录数据的变化，即在在插件中记录数据的变化，这样通过插件就可以进一步调试。所以说,Mutations,需要一个同步的操作，如果有异步的操作，就需要在,Actions,中处理。,图,8-5,代表着整个,Vuex,框架的运行流程，如图所示，,Vuex,为,Vue Components,建立起了一个完整的生态圈，包括开发中的,API,调用一环。围绕这个生态圈，简要介绍一下各模块在核心流程中的主要功能：,（,1,）,Vue Components,：,Vue,组件,HTML,页面上，负责接收用户操作等交互行为，执行,Dispatch,方法触发对应,Action,进行回应。,（,2,）,Dispatch,：操作行为触发事件处理方法，是唯一能执行,Action,的方法。,（,3,）,Actions,：操作行为处理模块。负责定义事件回调方法，处理,Vue Components,接收到的所有交互行为，并且,Actions,是异步的。支持多个同名方法，按照注册的顺序依次触发。向后台,API,请求的操作就在这个模块中进行，包括触发其他,Action,以及提交,Mutations,的操作。该模块提供了,Promise,的封装，以支持,Action,的链式触发。,（,4,）,Commit,：状态改变提交操作方法。对,Mutations,进行提交，是唯一能执行,Mutations,的方法。,（,5,）,Mutations,：状态改变操作方法。是,Vuex,修改,State,的唯一推荐方法，其他修改方式在严格模式下将会报错。,Mutations,方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些,hook,（钩子）暴露出来，以进行,State,的监控等。,（,6,）,State,：页面状态管理容器对象。集中存储,Vue components,中,data,对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用,Vue,的细粒度数据响应机制来进行高效的状态更新。,（,7,）,Getters,：,State,对象读取方法。图中没有单独列出该模块，应该被包含在了,render,中，,Vue Components,通过该方法读取全局,state,对象。,Vue,组件接收交互行为，调用,Dispatch,方法触发,Action,相关处理，若页面状态需要改变，则调用,Commit,方法提交,Mutations,修改,State,，通过,Getters,获取到,State,新值，重新渲染,Vue Components,，程序界面随之更新。,快乐学习！高效学习！,祝学习进步！,