安装Vuex

cnpm install vuex --save-dev

Vuex是什么?

   1. Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
   2. 它采用集中式存储管理应用的所有组件的状态 ，
   3. 并以相应的规则保证状态以一种可预测的方式发生变化。

这是[Vuex的官网]([图片上传失败...(image-540e44-1557842488185)]

https://vuex.vuejs.org/)。对于Vuex的解释可以看下。

怎么去用Vuex？

   vuex就像一个无形的仓库，公共的状态我们会抽离出来放进里面。vuex的核心主要包括以下几个部分：
   *state
   *getters
   *mutations 
   *actions
    state里面就是存放的我们上面所提到的状态
    mutations就是存放如何更改状态
    getters就是从state中派生出状态，比如将state中的某个状态进行过滤然后获取新的状态  
     actions就是mutation的加强版，它可以通过commit mutations中的方法来改变状态，最重要的是它可以进行异步操作。

我们在项目的src目录下新建一个store，在该目录下新建一个index.js文件，在这个文件中创建实例，导入实例对象文件，最后使用export default 导出文件。

[图片上传失败...(image-bdfbf8-1557842505546)]]

C:\Users\admin\Desktop/index.php
imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

实例getters对象，实时监控state值的变化，最后导出文件

[图片上传失败...(image-32c4e-1557842505546)]]

https://upload-images.jianshu.io/upload_images/17870438-1441bcaaa790605d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

实例mutations对象，最后导出文件。（不能执行异步操作）

[图片上传失败...(image-38d7f3-1557842505546)]]

https://upload-images.jianshu.io/upload_images/17870438-5c52bd1094d876ab.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

实例actions对象，最后导出文件。（可以进行异步操作）

[图片上传失败...(image-ea3c37-1557842505546)]]

https://upload-images.jianshu.io/upload_images/17870438-6fae5096004d058b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Vuex