vuex 和 redux 都是狀態管理庫,用於單獨管理狀態的。其中,redux是一個范用的庫,可以單獨使用。而vuex是專門用來配合vue使用的。他們都應用了flux架構的思想,但是在接口的提供上稍有不同。
1. 核心概念對比
Redux 的核心概念
action (同步action ,或借助 中間件 實現異步操作,action 不會改變 store,只是描述了怎么改變store)| mutation(用於同步操作) 、action(可用於異步操作,提交 mutation)
reducer(純函數,根據 action 和舊的 store 計算出新的 store)
store(單一數據源)
Vuex 的核心概念
mutation(用於同步操作) 、action(可用於異步操作,提交 mutation)
mutation里面直接修改 state
state(單一數據源)
2. 使用原則:
Redux 的三大原則:
(1)單一數據源(一個Redux應用只有一個store),也是單向的數據流
(2)state只讀(唯一改變 state 的方法就是觸發 action,action 是一個用於描述已發生事件的普通對象)
(3)使用純函數(reducer)來修改state。
redux的流程:
view——>action——>store——>reducer(返回)——>store——view
Vuex 的三大原則:
(1) 應用層級的狀態應該集中到單個 store 對象中。
(2) 提交 mutation 是更改狀態的唯一方法,並且這個過程是同步的。
(3)異步邏輯都應該封裝到 action 里面。
vue的流程:
vueComponent——>(dispatch)action——>(commit)——>mutations——>(mutate)state——>(render)vueComponent
3. 處理異步操作
Redux 的中間件機制,利用 redux-thunk ,redux-thunk可以dispatch函數,這個函數用於生成action,所以在這個函數里我們可以進行異步操作,等異步的結果出來后再放在action里面,將這個action用dispatch分發出去,而這個函數被叫做 “action creator”,可以將異步邏輯放在 action creator 里面,給 action creator 傳入 dispatch 作為參數,於是就可以 dispatch action,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.