前端：Vuex与Redux比较

虽然Vuex和Redux都从Flux中派生出，与此同时Vuex对Redux部份价值观也有许多先进经验，因此Vuex和Redux有许多不同之处。许多统计数据资料也有如是说二者的对照，但绝大部份传授的较为抽象化，梅西县认知。本栏重新整理二者分野点，与此同时备有国际标准事例展开表明。特别注意责任编辑并非科学普及vuex和redux有关基本概念，有关科学知识文本能在非官方文件格式中查阅。Vuex、Redux

#分野点

#不同之处

state 共享资源统计数据

业务流程完全一致：表述自上而下state，促发，修正state

基本原理相近，透过自上而下转化成store。

#不同之处

vuex表述了state、getter、mutation、action五个第一类；redux表述了state、reducer、action。

vuex促发形式有三种commit并行和dispatch促发器；redux并行和促发器都采用dispatch

vuex中state国际标准化放置，方便快捷认知；reduxstate倚赖大部份reducer的初始值

vuex有getter,目地是方便快捷快捷得到state；redux没有这层，react-redux mapStateToProps参数做了这个工作。

vuex中mutation只是单纯赋值(很浅的一层)；redux中reducer只是单纯设置新state(很浅的一层)。他俩作用类似，但书写形式不同

vuex中action有较为复杂的促发器ajax请求；redux中action中可简单可复杂,简单就直接发送数据第一类（{type:xxx, your-data}）,复杂需要调用促发器ajax（倚赖redux-thunk插件）。

Redux 采用的是不可变统计数据，而Vuex的统计数据是可变的。Redux每次都是用新的state替换旧的state，而Vuex是直接修正

Redux 在检测统计数据变化的时候，是透过 diff 的形式较为差异的，而Vuex其实和Vue的基本原理一样，是透过 getter/setter来较为的

从实现原理上来说：

从表现层来说：

#详细解释

#Vuex

UI跟state、action/dispatch有关

mutations 并行修正state。UI促发采用commit指令

action 内能commit并行state或dispatch促发器另外一个action。UI促发采用dispatch指令

mapState

mapGetters

mapMutations

mapActions

commit 促发mutation并行操作

dispatch 促发action促发器操作

state: 共享资源统计数据

getter: 方便快捷快捷state

mutation: 并行更新，只是简单都赋值

action: 促发器更新，能调用commit来促发同步mutation

类型

促发

库结合（自带）

其他

#Redux

mapStateToProps

mapDispatchToProps

dispatch促发并行或促发器。采用mapDispatchToProps参数

store: 合并大部份reducer，共享资源统计数据

action: 促发函数。是唯一能带上数据修正state的促发第一类。接下逻辑就转移到reducer中

类型

注：也能反过来认知：Vuex的每一次this.$store.commit(type, data) === action(data){ return { type, data}}）

促发 (倚赖react-redux)

库结合（倚赖react-redux）

简单认知，reducer承担了state和mutations功能。 Vuex中commit-mutations是唯一修正state的形式；Redux中dispatch-reducer是唯一修正state形式

#Vuex典型事例

// vuex非常简单易懂，而且重新整理到1个文件即可const state: IState = { login: false, option: { _id: , sub_title: , title: , keyword: , descript: , url: , email: , icp: }}const actions: ActionTree<IState, any> = { // 登录 async login ({ commit }, user: StoreState.Login): Promise<Ajax.AjaxResponse> { commit(USER_LOGINING) const res: Ajax.AjaxResponse = await service.login({ …user }) commit(USER_LOGINING_FINAL) return res },}const mutations: MutationTree<IState> = { USER_LOGINING (state: IState): void { state.login = true }, USER_LOGINING_FINAL (state: IState): void { state.login = false },}export default new Vuex.Store({ state, actions, mutations, modules}) Copied!

#Redux典型事例

// store.jsimport { createStore, combineReducers, applyMiddleware } from reduximport home from ./home/reducerimport demo from ./demo/reducerimport thunk from redux-thunk// reducers获得初始statelet store = createStore(combineReducers({ home, demo }), applyMiddleware(thunk))export default store Copied!

// reducer.jslet defaultState = { demoList: []}export default (state = defaultState, action) => { switch (action.type) { case setDemoList: return { …state, demoList: action.list } default: return state }} Copied!

// action.js// 并行actionexport const setDemoList = list => ({ type: setDemoList, list})// 促发器actionexport const setAsyncList = () => { return async dispatch => { let result = await API.getXXX() dispatch({type: setAsyncList, result}) }} Copied!

// uiconst mapStateToProps = (state) => { return { list: state.demo.demoList }}// const mapDispatchToProps = (dispatch) => {// return {// setDemoList: list => dispatch(setDemoList(list))// }// }// orconst mapDispatchToProps = {setDemoList}export default connect(mapStateToProps, mapDispatchToProps)(Demo) Copied!

#总结

vuex的流向：

view——>commit——>mutations——>state变化——>view变化（并行操作）

view——>dispatch——>actions——>mutations——>state变化——>view变化（促发器操作）

redux的流向：view——>actions——>reducer——>state变化——>view变化（并行促发器一样）