学习一个新技术，必须要清楚三个W，即What 、Why以及how。只有当你了解了Vuex的What 和Why，才会研究how。
1、vuex 是什么？（what）
官方文档介绍：Vuex是一个专门为vue.js设计的集中式状态管理模式，用来管理Vue的所有组件状态。也可以认为Vuex就是vue为了方便数据的操作而建立的一个“前端数据库”。
2、为什么要使用vuex？（why）
（1）现象
当在开发大型单页应用时，会出现多个视图组件依赖同一个状态，来自不同视图的行为需要变更同一个状态。如登录状态、加入购物车、音乐播放等。
（2）当前可用的方法
或许你认为可以用传参的方法解决组件之间互相传值的问题。但是传参的方法对于多层嵌套的组件将会变得很繁琐，并且对于兄弟组件间的传递无能为力。来自不同组件的行为需要变更同一状态。我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式都很脆弱，通常会导致无法维护代码。所以，这时就出现了Vuex，同时这也是Vuex出现的背景。
（3）Vuex的优势
Vuex主要用于解决组件之间同一状态的共享问题，它能把组件的共享状态抽取出来，当做一个全局单例模式进行管理。 这样不管你在何处改变状态，都会通知使用该状态的组件做出相应修改。即Vuex采用集中式存储管理应用的所有组件的状态 这里的关键在于集中式存储管理。 这意味着本来需要共享状态的更新是需要组件之间的通讯，而现在有了Vuex，组件就都和store（存储或仓库，也就是将组件的所有状态均存放于store仓库中）通讯了。
（4）适用场景
如果你不打算开发大型的单页应用，使用Vuex可能会变得很繁琐。但是对于大型单页应用项目，可以使用Vuex作为不同组件之间的状态管理。而对于小型的项目，推荐使用HTML5特有的属性，localStroage和sessionStroage作为数据之间的传递。
（5）总结（Vuex的具体作用）
通俗的讲：Vuex是一个状态管理的插件，可以解决不同组件之间的数据共享和数据持久化。
3、Vuex的引用
之前说过Vuex类似于一个“前端数据库”，既然是数据库，那么就会涉及到数据库中一些基本的操作。首先，数据库你得能取数据吧？那么得有一套取数据的 API，既然是获取，那就叫getter 吧。然后，取到数据之后需要对数据进行相关修改并存入数据库，这个 API就叫mutation。Vuex生成的仓库（store）也就这么出来了。其中State 就是数据库。getters 是从数据库里取数据的 API。Mutations 是把数据存入数据库的 API，用来修改state 的。action是将mutation处理后的数据进行提交的过程。 最后我们把这几部分用store 包一下，” vuex “就捣置出来了。
（1）在vue-cli以安装Vuex的情况下，直接引用。
vuex基本使用流程为: 在action中分发异步请求, 在异步回调中提交mutation,在mutation中修改state, 使用getters对state的值进行计算封装.。 在根实例中注册 store 选项，这样该 store 实例会注入到根组件下的所有子组件中，方便后面我们在每个子组件中调用 store 中 state 里存储的数据。
（2）没有安装Vuex的话，遵循以下步骤：
1，安装Vuex，npm install vuex --save 或 cnpm install vuex --save进行安装
2，在src下新建一个名为vuex的文件夹
3，vuex文件夹里面新建一个store.js
4,在刚刚创建的store.js引入vue 引入vuex并且使用use Vuex
5，定义数据
6，定义方法
7，实例化 Vuex.store
8，暴露
完整代码如下：
4，组件里如何使用vuex？（how）
1，引入store
import store from “../vuex/store.js”
2,注册
export default{
data(){
return {
msg:'我是一个home组件',
value1: null,
}
},
store,
methods:{
incCount(){
this.$store.commit('incCount'); /*触发 state里面的数据*/
}
}
}
3，获取state里面的数据
this.$store.state数据
4、触发 mutations 改变 state里面的数据
this.$store.commit('incCount');
参考文献
【1】原文链接：https://www.jianshu.com/p/d5b8c4088e7c
【2】原文链接：https://www.jianshu.com/p/dd814a11d8ec
