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怎么实现微信扫码登录及获取个人信息

vue3如何实现微信扫码登录及获取个人信息：本文讲解"vue3怎么实现微信扫码登录及获取个人信息"，希望能够解决相关问题。一、流程：微信提供的扫码方式有两种,分别是:跳转二维码扫描页面内嵌式二维码根据文档我们可以知道关于 ...

上一章：怎么使用vue+springboot上传大文件

下一章：vue3怎么实现微信扫码登录及获取个人信息