一篇文章带你吃透Vuex3的状态管理_vue.js_

一. Vuex是什么

了解过Vuex的都知道，它是Vue官方的状态管理方案；可以对父子，祖孙以及兄弟组件之间进行通信；

除了使用Vuex，我们都知道还有一个方案能满足任何组件的之间的通信，那就是vue全局事件总线（$ bus）；

在数据接收组件内利用$ on绑定一个事件(eventName)，第二个参数绑定一个回调函数来接受数据。

//接收数据的组件 this.$bus.$on('eventName',(value)=>{ console.log(value) //{a:1,b:2} }) 

在数据发送组件内利用$ emit 提交给绑定的事件(eventName),后面的参数为要传递的数据；

//发送数据的组件 var obj = {a:1,b:2} this.$emit('eventName',obj) 

那既然Vue全局事件总线（$ bus）能够满足任何组件的之间的通信，为什么vue官方还要再创造出Vuex呢？

Vue全局事件总线

我们来看下面这个场景（利用事件总线进行数据共享）图片来源于尚硅谷

上图可以看到，A组件中data中有一个X属性，B,C,D组件也都需要，共享属性可以利用$ on 去获取到X属性；这样看起来，感觉不是很简单吗，没有什么啊，别急，这只是读取属性，那如果B,C,D需要修改呢？

其实只需要在B,C,D组件内去利用$ emit事件把修改的值发送给A组件，A组件再通过$ on去接受然后对X属性进行修改，光看文字是不是感觉已经很绕啦，也就是下图所示：图片来源于尚硅谷

红色箭头是B,C,D组件读取到共享属性X，绿色箭头是B,C,D组件修改X属性；

目前场景只是展示四个组件都需要一个共享属性X，通过读写，看上去都已经很乱啦，那如果大项目中有十几个，几十个组件都需要一个共享属性X呢，岂不是更乱；

Vuex状态管理

那如果要用Vuex实现X属性的共享呢？看下图：图片来源于尚硅谷

Vuex是独立于任何组件的一个存在，把A,B,C,D组件需要共享的属性放到Vuex中去管理，不需要共享的属性还是写在原组件内；此时A,B,C,D组件和Vuex是双向箭头，就是组件既可以通过其内置的api去读，也可以去修改，某一个组件修改共享的属性，其他组件获取的都是最新修改的数据；

何时使用Vuex

Vue事件总线其实也很方便，但是适合使用小项目中；对于大项目Vuex作为共享状态集中式管理，是最好的选择，方便使用以及维护；

那疑问来了，我也不清楚项目的大小怎么办，什么时候适合使用Vuex呢？

• 项目中多个组件都需要使用或修改共同一个状态（多个组件共享同一个状态）

二. 纯vue组件案例

本来打算直接介绍引入Vuex的代码步骤和方法，但是为了更好的理解好对比，我先把我写的两个组件案例demo和代码给大家看一下,稍后再给大家看引入Vuex后的代码，虽然功能都一模一样，主要是对比Vuex使用前后的组件内部代码不同；

计算总数案例

导航二的计算总数案例组件：

代码如下：

添加人员案例

导航三添加人员案例组件：

代码如下：

此时两个组件是完全独立的，没有实现数据共享，所以在用到对方组件内数据的地方以 ”???“ 标记；

接下来，我们就开始一步一步使用Vuex去实现两个组件的数据共享；

三. Vuex工作原理和流程

下面是官方给的Vuex的工作原理图，如下：

如果想要很熟悉的使用Vuex，那我们就应该先了解其工作原理，明白了它内部的运转机制，那么我们就可以告别死记，就可以很熟悉流畅的编写代码；

从上图工作原理图来看Vuex中有三个最重要的核心对象，Actions，Mutations，State，那他们三个是什么关系，怎么协助运转呢，下面我们来看一下Vuex的工作流程；

第一种工作流程

为了方便了解，我给Vuex工作原理图稍微做了一些标注，图如下：

这个红色箭头就是组件使用Vuex的工作流程，配合上图，认真理解下面文字，看一下组件是怎么修改共享数据的：

• vue组件内调用dispacth()函数，该函数内又两个参数，第一个参数是一个方法名‘key1’,第二个参数是传入的值
• 由于的组件调用了dispatch，就会在Actions对象中去找dispatch函数传入的一个参数‘key1’;
• 找到key1后，就会调用对应的函数；key1函数内部又调用了commit()函数。commit()函数也有两个参数，第一个参数是一个方法名‘KEY1’,第二个参数是传入的值;
• 由于调用了commit,就会在Mutations对象中去找commit函数传入的第一个参数‘KEY1’;
• 在Mutations对象找到‘KEY1’对应的函数后，Vuex内部调用Mutate对状态就行修改，修改状态后对修改状态的组件进行render

第二种工作流程

现在应该了解其工作的大致流程了吧，别急，还没有完，我们继续看下图：

这个应该是最完善的工作流程图，除了刚才我们介绍的最外圈的工作流程外，其实组件也可以直接去调用commit()去修改状态；那该怎么区分和使用呢？

• Vuex内部有规定，Actions中主要写一些复杂的业务逻辑和异步处理，Mutations中主要修改状态；
• 如果在组件内就可以拿到需要传递的value值，内部不在需要对value进行过多的业务了逻辑处理，可以直接commit()去Mutations中调用修改状态函数
• 如果需要传递的value值要通过接口获取，然后还要进行复杂的业务逻辑，最好放到Actions的函数去处理；
• 这样做的好处是Devtools开发工具可以准确的监控Vuex状态的变化；

生活化的Vuex工作原理

以上就是Vuex的全部工作原理以及流程；但是为了让大家更好的去记住和理解，我又模拟了下面这个场景：

Vuex就相当于一个饭店，vue组件就是顾客，Actions就是服务员，Mutations就是厨师，state就是做出来的菜和饭；我们把修改共享状态的任务改成点菜，我们可以走一下点餐流程：

通过服务员点餐的流程：

• 首先，顾客因为不熟悉饭店菜品点菜的时候需要询问，所以要找‘服务员1’点菜，或者是通过扫描桌上外卖平台点餐
• 其次，‘服务员1’整理好菜单后就交给了后厨‘厨师1’去做。后厨安装的有监控，以后想要知道哪个厨师做的哪个顾客的菜都能查询到；
• 最后，厨师1做好菜，顾客就可以直接拿到；

顾客自己点餐的流程：

• 首先，顾客很熟悉这家饭店，菜系了解，厨师也都认识这样就很简单，直接找到‘厨师1’要了几个菜；
• 最后，厨师1做好菜，顾客就可以直接拿到；

现在应该很熟悉Vuex的工作流程了吧，很简单，学会点菜就行，哈哈，那接下来我们就要开始使用Vuex啦；

四. 在项目中引入Vuex

安装Vuex

首先，你的电脑要安装node环境，使用npm安装：

npm install vuex --save

创建store

然后在项目src文件夹下创建一个store文件夹，在其里面创建index.js：

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: {}, getters:{}, mutations: {}, actions:{}, modules:{} }) export default store 

在Vue中挂载store

最后在main.js文件内引入创建的store: