vuex与redux比较

发布时间 2023-11-17 16:02:21作者: 柯基与佩奇

相同点

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 的流向:
view——>commit——>mutations——>state 变化——>view 变化(同步操作)
view——>dispatch——>actions——>mutations——>state 变化——>view 变化(异步操作)

redux 的流向:
view——>actions——>reducer——>state 变化——>view 变化(同步异步一样)