vue keepalive全局点击,根据改变在当前页面发送请求

vue keepalive遇到的问题

最近负责的一个农垦局项目,使用keepalive缓存组件的时候遇到一个问题;
该系统页面的结构为左边栏是一个所有农场的树组件,该组件为全局组件,即页面的切换路由的改变不会影响该组件,只切换右边的组件,因为考虑到页面的快速渲染因此使用了vue的keepalive组件。
交互需要为: 在左边选择树节点之后,右边页面需要携带已选择的节点id请求后端。
在这里插入图片描述


此时就存在几个问题:
1.左边栏树节点选择之后,需要右边的当前页面侦听,立即发送请求
2.左边栏节点改变之后,所有页面组件都需要记录这个改变,在下次打开该页面的时候发送请求
3.如果左边的树没有改变的话不应该发送请求,消耗没有意义的带宽

第一点的话很好解决用watch侦听就行,但是如果所有页面都使用watch侦听,必然会导致非当前路由的页面发送不必要的请求。
第二点可以配合activited钩子进行解决,但是也会产生一个新的问题,就是每次打开keepalive的页面都会调用该钩子发送请求,消耗没有必要的带宽,影响js性能


解决办法

在这里插入图片描述

在左边树组件中使用addEventListener绑定一个事件,使用一个map集合接收目标方法,代码如下:

在这里插入图片描述

在这里插入图片描述

回调函数中的逻辑为:判断当前路由是否为配置的路由(即route),是的话就直接遍历运行方法数组,如果不是的话就代表需要往map中存入已配置的路由(route)为key,funcList为value的集合数据,使用Map的原因是:map中key唯一存在,如果存入同一个key的数据会覆盖掉之前的,能保证遍历map的时候方法只运行一次;

在watch中侦听路由的改变,确定当前路由中有没有需要运行的方法,如果有的话匹配key,遍历运行方法,然后删除该索引;


在对应的页面中调用该事件,参数一为需要配合左边树运行的方法数组,参数二为路由name
在这里插入图片描述


需要改进的地方是,记录的只是对树的点击,并不能真正的做到匹配树的改变


end-----------------------------------

个人拙见,如果有错误请帮忙改正!