vuex是vue的状态管理工具，vue进阶从es6和npm开始，es6推荐阮一峰大神的教程。
vuex学习从官方文档和一个记忆小游戏开始。本着兴趣为先的原则，我先去试玩了一把-->。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，如果你刚接触这个东东肯定像我一样蒙，所以我选择把这个游戏的源码从头到尾看一遍，主要看文件夹vuex里的actions,mutations,store部分，理解了一行就加一个批注。直到全部理解了为止。
从图说起：
这个图最简单的表示了vuex的工作流程。以memory小游戏为例，它的主要组件是chessboard组件，下面是一堆card组件，在小游戏的stage对象里面有一个leftmatched对象，用于表示还有多少对扑克牌没有匹配成功。
vuex store实例
每一个 Vuex 应用的核心就是 store（仓库），这里存放了应用中的大部分状态stage，操作状态的mutations，触发mutations的actions。
以上面的那个小游戏为例，最基本的有三个状态stage，ready,playing,pass,分别表示开始玩之前，正在玩和通关三种状态，这些状态都被放在stage中。
在mutations中有一个reset方法，用于重置通关后再来一局。将cards全部翻转过去，也就是重置了状态。
可以用类比来理解store实例：
| Vue | Vuex |
| Vue实例vm | Vuex.Store 实例store |
| vm的data属性 | store实例的stage属性 |
| vm的methods方法 | store实例的mutations方法 |
| vm的computed属性 | store实例的getter属性 |
上面的每一条在作用上基本上可以看作是一一对应的，stage对应data,getters对应computed属性等。
store实例的生成
看来自教程的代码，与生成vue实例一样，同样是调用一个构造函数Vuex.Store,并传入一个option对象，从而生成一个store实例。这个实例包含了应用的状态，和改变应用状态的方法。
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } })
但是store实例尽管提供了改变状态的方法，它本身是不改变状态的。改变状态的源头来自组件和生命周期的钩子函数。 在组件中，使用计算属性来读取应用的状态，通过action——>mutation——>stage来改变应用的stage。
另外，并不是说应用的所有状态都应该放到vuex的stage中，stage主要放用于共享的，或者应用级别的状态，memory小游戏为例，一张卡片是否翻转应该属于card组件的状态，应当局部存放，而玩家匹配了几组卡片则属于应用层面的状态，应当放在vuex中。
vuex的注入
vuex的store实例是作为生成vue实例的选项之一被注入到vue实例中的，同时可以被实例中的各组件所访问。看下面的例子main.js用于生成vue实例，store.js用于生成store实例：
//main.js import store from './vuex/store'//引入store实例 new Vue({ el: '#app', template: '<App/>', components: { App }, store //store作为生成vue实例的选项之一，与el,template等一起被引入 }) //store.js export store实例，在上面被引入 import Vuex from 'vuex' Vue.use(Vuex)； /..../ export default new Vuex.Store({//store实例接口，没有写actions state, getters, mutations })
vuex和组件
vuex是一个就像一个状态仓库，组件想要访问这些共享的状态，或者触发改变状态的mutations方法，可以这样做：
this.$store.stage.onlyUnfinish//访问共享的状态 this.$store.commit(listByImportant)//出发vuex mutations中的排序方法