一個組件可以分為數據和視圖，數據更新時，視圖也會自動更新。在視圖中又可以綁定一些事件，它們觸發methods裡面指定的方法，從而又可以改變數據、更新視圖，這就是一個組件基本的運行模式。
但實際的業務中，經常有跨組件共享數據的需求，因此Vuex的設計就是用來統一管理組件狀態的，它定義了一系列規範來使用和操作數據，使組件應用更加高效。
圖中四個組件都用到了store數據，當store數據發生變化時，四個組件的視圖均發生變化。
Vuex基本用法
首先我們先安裝Vuex
npm install --save vuex
然後在main.js裡面，通過Vue.use()使用Vuex
接下來new Vue({})的時候一定要注入剛剛創建的store，這樣在各個組件裡面就可以this.$store這樣用了。
涉及到的屬性配置有：
1）State
2）Mutations
3）Getter
4）Actions
下面我們一一介紹
State
我們模擬一下購物車的簡單操作，獲取購物車商品數量，向購物車添加商品
數據保存在Vuex選項的state字段，state裡面保存我們的商品goods
接下來我們顯示以下商品數量
state功能定位很簡單，就是一些靜態數據
開篇我們說了store裡面的數據各個組件是共享的，當store裡面的數據發生變化的時候，會影響各個組件，接下來我們驗證一下，再創建一個shoppingcar.vue文件
我們在主頁面填寫如下代碼：
我們驗證的思路很簡單，再創建一個組件，組件也需要獲取商品數量，當在其中一個組件添加商品時，看看另一個組件的顯示會不會也發生變化。同時發生變化就說明它們共享著同一數據。
官方文檔說
更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。
其實有一個前提，在創建Vuex時，需要開啟嚴格模式，開啟後就不能直接對this.$store.state的state進行修改，必須顯式提交(commit) mutations。
官方文檔進行了說明
開啟嚴格模式，僅需在創建 store 的時候傳入 strict: true；
在嚴格模式下，無論何時發生了狀態變更且不是由 mutation 函數引起的，將會拋出錯誤。這能保證所有的狀態變更都能被調試工具跟蹤到。
開啟嚴格模式，僅需在創建 store 的時候傳入 strict: true：
Mutations
mutations來監視我們的數據變化，相對應的提供改變數據的方法，方法裡面的第一個參數就是store 的state屬性，可見是死死管著state。
在組件內，通過this.$store.commit方法來執行mutations。
注意：this.$store.commit(‘pushgood’,’***’);第二個參數是傳入的加入goods的值。
Commit方法的時候也可以這樣寫：
在mutations裡面做些修改：
Getters
現在我們有這樣一個應用場景，組件A，組件B...需要獲取按某種條件過濾後的數據，按照之前的思路，我們可能會在組件A，組件B...裡面的computed裡面寫過濾數據的代碼，在每個組件裡面寫顯然是不行的，那麼Vuex提供的getters是在數據源頭做到過濾的，那麼任何組件都可以直接用這個過濾數據了。
getters，首先它是一個屬性顧名思義就是獲取數據，功能定位就是獲取數據
我們獲取商品名字長度大於8的，以及它的數量
注意：我們getters屬性裡面定義的getter也可以依賴其它的getter,將getters作為第二個參數。這裡的filterGoodsCount依賴的是filterGoods。需要明確一下，這裡的filterGoods和filterGoodsCount看作屬性方法，所謂的屬性方法是，當調用某個getter屬性時會自動執行裡面的方法。
在組件的計算屬性裡面獲取信息，如下圖
注意：當調用this.$store.getters.filterGoodscount時會自動執行此屬性裡面的方法，這點類似編譯性語言的屬性字段。
Actions
這個方法跟mutations很像，mutations裡不應該異步操作數據，如果異步操作數據，組件在Commit方法後數據不能立即改變，不知道什麼時候才發生改變，與mutations不同的是actions裡面提交的是mutations，最重要的一點是可以異步操作業務邏輯。
actions在組件內通過$store.dispatch觸發。
這裡的dispatch方法也可以傳遞對象類型的參數
在執行commit時，如下圖：第二個參數就是傳過來的對象
actions最重要的不是操作異步數據嗎，我們來模擬一下：
當某個業務邏輯需要異步處理時就用actions，如上圖，耗時1秒，成功了則執行後續代碼reslove(‘執行後續代碼’);
在組件內調用的時候如故：
最後一個知識就是modules，它用來將store分割到不同模塊。當你的項目足夠大時，store裡面的state、getters、mutations、actions代碼會非常多，都放在一個文件裡面顯然是不行的，使用modules把它們寫到不同的文件中，每個module擁有自己的state、getters、mutations、actions。如下：
具體的用法我會在下一篇博客裡具體介紹。
閱讀更多 七音說 的文章
