简单介绍：

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

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整体