vuexjavascript
尤大大曾說過,Vuex 實際上是一個針對 Vue 特化的 Flux,主要是爲了配合 Vue 自己的響應式機制。固然吸收了一些 Redux 的特色,好比單狀態樹(用一個對象就包含了全部的應用層級狀態,至此它便做爲惟一數據源的存在,這也意味着沒一個應用僅僅包含一個store實例,單一的狀態樹可以讓咱們直接的定位任一特定狀態片斷)和便於測試和熱重載的 API,可是也選擇性的放棄了一些在 Vue 的場景下並不契合的特性,好比強制的 immutability(在保證了每一次狀態變化都能追蹤的狀況下強制的 immutability 帶來的收益就頗有限了)、爲了同構而設計得較爲繁瑣的 API、必須依賴第三方庫才能相對高效率地得到狀態樹的局部狀態等等(相比之下 Vuex 直接用 Vue 自己的計算屬性就能夠)因此 Vue + Vuex 會更簡潔,也不須要考慮性能問題,代價就是 Vuex 只能和 Vue 配合。Vue + Redux 也不是不能夠,可是 Redux 做爲一個泛用的實現和 Vue 的契合度確定不如 Vuex。vue
在業務中,使用vue的比例是比較高的,說到vue的狀態管理不得不提到vuex,vuex也是基於flux的產品,因此在某種意義上與redux想象,但又有不一樣。和redux使用不可變數據來表示state不一樣,vuex中沒有render來生成全新的state來替換舊的state。Vuex中的state是能夠修改的。這麼作的緣由和vue運行機制有關,vue是基於ES5的getter/setter來實現視圖數據的雙向綁定,所以,vue中的視圖變動能夠經過setter通知到視圖中對應的指令來實現視圖更新。java
Mutationreact
Vuex中的state能夠修改,不過修改state的方式不是經過actions,而是經過mutations,Vuex 中的 mutation 很是相似於事件:每一個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是咱們實際進行狀態更改的地方,而且它會接受 state 做爲第一個參數:vuex
不能直接調用mutation handler,須要以相應的type調用store.commit方法編程
Actionredux
1).action能夠當作是鏈接視圖與state的橋樑,它會被視圖調用,並由它來調用 mutation handler,向 mutation 傳入 payload。異步
2).Action與mutation不一樣在於ide
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更新,組件視圖響應式更新