Redux 和 Vuex 的對比

一樣是狀態管理庫，Vuex 跟 Redux 差很少，幾乎與 Redux 的理念如出一轍。我的感受 Vuex 使用起來要比 Redux 簡單好懂，也許是由於學了 Redux 理解 Vuex 就簡單了。下面來簡單對比一下二者，對比能夠幫助咱們更好的學會使用他們, 沒有代碼。

1. 核心概念對比

Redux 的核心概念	Vuex 的核心概念
action （同步action ，或藉助 中間件 實現異步操做，action 不會改變 store，只是描述了怎麼改變store）	mutation（用於同步操做） 、action（可用於異步操做，提交 mutation）
reducer（純函數，根據 action 和舊的 store 計算出新的 store	mutation裏面直接修改 state
store（單一數據源）	state（單一數據源）

其餘：

i） Redux 提供了 store.getState() 這個 API 獲取 store 樹，還有 store.subscribe(listener) 訂閱 store 的變化，當 store 改變時會調用監聽器；Vuex 有一個 getter 的概念用於根據 state 派生出一些數據，像 Vue 的計算屬性同樣，當 state 改變時會從新計算出一個結果出來，提供給須要的組件。

ii） 對於大型項目，當應用狀態數據過於複雜，能夠劃分狀態，這樣便於管理數據流向。Redux 能夠經過 combineReducers（）結合各個組件的 reducer，各個組件能夠單獨管理本身的狀態，最後合併爲一個 reducer 用於生成一個 store；Vuex 這方面用 Module 這個概念劃分 store，與 Redux 同樣，能夠多層嵌套子狀態。

iii） 將狀態數據綁定到視圖：Redux 將狀態映射到視圖能夠經過 React-redux 映射到 React 組件， 固然也能夠直接使用 Redux 本身提供的 store.subscribe() 訂閱 store 的改變，從而更新視圖，所以 Redux 不單單能夠用於 React，也能夠用於其餘框架如 Vue；而 Vuex 只能用於 Vue，它提供了 mapState、mapAction、mapMutations 等API 將 store 映射到 Vuex 各個組件，這個參考了 React-redux 的 mapStateToProps。

2. 使用原則：

Redux 的三大原則：

（1）單一數據源（一個Redux應用只有一個store），也是單向的數據流；
（2）state只讀（惟一改變 state 的方法就是觸發 action，action 是一個用於描述已發生事件的普通對象。）；
（3）使用純函數（reducer）來修改state。
複製代碼

Vuex 的三大原則：

a. 應用層級的狀態應該集中到單個 store 對象中。
b. 提交 mutation 是更改狀態的惟一方法，而且這個過程是同步的。
c. 異步邏輯都應該封裝到 action 裏面。
複製代碼

3. 處理異步操做

Redux 得益於 中間件機制，利用 redux-thunk （redux-thunk 能夠 dispatch 函數，這個函數用於生成 action，因此在這個函數裏面咱們能夠進行異步操做，等異步的結果出來後再放在 action 裏面將這個 action 用 dispatch 分發出去, 而這個函數被叫作 「action creator」 ），能夠將異步邏輯放在 action creator 裏面，經過 action creator 作一個控制反轉， 給 action creator 傳入 dispatch 做爲參數，因而就能夠 dispatch action，（本來是經過 dispatch 來分發 action ,如今是異步 action 即 action creator 掌握了控制權調用 dispatch，因此叫控制反轉），Redux 並無創造單獨的概念出來專門用於異步邏輯，它是利用了 Redux 本身實現的中間件機制，中間件從 dispatch 一個異步 action 到 action 到達 reducer 之間處理 action，在這期間經過異步操做獲得的結果能夠放到 action 裏面再經過 dispatch 分發到 reducer，之前 dispatch 一個 action 以後，這個 action 回當即到達 reducer ，因此是同步 action，如今在 action creator 裏面，咱們經過控制反轉，能夠等待異步操做結果再生成 action 分發，因此叫作異步 action：

而 Vuex 是用 mutation 來對應 Redux 的 action，另外 Vuex 又創造了一個 action 來提交 mutation 並經過異步提交 mutation 來實現異步操做結果可以到達 state.

（請忽略個人拙劣的畫風