簡單解析vuex的工做流程

一、

     Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

官網： vuex.vuejs.org

首先要安裝： cnpm install vuex -D

二、

vuex官方上提供了一個vuex的工做流程圖：

乍一看上去，有點懵逼。。。這特麼畫的是啥啊？？？

廢話很少說了，這樣，咱們能夠經過一個點擊按鈕而後監聽數據加減的小實例來分析一下整個流程：

2.1）

vuex提供了兩個很是靠譜的方法：mapActions（管理全部的事件）和mapGetters（獲取全部的數據）

2.2）

給一個按鈕綁定點擊事件increment，而後經過vuex提供的mapActions方法中來管理這個increment方法，mapActions默認傳遞進去的是一個數組，監聽的事件方法時已字符串的形式傳遞到數組中去，如有多個相似的方法，用逗號隔開便可。

當咱們在app.vue這個組件中點擊這個按鈕的時候，此時觸發了dispatch事件

2.3）

咱們能夠在main.js同一級建一個store.js用來處理點擊按鈕後vuex的整個工做的流程。

2.4）

上邊點擊按鈕觸發完dispatch事件後會將咱們定義的increment方法傳遞到Actions中，Actions接收完後調用此方法，而且傳入一個actions自帶的commit對象。最後將commit對象調用後將其傳遞到下一步mutations中。

2.5）

mutations接收後調用increment方法，此時須要傳遞一個默認您參數，咱們將其定義爲state，而且聲明一下

2.6）

最後經過mapGetters來渲染通過store.js處理的數據，那麼此時count方法也一樣是須要咱們在store.js中來定義的

聲明一個getters 用來處理上邊通過加工的state對象

最終咱們將上述定義的全部對象都要在Vuex.Store方法下導出

2.7）

經過vue-tools來調試能夠很清楚的發現vuex裏的一些屬性和方法在發生變化

小結：

      這樣一個完整的 用vuex來實現點擊按鈕增長數據的小demo就實現了，點擊按鈕數據減小同理。按照上述官網提供的vuex的工做流程圖就完整的跑完了。。。本人第一次發文，有寫的不對的地方，歡迎各位大神指正！！！