eventbus使用_Vuex和EventBus的区别和使用场景（分享探讨）

最新推荐文章于 2022-12-23 13:08:55 发布
最新推荐文章于 2022-12-23 13:08:55 发布
阅读量863 收藏
点赞数
文章标签： eventbus使用

vue的父子组件，兄弟组件之间的通信是平时搬砖也好，前端面试也好，都经常会遇到的问题。作者本人比较菜，从业1年半做的项目都不是很大，Vuex的源码看了，demo也写了，但是就是没有机会用到，没有项目经历每次被问到Vuex为啥不能被EventBus取代这个问题，确实一脸懵逼，某种机缘巧合吧，今天做项目遇到了一个问题，想了想可能终于是时候开始使用Vuex了！


先说下大致的场景，一个多级列表页，文件夹可以打开下级列表，列表中的文件可以下载，因为文件不同源的问题，a标签的download属性应用受限，所以需要自己写http请求+blob来下载文件，文件下载过程不会被浏览器表现出来，所以需要前端自己去同步状态，那么如何记录每个页面没有下载完的文件？因为项目刚起步，还没有引用Vuex，一开始我的想法是引入一个全局变量loading记录正在下载的文件id挂在Vue的原型上，在组件created的时候引用到组件的data中，然后操作引用变量，既能控制自己的页面，也同时修改了全局变量，即使页面被销毁下次还是可以拿到全局存的下载状态，但是我也需要写watch来监听数据的变化，还得写EventBus通知其他页面有新的下载任务或者有下载任务完成。


这个时候问题就有点恶心了，一开始页面的结构是 => 大列表本身就是个组件，列表项也是组件，loading状态写在了列表项里，也就是每个最小的列表项都需要去取一下全局变量，然后这个watch还不能监听全局变量loading，否则watch触发的频率太高，只能监听loading变量下自己对应的key，这还只是获取状态，如何去同步其他页面的相关状态？相关页面都对loading做一个引用？而且每个页面数据层级都有一些差异，有的页面需要写watch甚至有的页面需要deep watch，有的页面可能需要直接引用在模板里，这里loading是个引用类型还好，要是值类型的全局变量去同步，你这边动了全局如何同步？其他组件如何同步？不都是要自己填坑。


感觉项目做大了逻辑会很混乱，性能也会受到影响。算了算了，不往下搞了，此时不用Vuex更待何时，开始疯狂改代码，增加了一些逻辑判断、取消了列表项那层组件并引入了Vuex。真香啊！state下面存loading用于给新加载的页面提供下载中的项目，再来一个count来记录下载中的项目，来个id记录下载好的项目，compute+watch这个变量的改变来同步已下载完成的项目。改完了发现能用，真爽。10点多溜了溜了下班回家！


回家路上继续想还有什么情况EventBus不好处理需要Vuex的场景，大致的想法是：


情况1：比如两个层级比较深的组件，左屏一个右屏一个，之间发生一些数据交互还需要同步，并且还要同步到不是最高父级上层组件中，没准还要进行一些数据记录，甚至交互其他更多的组件，props就不用想了，一层一层上去再一层一层下来那可真蠢，那eventbus呢？需要写多少个emit和on，而且绑定emit和on=在非父级组件上注册完还需要销毁，否则会出现重复绑定的问题。


情况2：EventBus是一种事件的传递，a和b是兄弟组件，我在a的子组件进行了一些修改，此时b还没有创建，我想渲染b组件并在b组件的子组件拿到刚才a组件操作的数据，然后我对b进行了一系列操作，想回到已被销毁的a组件再干点事情，EventBus慌得一b，此时甚至还没有localstorage好用，但是localstorage毕竟不是响应式的，取出来修改再同步，取出来用用完再同步，而且此时也不会有其他组件收到你修改的操作，如果这时候顶部导航栏菜单栏之类的也想同步个状态呢？你怎么去触发他们的生命周期？又要写更多的EventBus~


最后说说什么情况比较适合EventBus：


情况1：个人认为单页面应用的最父级组件上的提示遮罩比较适合用EventBus触发，因为最父级不会被销毁，EventBus不需要重复的解绑和绑定，即使绑定很多事件的处理也不会使逻辑太乱，比如最顶层的提示弹层，加载弹层等，如果子组件各自都有弹层，那更适合把弹层相关的逻辑提出去，再mixin到每个组件里。


