Redux 和 Vuex 的区别

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.

posted @   Miraitowa-  阅读(2006)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 上周热点回顾(1.20-1.26)
点击右上角即可分享
微信分享提示