vue3常用代码:监听路由|mitt、project/inject无效|防抖函数|下载函数

文章目录

菜鸟做项目时发现很多 vue3 常用的代码,所以来总结一下!

监听路由

js 复制代码
import { useRoute } from "vue-router";
let router = useRoute();
watch(
  () => router.path,
  (newValue, oldValue) => {
    console.log("watch", newValue, oldValue);
  },
  { immediate: true }
);

mitt、project/inject 无效

如果通信的组件 是 router-view 里面 根据路由加载的 或者 路由有两层嵌套 ,那么不管是 mitt 还是 project/inject 都无法进行组件间的通信,因为 mitt 要能通信必须是该界面已经加载出来了!而 project/inject 不知道为什么,嵌套了两层后,第二层 router-view 里面的组件就无法获取了,会报错

js 复制代码
[Vue warn]: injection "openmenu" not found. 
  at <Resources onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <ElMain> 
  at <ElContainer> 
  at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App>

好像是因为第一层 router-view 被卸载了,所以 project 为 undefined 了!也可能是因为 provide 只能够向下进行传递数据,而路由并不相当于是其子组件!

解决方案

使用pinia、vuex等!

防抖函数 (已封装)

js 复制代码
/**
 * 防抖函数
 * @param {function} fn
 * @param {number} delay
 * @returns {function}
 * 如果函数有参数,直接定义一个常量等于debounce(fn,delay)
 * 调用的时候直接 常量(函数参数) 就行
 *
 */
export const debounce = (fn, delay) => {
  let timer = null;
  return function () {
    let context = this;
    let args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
};

下载函数 (已封装)

详见:常用代码:vue必须配置的部分代码、element ui按需引入、vue动态绑定背景、自适应js、禁止放大、播放声音、store的使用、websocket封装、echarts、swiper、下载函数