情况2：深层级组件之间的简单通信，因为深层级组件经常被销毁重建，每次建立和移除相关EventBus都会有性能的开销，尤其是列表项组件，数量巨大，每个上面都写$emit对页面本身也不太友好，就好比ul的事件委托优化li的onclick事件一样，EventBus应往父组件上绑定，通过props传递，但是EventBus交互不易过多，逻辑不直观并且不便于维护
Vuex实战第一天，肯定思想上有诸多漏洞，但愿不会误导比我更萌新的萌新~
作者：zpkzpk
链接：https://www.jianshu.com/p/5628bb944571
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

weixin_39594457
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vuex module与eventbus的简化使用
snailmar的博客
07-05 1897
eventbus 至于什么是eventbus,可以百度了解一下.使用方法如下 //bus.js import Vue from 'vue' var $bus=new Vue() //我们采用把$bus挂载在原型上的方式,这样我们只需要在main.js中导入bus.js即可 Vue.prototype.$bus=$bus //componentA.vue <template> <div class="ca"> <div @click="handleClick"&gt
EventBus的介绍和使用
01-03
EventBus的介绍和使用EventBus的介绍作用引入成员综合小案例:1,Activity中的布局:2 Activity中的代码:3 fragment中的代码:4 .fragment中的布局只有一个textView 不放代码了.线程模型线程模型的用处:官方网址: ...
eventBus VSvueX
chris1299的博客
07-05 1532
EventBus & Vuex? 组件通信 在很久很久以前，在Vue王国里有一个组件塔，有一个组件家族，A,B,C，组件父亲A和儿子B,C生活在不同的层级之间,他们相隔非常远。 父->子 这个时候，父亲想念儿子了，想给他寄信，怎么办呢？简单！在每一个子组件上都有一个props “邮箱”，通过这个邮箱，父亲可以直接投递邮件(data) Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props
EventBus & Vuex?
weixin_34228617的博客
12-07 2900
前几天有盆友在群里问,vue.$emit和$on可以跨组件完成全局通信，那岂不是可以完全代替vuex，为啥还要用vuex呢。 这个问题就要从eventbu事件总线s和vuex起源说起了。 (趁着尤大的vue3.0还在路上，我们来炒炒现饭) 组件通信 在很久很久以前，在Vue王国里有一个组件塔，有一个组件家族，A,B,C，组件父亲A和儿子B,C生活在不同的层级之间,他们相隔非常远。 父->子 ...
Vue基础整理之 组件数据共享 Eventbus/vuex
weixin_45966674的博客
04-25 246
这样所有组件都可以通过 this.dom 起到这个变量了，但这种写法只适合一些全局方法的定义，而且不能改变 一旦需要改变，这个写法很可能因为多次调用产生意外。这样我们就可以在其他组件中通过this.$store.state.dom 拿到这个dom值了。我们还可以在组件中引入vuex的mapState将全局属性定义为当前组件的计算属性。这样在当前组件中就可以通过this.dom拿到vuex中的dom值啦。在main.js中引入store.js 并挂在。在store.js中引入vuex。
状态管理方案Vuex VS Bus
cristina_song的博客
07-26 969
有的时候一个事件，对应的模块都要找半天，而vuex相当于中介，又可以看作是模块化，一种对事件通信的模块化处理。对一个事件，vuex大体可以看作四步，第一到action里面查到这个事件的触发，第二到mutaction里面查看对应处理，第三步改变store的状态，第四部getter视图渲染；vuex三个关键词：action,mutation,store,中文意思：活动的，突变的，储存的，注意actio...
Flutter中EventBus的使用
01-07
参考文档：电梯直达 EventBusUtils //订阅者回调签名 typedef void EventCallback(arg);... static EventBus _singleton = new EventBus._internal(); /// 工厂构造函数 factory EventBus() => _singleton; /// 保
详解vue 组件之间使用eventbus传值
01-21
当然，使用存储也是可以得，但是并非一定要缓存，当然在vue中有推荐了我们去使用vuex去数据交互，Vuex会让你的Vue代码足够灵活可控，把数据统一存入state, 只允许通过Actions触发Mutations修改。然而，有时候我们的...
Android 中 EventBus 的使用之多线程事件处理
09-03
本篇文章将深入探讨Android中EventBus如何处理多线程事件，以及它相较于其他异步处理机制（如AsyncTask、Loader和Executor）的优势。 首先，Android提供了多种异步处理方式。AsyncTask是开发者最常使用的工具，它...
在Uni中使用Vue的EventBus总线机制操作
11-19
创建完$EventBus后，就可以直接在页面中使用事件总线的方法来发送和接收事件了 第二种做法：封装事件总线 使用的时候直接引入就可以了 补充知识：vue里使用EventBus解决兄弟组件间的传递信息 ①初始化 import ...
vue中eventbus被多次触发以及踩过的坑
01-19
一开始的需求是这样子的，我为了实现两个页面组件之间的数据传递，假设我有页面A，点击页面A上的某一个按钮之后，页面会自动跳转到页面B，同时我希望将页面A上的某一些参数携带过去给页面B。（我知道，小参数的时候可以通过路由的params或者query去传参数，或者大型数据可以用vuex来处理，很遗憾我到现在还没有做很大型的项目，所以还没有用过vuex，接下来会学习一下。） 然后我就想，这不就是不同组件之间的数据传递问题而已吗？直接用bus 巴士事件来传递数据不就行了吗。于是，我就很愉快地进行了。关于vue中的eventbus的使用，我之前在一篇vue中的数据传递中有提到过。 先给你们看一下我一开始的
vuex和event-bus有什么不同
weixin_44979432的博客
12-23 603
vuex和event-bus有什么不同。
2021-11-04 学习记录--Vue-事件总线（EventBus）和Vuex的区别
weixin_48850734的博客
11-04 2045
一、事件总线和Vuex的区别 一、事件总线（EventBus） 事件总线是所有组件公用滴事件中心，可以向该中心： 发送事件【通过this.$bus.$emit('事件名');】 　或　 接收事件【通过this.$bus.$on('事件名',() => {})】 1、全局事件总线 【举例：假如有首页Home.vue、组件Scroll.vue、组件GoodsList.vue、组件GoodsListItem.vue，它们之间的关系被我用一张图展示出来： 】 第一步、初始化 在main.js中进行初始化：
Vue事件总线（EventBus）使用详细介绍
xiaokanfuchen86的博客
04-22 234
前言 vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过props向下传数据给子组件，当子组件有事情要告诉父组件时会通过$emit事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？ 如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的事件总线，即 **EventBus**来通...
震惊！！！一眼就能看懂的mixin与vuex，公共组件Bus之间的区别
m0_52009348的博客
07-02 396
**mixin与vuex，公共组件Bus之间的区别** vuex：是用来做状态管理的，里面定义的变量在每个组件中都可以进行使用和修改，我们在其中任一组件进行更改vuex中变量的值，其他组件对应的值也会随之改变； mixins：一样定义共用的变量，在每个组件中使用，引用组件时，各个组件中的值相互独立，改变一个组件中的变量值，其他组件对应的值不会进行变化； 公共组件Bus：在父组件中引入组件，相当于父组件提供了一片区域给子组件使用，然后通过props进行传值，但本质上还是相对独立的； ...
eventBus
weixin_50402587的博客
11-10 593
1.在一个组件里面 引入eventbus import eventBus from ‘…/mlib/util/eventbus.js’; beforeDestroy(){ var that = this; eventBus.$emit('configItemKey', { 'configItemKey': that.configItemKeylist, 'type': that.type, 'scrollTop':this.scr
vue中组件间(非父子组件)通信的两种方法：eventbus与vuex的使用
Femi的博客欢迎大家
04-28 3765
父子组件的通信请查看这篇博文 此文主要介绍兄弟组件间的通信 所有组件通信方式请查看这篇博文 第一种：eventbus 创建bus.js export default(Vue) => { const eventBus = new Vue() Vue.prototype.$bus = { $on (...param) { eventBus.$on(...p...
EventBus详解 (详解 + 原理)
热门推荐
m0_49508485的博客
11-10 3万+
EventBus简介EventBus是一个开源库，由GreenRobot开发而来，是用于Android开发的 “事件发布—订阅总线”，用来进行模块间通信、解藕。它可以使用很少的代码，来实现多组件之间的通信。Android系统中的事件通信则是 handler (消息机制) 和 BroadCastReceiver (广播机制)，通过它们可以实现组件之间的事件通讯。缺点在于，代码量多、组件之易产生藕合引用。EventBus产生的背景。
Vue组件六种通信方式的优缺点及应用场景
weixin_47111901的博客
04-23 4433
前言 在做vue项目中，组件之间的通信是必不可少的，但是vue有多少种方式、用法、优缺点及适用场景，本篇文章大概总结一下。（本篇摘抄[Vue组件通信方式及其应用场景总结](https://juejin.cn/post/6903796293445877773)并根据自己的理解做了修改） props 基本用法 ...
eventbus使用_.net core中EventBus/EventQueue应用
最新发布
06-07
在 .NET Core 中，可以使用 RabbitMQ、Azure Service Bus、Kafka 等消息队列作为 EventBus/EventQueue 的实现。以下是一个使用 RabbitMQ 的示例： 1. 安装 RabbitMQ 可以通过官网下载 RabbitMQ 安装包进行安装。 2. 安装 RabbitMQ.Client 在 .NET Core 项目中，可以通过 NuGet 安装 RabbitMQ.Client 包。 3. 配置 RabbitMQ 连接信息 在 appsettings.json 文件中，添加 RabbitMQ 连接信息： ``` { "RabbitMQ": { "HostName": "localhost", "UserName": "guest", "Password": "guest", "Port": 5672 } } ``` 4. 创建 EventBus/EventQueue 可以通过继承 IEventBus 接口来实现 EventBus，或者通过使用 RabbitMQ 的 API 创建 EventQueue。 以下是一个使用 RabbitMQ 的示例： ``` public class RabbitMQEventBus : IEventBus { private readonly IRabbitMQPersistentConnection _persistentConnection; private readonly ILogger<RabbitMQEventBus> _logger; private readonly IEventBusSubscriptionsManager _subsManager; private readonly string _exchangeName = "event_bus_exchange"; public RabbitMQEventBus(IRabbitMQPersistentConnection persistentConnection, ILogger<RabbitMQEventBus> logger, IEventBusSubscriptionsManager subsManager) { _persistentConnection = persistentConnection ?? throw new ArgumentNullException(nameof(persistentConnection)); _logger = logger ?? throw new ArgumentNullException(nameof(logger)); _subsManager = subsManager ?? new InMemoryEventBusSubscriptionsManager(); } public void Publish(IntegrationEvent @event) { if (!_persistentConnection.IsConnected) { _persistentConnection.TryConnect(); } using (var channel = _persistentConnection.CreateModel()) { var eventName = @event.GetType().Name; var message = JsonConvert.SerializeObject(@event); var body = Encoding.UTF8.GetBytes(message); channel.ExchangeDeclare(exchange: _exchangeName, type: "direct"); var properties = channel.CreateBasicProperties(); properties.Persistent = true; channel.BasicPublish(exchange: _exchangeName, routingKey: eventName, basicProperties: properties, body: body); } } public void Subscribe<T, TH>() where T : IntegrationEvent where TH : IIntegrationEventHandler<T> { var eventName = typeof(T).Name; _logger.LogInformation($"Subscribing to event {eventName}"); _subsManager.AddSubscription<T, TH>(); } public void Unsubscribe<T, TH>() where T : IntegrationEvent where TH : IIntegrationEventHandler<T> { var eventName = typeof(T).Name; _logger.LogInformation($"Unsubscribing from event {eventName}"); _subsManager.RemoveSubscription<T, TH>(); } } ``` 5. 注册 EventBus/EventQueue 可以通过依赖注入的方式注册 EventBus/EventQueue。以下是一个使用 RabbitMQ 的示例： ``` services.AddSingleton<IRabbitMQPersistentConnection>(sp => { var logger = sp.GetRequiredService<ILogger<DefaultRabbitMQPersistentConnection>>(); var factory = new ConnectionFactory() { HostName = Configuration["RabbitMQ:HostName"], UserName = Configuration["RabbitMQ:UserName"], Password = Configuration["RabbitMQ:Password"], Port = int.Parse(Configuration["RabbitMQ:Port"]) }; return new DefaultRabbitMQPersistentConnection(factory, logger); }); services.AddSingleton<IEventBusSubscriptionsManager, InMemoryEventBusSubscriptionsManager>(); services.AddSingleton<IEventBus, RabbitMQEventBus>(); ``` 6. 发布/订阅事件 可以通过 IEventBus 接口的 Publish 和 Subscribe 方法来发布/订阅事件。以下是一个使用 RabbitMQ 的示例： ``` _eventBus.Subscribe<TestIntegrationEvent, TestIntegrationEventHandler>(); _eventBus.Publish(new TestIntegrationEvent() { Message = "Hello, world!" }); ``` 其中 TestIntegrationEvent 是一个继承自 IntegrationEvent 的事件类，TestIntegrationEventHandler 是一个实现了 IIntegrationEventHandler<TestIntegrationEvent> 接口的事件处理程序类。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值