目录getCurrentInstance与ts结合使用vue3+ts使用getCurrentInstance报错总结getCurrentInstance与ts结合使用 Vue3项目中
const { proxy } = getCurrentInstance()
在ts中使用会报错:报错:...类型“ComponentInternalInstance | null”
我们在项目中一般会用到很多getCurrentInstance()方法,直接封装一下
创建useCurrentInstance.ts文件:
import { ComponentInternalInstance, getCurrentInstance } from 'vue'
export default function useCurrentInstance() {
const { appContext } = getCurrentInstance() as ComponentInternalInstance
const proxy = appContext.config.globalProperties
return {
proxy
}
}
组件内使用:
<script lang="ts">
import { defineComponent } from "vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
export default defineComponent({
setup() {
const { proxy } = useCurrentInstance();
console.log(proxy);
},
});
</script>
vue3中没有this + 各种api的方法
vue3提供的方法,创建类似于this的实例。
const instance = getCurrentInstance()
const a1= getCurrentInstance();
a1.$toast({type: 'error', text: '登录失败' });
这种只适合本地调试,运行到线上就会报错,报错详情为:
类型“ComponentInternalInstance | null”上不存在属性“proxy”。ts(2339)
然后下面会报这个错误
Unsafe member access .$axiOS on an `any` value. eslint@typescript-eslint/no-unsafe-member-access
Unsafe call of an `any` typed value. eslint@typescript-eslint/no-unsafe-call
原因:
getCurrentInstance()的返回类型存在null所以在此处添加断言即可。
在proxy后面添加?来过滤null的结果,即:
const instance = getCurrentInstance()?.proxy
instance ?.$toast('请xxx!')
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: Vue3之getCurrentInstance与ts结合使用的方式
本文链接: http://www.lsjlt.com/news/210614.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0