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

问题引入

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

但是运行时却出现了报错

问题解决

useRouter() 是 Vue Router 提供的组合式 API,它只能在 Vue 组件的 setup() 函数中有效。如果在其他地方(例如 Axios 的拦截器中)调用它,可能会导致 routerundefined,因为这时没有 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(),这提供了更大的灵活性和便利性,让我们可以更轻松地进行状态管理。

相关推荐
小白求学15 分钟前
CSS响应式布局
前端·css
Minyy1121 分钟前
小程序项目实践(一)--项目的初始化以及前期的准备工作
开发语言·前端·git·小程序·gitee·uni-app
程序员大金42 分钟前
基于SpringBoot+Vue+MySQL的药品销售管理系统
java·vue.js·spring boot·mysql·tomcat·intellij-idea·mybatis
谢尔登1 小时前
【React】如何对组件加载进行优化
前端·react.js·前端框架
华实coding1 小时前
ajax实现添加数据
前端·ajax·okhttp
黄毛火烧雪下1 小时前
React 为什么 “虚拟 DOM 顶部有很多 provider“?
前端·javascript·react.js
Meowmow1 小时前
React学习01 jsx、组件与组件的三大属性
前端·学习·react.js
岁聿云暮1 小时前
机械臂之贝塞尔曲线的应用
前端·vue.js
霸气小男1 小时前
react 封装防抖
前端·javascript·react.js
張三同学1 小时前
仿IOS桌面悬浮球(支持拖拽、自动吸附、自动改变透明度与点击、兼容PC端与移动端)
前端·javascript