Flux,Vuex,Redux

Flux

• Flux是一種前端狀態管理架構思想，專門解決軟件的結構問題。

基於Flux的設計思想，出現了一批前端狀態管理框架。
他們給出了一些庫用於實現Flux的思想，並在Flux的基礎上作了一些改進。
在這些框架裏，當前最熱門的莫過於Redux和Vuex了。
這裏是我對Flux,Vuex,Redux的一些思考和總結:

• Flux

Flux數據流的順序是:

View發起Action->Action傳遞到Dispatcher->Dispatcher將通知Store->Store的狀態改變通知View進行改變

Redux

• Redux相對於Flux的改進：

  • 把store和Dispatcher合併,結構更加簡單清晰
  • 新增state角色，表明每一個時間點store對應的值，對狀態的管理更加明確

• Redux數據流的順序是:

  • View調用store.dispatch發起Action->store接受Action(action傳入reducer函數,reducer函數返回一個新的state)->通知store.subscribe訂閱的從新渲染函數

• Redux

  • Redux相對於Flux的改進：

    • 把store和Dispatcher合併,結構更加簡單清晰
    • 新增state角色，表明每一個時間點store對應的值，對狀態的管理更加明確

  • Redux數據流的順序是:

    • View調用store.dispatch發起Action->store接受Action(action傳入reducer函數,reducer函數返回一個新的state)->通知store.subscribe訂閱的從新渲染函數

Vuex

• Vuex是專門爲Vue設計的狀態管理框架,一樣基於Flux架構，並吸取了Redux的優勢

• Vuex相對於Redux的不一樣點有:

  • 改進了Redux中的Action和Reducer函數，以mutations變化函數取代Reducer，無需switch,只需在對應的mutation函數裏改變state值便可
  • 因爲Vue自動從新渲染的特性，無需訂閱從新渲染函數，只要生成新的State便可

• Vuex數據流的順序是:

  • View調用store.commit提交對應的請求到Store中對應的mutation函數->store改變(vue檢測到數據變化自動渲染)