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中的排序方法