vuex - redux - mobx

vuex

　　尤大大曾說過，Vuex 實際上是一個針對 Vue 特化的 Flux，主要是爲了配合 Vue 自己的響應式機制。固然吸收了一些 Redux 的特色，好比單狀態樹(用一個對象就包含了全部的應用層級狀態，至此它便做爲惟一數據源的存在，這也意味着沒一個應用僅僅包含一個store實例，單一的狀態樹可以讓咱們直接的定位任一特定狀態片斷)和便於測試和熱重載的 API，可是也選擇性的放棄了一些在 Vue 的場景下並不契合的特性，好比強制的 immutability（在保證了每一次狀態變化都能追蹤的狀況下強制的 immutability 帶來的收益就頗有限了）、爲了同構而設計得較爲繁瑣的 API、必須依賴第三方庫才能相對高效率地得到狀態樹的局部狀態等等（相比之下 Vuex 直接用 Vue 自己的計算屬性就能夠）因此 Vue + Vuex 會更簡潔，也不須要考慮性能問題，代價就是 Vuex 只能和 Vue 配合。Vue + Redux 也不是不能夠，可是 Redux 做爲一個泛用的實現和 Vue 的契合度確定不如 Vuex。

　　

　　

　　在業務中，使用vue的比例是比較高的，說到vue的狀態管理不得不提到vuex，vuex也是基於flux的產品，因此在某種意義上與redux想象，但又有不一樣。和redux使用不可變數據來表示state不一樣，vuex中沒有render來生成全新的state來替換舊的state。Vuex中的state是能夠修改的。這麼作的緣由和vue運行機制有關，vue是基於ES5的getter/setter來實現視圖數據的雙向綁定，所以，vue中的視圖變動能夠經過setter通知到視圖中對應的指令來實現視圖更新。

　　Mutation

　　　　Vuex中的state能夠修改，不過修改state的方式不是經過actions，而是經過mutations，Vuex 中的 mutation 很是相似於事件：每一個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是咱們實際進行狀態更改的地方，而且它會接受 state 做爲第一個參數：

 　　　　

　　　　不能直接調用mutation handler，須要以相應的type調用store.commit方法

　　　　

 

　　Action

　　　　1).action能夠當作是鏈接視圖與state的橋樑，它會被視圖調用，並由它來調用 mutation handler，向 mutation 傳入 payload。

　　　　

　　　　

　　　　2).Action與mutation不一樣在於

      　　　　 Action提交的是mutation，而不是直接變動狀態，

       　　　　Action中能夠包含任何的異步操做

　　　　　　Action經過dispatch觸發

　　　　　　

　　　　3).在組件中使用 this.$store.dispatch('xxx') 分發 action，或者使用 mapActions 輔助函數將組件的 methods 映射爲 store.dispatch 調用（須要先在根節點注入 store）

　　　　　　

Mobx and  Redux

　　前景：當咱們使用react開發文本應用時，在react組件內能夠經過this.setState()和this.state處理或訪問組件內狀態，可是隨着隨着項目的增大，狀態變得複雜，一般考慮組件之間的通訊問題：某個狀態須要在多個組件共享、某組件內交互須要其餘組件狀態更新，對此，react組件開發實踐推薦將公用組件狀態提高。可是，當項目愈加複雜時，咱們發現僅僅是提高狀態已經沒法適應如此複雜的狀態管理，程序狀態變得比較難同步操做，這意味着咱們須要更好的狀態管理方式，因而引入了狀態管理庫，如redux、mobx、alt(基於flux使用javascript應用來管理數據的類庫，簡化了flux的store、actions、dispatcher)

　　Mobx

　　　　

　　redux

　　　　

 

 

　　相同點：

　　　　a)      統一維護管理應用狀態

　　　　b)     某一狀態只有一個可信數據來源-store 狀態容器

　　　　c)      操做更新狀態方式統一，而且可控(一般以action方式提供更新狀態的途徑)

　　　　d)     將react組件從業務上分爲容器組件和展現型組件(視圖)

 　　不一樣點：

　　　　1.   函數式和麪向對象

　　　　　　Redux 更多的是遵循函數式編程思想，而Mobx更多的是從面向對象角度考慮問題

　　　　　　Redux提倡函數式代碼，如reducer就是一個純函數.純函數接受輸入，而後輸出結果，除此以外不會有任何影響，也包括不會影響接受的參數

　　　　　　Mobx更多偏向於面向對象編程和響應式編程，一般將狀態包裝成可觀察對象(observable)，因而咱們就可使用可觀察對象的全部能力，一旦全部狀態對象變動，就能自動得到更新

 

              2.   單一和多個store

　　　　　　Store是應用管理數據的地方，在Redux中，咱們老是將全部共享的數據集中在一個大的store中，而Mobx則一般按模塊將應用狀態劃分，在多個獨立的store中管理

 

              3.   Javascript對象和可觀查對象

                     Redux以javascript原生對象形式存儲數據，而Mobx使用可觀察對象

                     Redux須要手動追蹤全部狀態對象的變動，

                     Mobx中能夠監視可觀察對象，當其變動時自動觸發監聽

 

              4.　不可變(immutable)和可變(mutable)

　　　　　　Redux狀態一般是不可變的，咱們不能直接操做狀態對象，而是在原來狀態基礎上返回一個新的狀態對象，這樣就能方便應用上一狀態，而Mobx中直接使用新值更新狀態對象　　

 

 　　　  5.   mobx-react 和 react-redux

 　　　　　　使用react和redux鏈接時，須要使用react-redux提供的provider和connect

　　　　　　　　　1)、Provider 負責將store注入React應用中

 　　　　　　　　　　

　　　　　　　　　2)、Connect 負責將store state注入容器組件，並選擇特定的狀態爲容器組件props傳遞

　　　　　　　　　　　

　　　　　　    對於Mobx而言一樣須要兩個步驟：

　　　　　　　　　1.　Provider 利用mobx-react提供的provider將全部的組件注入

　　　　　　　　　　　

　　　　　　　　　2.   使用inject將特定的store注入組件，store能夠傳遞狀態或action；

　　　　　　　　　　  而後使用observer保證組件能響應store中的客觀查對象observable變動，即store更新，組件視圖響應式更新