[vue warn]: inject() can only be used inside setup()

最新推荐文章于 2024-07-20 16:46:53 发布
最新推荐文章于 2024-07-20 16:46:53 发布
阅读量6.1k 收藏 4
点赞数 10
分类专栏： 前端 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51749295/article/details/129162910
版权

问题背景：最近在用vue3写管理系统的登录功能的时候，在封装axios之后浏览器控制台出现警告： [Vue warn]: inject() can only be used inside setup() or functional components.

原因：因为在vue3中useRouter，useStore要放在setup中引入，我们在封装axios文件中不能直接引入。

1.bug提示：

 2.然后我们就将router,store改为从@router,@store中引入，如下图示：

 最后希望我的方法能给大家一点帮助

 

m0_51749295
关注
  • 10
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
VUE3 中使用 VUEX，报错【[Vue warn] inject() can only be used inside setup() or functional components.】
segegefe的博客
03-01 6330
VUE3 中使用 VUEX，报错【[Vue warn]: inject() can only be used inside setup() or functional components.】 参考链接1：参考链接 vuex 报错 injuce() 参考链接2：vuex 报错 无法在methods中使用store的引入 因为在setup中，已经对store进行了定义，所以不能再在外边的methods中进行访问 javascript fail ··· import { useStore } from
解决vue net :ERR_CONNECTION_REFUSED报错问题
10-14
本文将重点讲解如何解决Vue项目中出现的这个报错问题。 首先，我们分析错误产生的原因。在提供的描述中，作者提到是因为频繁更换网络环境，导致需要在`package.json`的`dev`脚本中更改`--host`参数。在开发过程中，...
vue3的警告问题 [Vue warn]: inject() can only be used inside setup() or functional components. 怎么解决?
随便写写
03-05 858
【2024-3-5 20:20:15 星期二】没有解决, 记录一下。
vue3的两个提示[Vue warn]: 关于组件渲染和函数外部使用
qq_29517595的博客
11-21 3536
vue3的两个提示[Vue warn]:组件渲染和函数外部使用
Vue3 关于router引起的[Vue warn]: inject() can only be used inside setup() or functional
YueMiaoL的博客
08-29 7408
该router的使用会报警告inject() can only be used inside setup() or functional；原因在于useRouter。引入示例：import router from "@/router/index.ts"在setup中使用，因此在模块中调用会出现警告，参考文档。使用useStore同理。...
当vue3提示[Vue warn]: inject() can only be used inside setup() or functional components
热门推荐
qq_18470967的博客
10-28 2万+
以useRouter()为例 <script setup> import { useRouter } from 'vue-router' const buttonGoHome = () => useRouter().push({ name: 'Home' }) </script> 控制台直接报错 警告我们说inject() can only be used inside setup() or functional components. 这是因为，我们要在外面拿一个变量把他
inject() can only be used inside setup() or functional components.
Cupid
08-01 1万+
vue3问题
vue3寻找一天报错 inject() can only be used inside setup() or functional components.
weixin_51958960的博客
02-15 5524
runtime-core.esm-bundler.js:40 [Vue warn]: inject() can only be used inside setup() or functional components.
ts文件引用vue文件方法 inject() can only be used inside setup() or functional components问题解决方案
wnk1997的博客
08-17 846
遇到了一个需求，需要全局拦截接口报错，根据接口报错弹窗，拦截的方法是个ts文件，没被vue引用，公司的通知组件是参考element写的，讲解下思路。element官网： https://element-plus.org/zh-CN/component/notification.html。原因就是单独的ts文件，不能调用vue的方法，如果ts是hooks引入到setup里面用是可以的。XXX这个组件文件里面不能调用vuex等等会报错的东西，但是可以通过接口来调取需要显示的内容。
2020-web前端-vue项目出错-[Vue warn]: Invalid prop: custom validator check failed for prop “index”.
01-08
1.在写循环的时候遇见这个的 原创文章 96获赞 50访问量 6万+ 关注 私信 展开阅读全文 作者：itwangyang520
vue中的inject学习教程
10-17
这时，Vue提供了`provide`和`inject`这对选项，用于祖孙组件间的通信。 `provide`和`inject`允许一个祖先组件向其所有子孙后代注入依赖，无论组件层级多深，只要它们之间存在上下级关系，就能保持通信的有效性。`...
vue-inject:Vue的依赖注入
05-02
告诉Vue关于vue-inject ... // main.js import injector from 'vue-inject' ; import Vue from 'vue' ; Vue . use ( injector ) ; 注册您的服务... // myService.js import injector from 'vue-inject' ; class ...
vue-setup-mixins：vue-setup-mixins
02-15
Practice_s19-s20项目设置npm install编译和热重装以进行开发npm run serve编译并最小化生产npm run build整理和修复文件npm run lint自定义配置请参阅。
pinia仓库中使用router报错 inject() can only be used inside setup() or functional components.
Yydemo1的博客
07-29 475
inject()是调用useRouter后返回的一个函数，警告 只能在setup语法或者函数式组件中使用。所以打印为undefind。
VUE3 中使用 VUEX，报错【[Vue warn]: inject() can only be used inside setup() or functional components.】
板砖工KO水泥匠
04-02 1万+
VUE3 中使用 VUEX，报错【[Vue warn]: inject() can only be used inside setup() or functional components.】 参考链接1：参考链接 vuex 报错 injuce() 参考链接2：vuex 报错 无法在methods中使用store的引入 因为在setup中，已经对store进行了定义，所以不能再在外边的methods中进行访问 javascript fail ··· import { useStore } fro
inject() can only be used inside setup() or functional components报错
weixin_48653095的博客
10-08 2258
inject() can only be used inside setup() or functional components
解决vue2+TDesign使用t-tree树形，报错vue3 inject() can only be used inside setup() or functional components
weixin_45966674的博客
08-26 378
结果项目还很神奇的就跑起来了 这个也可能是官方没有后期维护文档 导致的问题 总的来说 比东西都出不来的强 具体会不会干扰到其他组件的使用 可能还需要认真测试一下。package.json上很明显 我的项目是个vue2的环境 但是 他这里报错的信息 明显特性都是vue3的 就很离谱。此时 我打开node_modules下的 tdesign-vue 发现里面很多用的都是vue3的语法。文档这里 显示 vue2.6同以下版本都是 npm i tdesign-vue。
谷粒商城实战笔记-38-前端基础-Vue-指令-单向绑定&双向绑定
最新发布
epitomizelu的专栏
07-20 531
安全性v-text更安全，因为它总是将数据作为纯文本插入，不解析 HTML。v-html则可能引发安全问题，因为它会解析并渲染 HTML 标签。用途v-text适用于插入文本数据，而v-html适用于插入需要被解析为实际 HTML 的数据。处理 HTML 标签v-text忽略 HTML 标签，将其视为普通文本；v-html则会解析并显示 HTML 标签。二者都是单向绑定，元素绑定model，model不绑定元素，元素值改变时model值不会更新。
[Vue warn]: inject() can only be used inside setup() or functional components.
05-26
这个警告是由于在Vue 3中，inject()只能在setup()或者函数式组件中使用，如果在模板中使用会触发警告。 解决方法： 1. 将inject()函数移动到setup()中 ``` <template> ... </template> <script> import { inject } from 'vue' export default { setup() { const myValue = inject('myValue') ... } } </script> ``` 2. 将组件改为函数式组件 ``` <template functional> ... </template> <script> import { inject } from 'vue' export default { setup(props, { attrs }) { const myValue = inject('myValue') ... } } </script> ``` 注意：如果你想在模板中使用inject()函数，你可以在组件的选项中添加inject属性。这将告诉Vue哪些依赖项应该注入到该组件中： ``` <template> ... </template> <script> export default { inject: ['myValue'], ... } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值