首页 > 其他分享 >vuex与redux比较

vuex与redux比较

时间:2023-11-17 16:15:36浏览次数:115  
标签:异步 reducer state redux vuex 比较 view

相同点

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 变化(同步异步一样)

标签:异步,reducer,state,redux,vuex,比较,view
From: https://www.cnblogs.com/wp-leonard/p/17838979.html

相关文章

  • 手写基础vuex
    实现一个插件:声明Store类,挂载$storeStore具体实现:创建响应式的state,保存mutations、actions和getters实现commit根据用户传入type执行对应mutation实现dispatch根据用户传入type执行对应action,同时传递上下文实现getters,按照getters定义对state做派......
  • 重写Java中Arrays数组工具类提供的sort()排序函数中的比较器类Comparator的compare()
    排序方法是我们日常开发或者写功能函数,或者实现算法时,常调用的方法。有时甚至,开发人员自己还要写一写排序算法。今天,我们来修改Java官方提供的Arrays工具类中的静态排序sort()方法。反问一下,为什么要重写呢?官方提供的还不够你用?回答:确实不够用,官方默认是对数字,特别是sort比较的......
  • vue2.0源码简读(7. Vuex)
    7.1Vuex初始化这一节主要来分析Vuex的初始化过程,它包括安装、Store实例化过程2个方面。安装当在代码中通过importVuexfrom'vuex'的时候,实际上引用的是一个对象,它的定义在src/index.js中:exportdefault{Store,install,version:"__VERSION__",mapSt......
  • Integer数字的比较
    1.定义两个Integer变量,如下图所示2.当使用Integer创建变量时,底层使用valueOf方法将int数据进行自动装箱,底层代码如下1publicstaticIntegervalueOf(inti){2if(i>=IntegerCache.low&&i<=IntegerCache.high)3returnIntegerCache.cache[i......
  • 如何优雅使用 vuex
    大纲本文内容更多的是讲讲使用vuex的一些心得想法,所以大概会讲述下面这些点:Q1:我为什么会想使用vuex来管理数据状态交互?Q2:使用vuex框架有哪些缺点或者说副作用?Q3:我是如何在项目里使用vuex的?初识vuex对于vuex,有人喜欢,有人反感喜欢的人觉得它可以很好的解决复杂的数......
  • 9--844. 比较含退格的字符串
    给定 s 和 t 两个字符串,当它们分别被输入到空白的文本编辑器后,如果两者相等,返回 true 。# 代表退格字符。注意:如果对空文本输入退格字符,文本继续为空。 示例1:输入:s="ab#c",t="ad#c"输出:true解释:s和t都会变成"ac"。示例2:输入:s="ab##",t="c#d#"输......
  • 操作符之间的优先级(高到低):算数操作符 → 比较操作符 → 布尔(逻辑)操作符 → “=”赋值
    执行以下程序,输出结果为()vara=4>=6||true&&1||false;console.log(a);AtrueBfalseC1D4>=6正确答案:C赋值语句右侧的表达式含有关系运算符、逻辑运算符,其运算符的优先级是:关系运算符>逻辑运算符(先&&后||)。因此,先执行关系运算:4>=6,返回结果为false,再执行逻辑......
  • 【C 语言基础】double类型大小比较的方法——以Java为例
    问题在Java中,int类型数据的大小比较可以使用双等号,double类型则不能使用双等号比较大小(0,0==0.0 是不可以的),那若使用double类型时怎么进行比较呢? 方法(1)转换为字符串如果要比较的两个double数据的字符串精度相等,可以将数据转换成string然后借助string的equals方法来间接......
  • 深入理解 Vuex
    Vue.js是一款轻量级、灵活且易学的前端框架,但随着应用的复杂性增加,组件之间的状态管理变得愈发复杂。为了解决这一问题,Vue.js提供了一个强大的状态管理工具——Vuex。在本篇博客中,我们将深入探讨Vuex的核心概念和使用方法,并通过实例演示如何优雅地管理应用状态。什么是Vuex?Vue......
  • 2.4 Windows驱动开发:内核字符串拷贝与比较
    在上一篇文章《内核字符串转换方法》中简单介绍了内核是如何使用字符串以及字符串之间的转换方法,本章将继续探索字符串的拷贝与比较,与应用层不同内核字符串拷贝与比较也需要使用内核专用的API函数,字符串的拷贝往往伴随有内核内存分配,我们将首先简单介绍内核如何分配堆空间,然后再以......