首页 > web前端 > Vue.js > Vue3之getCurrentInstance与ts怎么结合使用

Vue3之getCurrentInstance与ts怎么结合使用

王林
发布: 2023-05-15 22:37:04
转载
2355 人浏览过

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: &#39;error&#39;, text: &#39;登录失败&#39; });
登录后复制

这种只适合本地调试,运行到线上就会报错,报错详情为:

类型“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(&#39;请xxx!&#39;)
登录后复制

以上是Vue3之getCurrentInstance与ts怎么结合使用的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:yisu.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板