eventBus和$route.push.query同时用解决eventBus持久化问题,和跨组件引起的路由传参监听不到没变化的问题

简介: eventBus和$route.push.query同时用解决eventBus持久化问题,和跨组件引起的路由传参监听不到没变化的问题

eventBus和$route.push.query同时使用,解决eventBus持久化问题,和跨组件引起的路由传参监听不到没变化的问题

将近两天高强度加班,我居然发现了这个,eventBus和$route.push.query同时使用,居然可以解决eventBus刷新数据就消失不持久的问题。

这个可以很好解决跨组件或者跨文件实现组件通信的问题

有人会说,你怎么不用vuex呢?vuex持久化也很麻烦,得封装持久化组件,最主要的就是,我这个项目只能用cookies,不能使用localStorage和sessionStorage,跨n个文件组件,那4kb的空间用完怎么办?还那么麻烦。

直接上代码

MenuTree.vue

// eventBus传递一次
this.$eventBus.$emit('typeId', item._id) 
this.$eventBus.$emit('lineBus', item.kf_online) 
this.$eventBus.$emit('versionBus', item.version) 
// 路由参数传递一次
this.$router.push({
 path:`/knowledge/${item.type}`,
 query:{
     typeId: item._id,
     online: item.kf_online,
     version: item.version,
     }
})

跨n个文件组件的content.vue

<span :title="title">{{kfVersion}}</span>
data() {
    return {
      types: this.$route.query.typeId,     // 将路由的数据保存到data
      kfVersion:  this.$route.query.version,
      kfLine: this.$route.query.online,
    };
  },
//  这个时候有人会说,这不就拿到数据了吗,bus完全冗余,没啥作用
//  开始我也这么认为的,后来我哭了,跨n个文件n个组件,$route.push.query拿动态数据的时候,它不变,就是watch监听也监听不到,undefind还是什么,我忘记了,这就是难受的地方,猜测估计是那个组件销毁了,所以拿不到。
 created(){    
    this.$eventBus.$on('typeId',(id)=>{        // 拿eventbus传过来的数据,放在data里
      this.types = id
    })
    this.$eventBus.$on('lineBus',(id)=>{
      this.kfLine = id
    })
    this.$eventBus.$on('versionBus',(id)=>{
      this.kfVersion = id
    })
  },
可以做个实验:
1、注调eventbus的接收,MenuTree.vue中改变version,kfVersion是并不会变化的,取消注释就好了。
2、把data里的 kfVersion:  this.$route.query.version,换成 kfVersion: "", 这个时候kfVersion的值就来自于eventbus了,刚加载,dom那里显示空。MenuTree.vue中改变version,然后正常跟着变化。但是一刷新数据就没了。
// 现在data里的数据就可以使用了,刷新不会消失
// 如果没有eventbus,MenuTree.vue里typeId、online、version变化,content.vue里拿到的这几个数据不会变化,可以说eventbus,解决了跨n文件n组件引起的$route.push.query不变的问题,$route.push.query解决了刷新页面,eventbus数据就没的问题。

可以做个实验:

1、注调eventbus的接收,MenuTree.vue中改变version,kfVersion是并不会变化的,取消注释就好了。

2、把data里的 kfVersion: this.$route.query.version,换成 kfVersion: “”, 这个时候kfVersion的值就来自于eventbus了,刚加载,dom那里显示空。MenuTree.vue中改变version,然后正常跟着变化。但是一刷新数据就没了。

结论

1、现在data里的数据就可以使用了,刷新不会消失

2、如果没有eventbus,MenuTree.vue里typeId、online、version变化,content.vue里拿到的这几个数据不会变化,可以说eventbus,解决了跨n文件n组件引起的r o u t e . p u s h . q u e r y 不 变 的 问 题 , route.push.query不变的问题,route.push.queryroute.push.query解决了刷新页面,eventbus数据就没的问题。

.

.

.

.

.

.

能力有限,有很多地方可能有误,大佬们如果知道,欢迎留言。
目录
相关文章
|
开发者 C# C++
揭秘:如何轻松驾驭Uno Platform,用C#和XAML打造跨平台神器——一步步打造你的高性能WebAssembly应用!
【8月更文挑战第31天】Uno Platform 是一个跨平台应用程序框架,支持使用 C# 和 XAML 创建多平台应用,包括 Web。通过编译为 WebAssembly,Uno Platform 可实现在 Web 上运行高性能、接近原生体验的应用。本文介绍如何构建高效的 WebAssembly 应用:首先确保安装最新版本的 Visual Studio 或 VS Code 并配置 Uno Platform 开发环境;接着创建新的 Uno Platform 项目;然后通过安装工具链并使用 Uno WebAssembly CLI 编译应用;最后添加示例代码并测试应用。
590 0
|
缓存 测试技术 Linux
【好用的个人工具】部署Dokcer容器速查表工具
【7月更文挑战第13天】部署Dokcer容器速查表工具
124 1
|
druid Java 数据库连接
MyBatisPlus简介及案例
MyBatisPlus简介及案例
510 0
|
关系型数据库 MySQL 数据库
MySQL--创建用户命令grant语句学习(详细学习)
MySQL--创建用户命令grant语句学习(详细学习)
1277 1
|
机器学习/深度学习 自然语言处理 算法
python在Keras中使用LSTM解决序列问题
python在Keras中使用LSTM解决序列问题
|
弹性计算 Kubernetes Java
在本地 IDE 中快捷执行远程服务器命令 Command
Cloud Toolkit 新版本发布,允许开发者在本地 IDE 中快捷执行远程服务器命令 Command。
1491 73
|
安全 Java 测试技术
Intellij IDEA基于Springboot的远程调试
Intellij IDEA基于Springboot的远程调试
795 0
Intellij IDEA基于Springboot的远程调试
ReadWriteLock 读写之间互斥吗?我竟然答不上来。。
ReadWriteLock 读写之间互斥吗?我竟然答不上来。。
226 0
ReadWriteLock 读写之间互斥吗?我竟然答不上来。。
|
搜索推荐 JavaScript API
vue2的$refs在vue3组合式API中的替代方法
如果你有过vue2的项目开发经验,那么对$refs就很熟悉了。由于vue3的断崖式的升级,在vue3中如何使用$refs呢?想必有遇到过类似的问题,我也有一样的疑惑。通过搜索引擎和github,基本掌握如何使用$refs。在vue3中使用组合式API的函数ref来代替静态或者动态html元素的应用。
1185 0
vue2的$refs在vue3组合式API中的替代方法
|
Kubernetes 前端开发 持续交付
自动化集成:Kubernetes容器引擎详解
Kubernetes简称K8S,是一个开源的分布式的容器编排引擎,用来对容器化应用进行自动化部署和管理,让部署容器化的应用简单并且高效,支持自动化部署、大规模可伸缩、应用容器化管理。
676 0
自动化集成:Kubernetes容器引擎详解