數據管理工具Flux、Redux、Vuex的區別

目錄

• 爲何要進行數據管理？
• 怎麼有效地進行數據管理？
• 數據管理工具
  • 1. Flux
  • 2. Redux
  • 3. Vuex
• 使用數據管理工具的場景
• 相關資料

主要講解一下前端爲何須要進行數據管理，有效的數據管理應該是什麼樣子的，最後挑選Flux、Redux、Vuex進行對比講解。

---

爲何要進行數據管理？

組件式開發的核心思路是MVC，Model層的數據發生變化，驅動View層的視圖發生變化。試想一個場景，若是ModelA觸發ModelB變化，致使ViewB發生變化，ViewB發生變化時，觸發了ModelC變化，ModelC又觸發了其餘Model的變化...，咱們想知道一個View的變化到底是那個數據致使的，追查起來就很困難，因而就記錄數據的變化就頗有必要了，其實換一個高大上的名字就是數據狀態管理。

怎麼有效地進行數據管理？

1. 數據集中管理
view中的數據統一放置到一個倉庫（store）中，要渲染頁面的時候，從中取出當前狀態的數據（state），而後將state中的最新的數據經過props傳遞到組件中，而後渲染組件，實現試圖展示。

2. 精細化拆解數據操做
要修改store中的state，爲了作到數據的操做可追溯，儘可能將數據的操做拆解成一個個小函數，固然純函數最好。

3. 單向數據驅動
組件中不能直接修改state的值，修改state，只能發出修改請求（action），由action觸發數據操做。

總之，數據集中管理就須要應用使用惟一的數據Tree，存放在store中；精細化拆解數據操做就是須要提供小而純的函數，來修改state；單就向數據驅動須要提供惟一能修改state的渠道。

數據管理工具

1. Flux

Flux數據流的順序是:
View發起Action->Action傳遞到Dispatcher->Dispatcher將通知Store->Store的狀態改變通知View進行改變

ps:基於Flux架構思想寫的一個小demo

2. Redux

Redux相對於Flux的改進：

• 把store和Dispatcher合併,結構更加簡單清晰

• 新增state角色，表明每一個時間點store對應的值，對狀態的管理更加明確

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

ps:阮一峯老師的Redux+React小demo

3. 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檢測到數據變化自動渲染)

ps:vuex官方Vue+vuex小demo

使用數據管理工具的場景

數據管理主要是方便SPA開發時，管理多個組件或子頁面的公用數據，若是僅僅是簡單個的單頁，您最好不要使用Redux或Vuex。

相關資料

redux官方文檔：https://cn.redux.js.org/
redux視頻：https://www.youtube.com/watch?v=VJ38wSFbM3A

vuex官方文檔：https://vuex.vuejs.org/zh/

flux阮一峯文檔：http://www.ruanyifeng.com/blog/2016/01/flux.html