資料管理工具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.