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.query不变的问题,route.push.query解决了刷新页面,eventbus数据就没的问题。
.
.
.
.
.
.