随机掉落的项目足迹:解决TypeError: Cannot read properties of undefined (reading ‘push‘)报错

问题引入

下面是request.js中请求拦截器相关的代码

但是运行时却出现了报错

问题解决

useRouter() 是 Vue Router 提供的组合式 API,它只能在 Vue 组件的 setup() 函数中有效。如果在其他地方(例如 Axios 的拦截器中)调用它,可能会导致 router 为 undefined,因为这时没有 Vue 组件的上下文。

要解决这个问题,可以将将 useRouter() 替换为直接导入 router 实例

通过直接导入 router,你避免了上下文的问题。这意味着无论在什么地方(如 Axios 拦截器),都可以访问到路由实例,从而安全地调用 router.push() 来进行导航

类比思考

写到这里我又想到,pinia仓库的函数,比如useUserStore()为什么就可以脱离setup(),直接在请求拦截器中调用呢?

通过询问AI后得知:const userStore = useUserStore() 并没有报错是因为 Vue 3 和 Pinia 设计允许这种用法,Pinia 允许我们在任何地方调用 useUserStore(),即使是在请求拦截器中,而不仅仅是在组件的 setup() 函数中

在请求拦截器中直接调用 useUserStore() 可以避免在每个请求中重复获取 store。这种做法提高了代码的复用性,减少了复杂性

Pinia 的设计使得 useUserStore() 可以在任何地方调用而不局限于 setup(),这提供了更大的灵活性和便利性,让我们可以更轻松地进行状态管理。

相关推荐
修炼的dance3 分钟前
白底图存JPG,sharp开mozjpeg背景杂点少近三成
前端
anOnion12 分钟前
构建无障碍组件之Grid Pattern
前端·html·交互设计
乔旭伟34 分钟前
Vben3 中后台表格封装实战:useVbenVxeGrid 的全局收敛与七个坑
前端·anti-design-vue·1024程序员节
鶴哥只手遮天43 分钟前
jQuery 4.0 源码架构与工程实践-第 10 章 尺寸、几何与显隐
前端·javascript·jquery
Mia_墨黎44 分钟前
2026 Windows 11 终端美化完全指南
前端·后端
用户1880687493521 小时前
戴着 Rokid 接成语:用 AIUI 做一局有提示、有复盘的“接着说”
前端
Sakura_j_h_1 小时前
Three.js 单文件离线机械臂工作台:爆炸图、透明外壳与剖面
前端·机械臂·webgl·three.js·1024程序员节·esbuild
计算机魔术师3 小时前
管谷歌的不是Pichai一个人,是一整层AI智能体
前端
米米商聊3 小时前
图标能点,按钮就可用了吗?键盘、名称与收藏状态
前端·javascript
Younglina3 小时前
三个晚上,我和 WorkBuddy 做了个生图网站
前端·后端·ai编程