Vue3之getCurrentInstance与ts如何结合使用

这篇文章主要介绍“Vue3之getCurrentInstance与ts如何结合使用”，在日常操作中，相信很多人在Vue3之getCurrentInstance与ts如何结合使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue3之getCurrentInstance与ts如何结合使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

成都创新互联公司 - 四川乐山服务器托管，四川服务器租用，成都服务器租用，四川网通托管,绵阳服务器托管，德阳服务器托管，遂宁服务器托管，绵阳服务器托管，四川云主机，成都云主机，西南云主机，四川乐山服务器托管，西南服务器托管，四川/成都大带宽，成都机柜租用，四川老牌ＩＤＣ服务商

getCurrentInstance与ts结合使用

vue3项目中，如果不用ts这样使用是没问题的

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+ts使用getCurrentInstance报错

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！')

到此，关于“Vue3之getCurrentInstance与ts如何结合使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

名称栏目：Vue3之getCurrentInstance与ts如何结合使用
URL链接：https://www.cdcxhl.com/article16/ihhcdg.html

成都网站建设公司_创新互联，为您提供响应式网站、企业网站制作、网页设计公司、营销型网站建设、小程序开发、标签优化

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联