报错： vue3 使用 inject provide 提供全局变量 报错 [Vue warn]: inject() can only be used inside setup() or functional functional components.

场景

main.js

 // main.js使用provide 提供全局变量,做图片的url
app.provide('imgurl', 'http://api.baidu.com/')

pro.js

<script setup>
import { ref,reactive,onMounted,inject, computed } from 'vue'
//错误用法
let url=inject('imgurl')+dataFormAdd.xkz_pic
</script>

出现上面的报错

解决办法

百度了一圈，经过测试，了解到，这个消息是提示我们，需要将引入的方法作为一个变量使用，

正确用法

<script setup>
import { ref,reactive,onMounted,inject, computed } from 'vue'
//将inject('imgurl')保存在一个变量或者常量中就不会报错了
const baseurl=inject('imgurl')
let url=baseurl+dataFormAdd.xkz_pic
</script>

或者直接在模版中渲染也不会报错

 <img class="pro_img" :src="inject('imgurl')+scope.row.mainimage" alt="">