Vue简单实例——Vuex

简单介绍：

我们在接触一个新东西的时候，首先需要来了解他是什么：

Vuex是专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任何组件间的通信

这里有几个关键词：

首先，Vuex是一个插件，而且是一个Vue官方的插件，对于插件，我们的使用步骤就非常的明确了：

1.首先下载，无论是使用npm或者是js文件的形式都是要下载：

npm install vuex@next --save

2.然后在mian.js中进行使用，然后在VM实例中添加新的节点

状态：也就是在组件中进行共享的数据

管理：就是对数据进行读写的操作

什么时候使用Vuex？

1.多个组件依赖于同一状态

2.来自不同的组件的行为需要变更为同一状态

理解就是：当我们的多个组件的不同行为需要对同一数据进行读写操作的时候，我们会选择使用vuex

与全局事件总线的对比：

既然我们之前说过，Vuex也是一种组件间通信的方式，且适用于任何的组件，那就不得不让我们联想到我们之前学习过的全局事件总线，那么就让我们从全局事件总线逐渐过渡到Vuex中：

全局事件总线图示：

 （图片来源自尚硅谷Vue教程，讲师张天禹）

全局事件总线基本理念：

在全局事件总线中，我们添加了一个vue属性叫做$bus，它的值就是一个Vue实例对象，然后所有的监听和触发自定义指令的动作都由这个bus来完成，当我们设置的自定义事件被触发的时候，会在触发端携带数据，在监听端，监听同一个自定义事件，并设置回调。

这么写肯定是没有问题的，也是可以是实现Vuex的功能的，无非就是多个组件监听同一个自定义事件呗，但是这么多的线，肯定是很乱，尤其是当组件非常多的时候，我们就很容易就分不清那个对那个，所以Vuex就可以帮我们稍微解决一下这个问题

Vuex图式：

 （图片来源自尚硅谷Vue教程，讲师张天禹）

Vuex基本理念：

在Vuex中，有一个不属于任何一个组件的组件，在这前我们说过，Vuex的优势就是可以帮我们管理一个共享的数据，所以Vuex里面肯定是可以存放数据的，然后所有的组件，当我们需要这个数据的时候，就去Vuex里面拿这个数据。并且，在图示中可以看到，这个线条的箭头是双向的，也就是说，我们可以同时完成读和写的操作。

这种感觉就像是什么呢，在全局事件总线中，bus只能完成数据的携带和传输，数据还是存储在每个组件中进行单独的维护，但是Vuex就不一样了，它可以自己存储数据，并且有一套自己的进行读写维护的API帮助组件进行数据的操作。

简单理解，Vuex就相当于是全局实现总线Plus

流程图：对于理解Vuex的执行流程和原理方面，我们用一张图来展示一下方便我们更好的理解

 Vuex官方网站：Vuex 是什么？ | Vuex (vuejs.org)https://vuex.vuejs.org/zh/

 名词解释：

Vue components：Vue组件

State：Vuex的组成部分，负责管理数据

Actions：Vuex的组成部分，负责在数据更改前执行逻辑操作和异步请求

Mutations：Vuex的组成部分，负责进行数据的更改

Backend API：来自服务器端的数据接口，是异步请求的时候的目标端口

Devtools：Vuex开发者工具，是与Vue开发者工具集成在一起的

API：API是一组预先定义的函数，用来调用某些软件的特殊功能而不必了解其中的内部运行原理

dispatch：用来将修改数据的请求从组件发送到Actions，第一个参数是动作类型，第二个参数是对于参数的修改值，比如我们要对值进行加三处理，这个值就是三，这个函数中可以调用commit方法

commit：将修改数据的请求从Actions发送到Mutations，commit函数的第一个参数就是Mutations中函数名，第二个值就是参数的修改值

执行流程：

我们根据上面的图示来看，好像是一个循环，不知道从哪里开始，但是我们首先想到我们用Vuex最开始的目的，就是想有一个可以存储并维护一个共享数据的功能，这里面的关键词就是数据，所以我们的切入点从Vuex中存储数据的节点，State开始。

State节点是Vuex中维护数据的节点，我们的共享数据就存储在这个节点里面，当我们的组件使用的时候，就自动的Render到我们的组件中，进行渲染或其他操作，然后，在我们的组件中，如果我们调用了dispatch方法，就会将修改数据的动作传递到Actions中，在这个节点中可能会进行一些逻辑操作，或者是一些异步通信与后端的Backend API进行交互，当这些都进行完之后，在Actions的函数中调用一个commit函数，将执行的方法和参数传递到Mutations中，进行最终的数值修改，然后被修改后的数据，会自动地重新渲染刷新原来的在State中的值，并自动的在组件中也进行更新。这就是我们看到的一个轮回。

在实际的操作中，真正需要我们调用的API就只有dispatch和commit，其他的都是Vue自己帮我们进行的动作。

其实在流程图中没有体现出来的还有一个地方，就是我们的三个组件其实是被一个管理者进行管理的，就是Store，这三个组成部分虽然是Vue的，但是API的调用全部都是由Store来完成的，只有这三个组成部分还不够，他们还需要被管理，通过Store来完成他们各自的功能，变成一个完整的Vuex整体

组成部分：

Vuex的三大组成部分其实我们在之前已经介绍的差不多了，就是State，Actions，Mutations这三个部分，这三个组成部分的值，全部都是一个普通的Object对象，然后里面保存各自关系的数据形式：

State中保存的就是变量和值的键值对。

Actions中保存的是函数，这个函数名就是组件中调用dispatch方法的时候传递的第一个参数，第二个参数是对数据更改的值。

Mutations中保存的也是函数，这个函数名就是dispatch中传递的第一个参数，这个节点中的函数的第一个参数是整个State，第二个参数就是对参数的修改值

在这三个组件中，如果我们对于修改值的操作不需要经过任何的逻辑操作，可以直接在组件中调用commit方法直接修改数据，可以不经过Actions，所以这个Actions并不是必须的，dispatch方法也不是一定被调用的。当我们不需要经过任何的逻辑操作和异步请求的时候，这一步可以不写

Vuex开发者工具：

Vuex的开发者工具是和Vue的开发者工具集成在一起的，当我们打开Vue的开发者工具的时候可以看到Vuex的选项：

右边的选项是组件，timeline时间轴选项对应的就是Vuex的开发者工具，当我们触发了某一事件的时候，就会以时间轴的形式在这上面有体现，在后面我们进行开发案例的时候可以使用这个工具观察数据的变化和对应的方法的调用 

至于Vuex的使用和案例我们放到下一章节来进行说明和演示