广告位联系
返回顶部
分享到

Vue3之getCurrentInstance与ts结合使用的方式

JavaScript 来源:互联网 作者:佚名 发布时间:2023-04-23 18:18:25 人浏览
摘要

getCurrentInstance与ts结合使用 vue3项目中,如果不用ts这样使用是没问题的 1 const { proxy } = getCurrentInstance() 在ts中使用会报错:报错:...类型ComponentInternalInstance | null 我们在项目中一般会用

getCurrentInstance与ts结合使用

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

1

const { proxy } = getCurrentInstance()

在ts中使用会报错:报错:...类型“ComponentInternalInstance | null”

我们在项目中一般会用到很多getCurrentInstance()方法,直接封装一下

创建useCurrentInstance.ts文件:

1

2

3

4

5

6

7

8

import { ComponentInternalInstance, getCurrentInstance } from 'vue'

export default function useCurrentInstance() {

    const { appContext } = getCurrentInstance() as ComponentInternalInstance

    const proxy = appContext.config.globalProperties

    return {

        proxy

    }

}

组件内使用:

1

2

3

4

5

6

7

8

9

10

<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的实例。

1

2

3

4

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的结果,即:

1

2

const instance = getCurrentInstance()?.proxy  

 instance ?.$toast('请xxx!')  


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • React-Router(V6)的权限控制实现
    在一个后台管理系统中,安全是很重要的。不光后端需要做权限校验,前端也需要做权限控制。 我们可以大致将权限分为3种:接口权限、页
  • Vue3之getCurrentInstance与ts结合使用的方式
    getCurrentInstance与ts结合使用 vue3项目中,如果不用ts这样使用是没问题的 1 const { proxy } = getCurrentInstance() 在ts中使用会报错:报错:...类型Co
  • Vue3进阶主题Composition API使用介绍
    Composition API 是 Vue3 中引入的一种新的 API 风格,旨在提高代码的可读性、可维护性和可重用性。Composition API 不同于 Vue2 中的 Options API,它采
  • ChatGPT Notion AI 从注册到体验及免费使用过程

    ChatGPT Notion AI 从注册到体验及免费使用过程
    Notion AI 是一款基于人工智能的文本编辑工具,具备生成内容、修改内容的功能,可用于文稿写作、会议日程、新闻稿、销售文案等内容的辅
  • ChatGPT如何写好Prompt编程
    现在已经产生了一种新职业:Prompt Engineer(提示指令工程师),可见 Prompt 是多么重要,且编写不易。 ChatGPT的产出,一半决定于它的实力,
  • ChatGPT前端编程秀之别拿编程语言不当语言

    ChatGPT前端编程秀之别拿编程语言不当语言
    写完小工具,这一篇回来我们接着写我们的程序。再看一眼我们的程序运行视图: 带着TDD思路,我进入了 ejs_and_yaml_dsl_loader 这个模块,这块
  • Angular独立组件入门指南
    如果你正在学习Angular,那么你可能已经听说过独立组件(Component)。顾名思义,独立组件就是可以独立使用和管理的组件,它们能够被包含
  • 解决JS请求路径控制台报错 Failed to launch'xxx' bec
    控制台报错: Failed to launch xxx because the scheme does not have a registered handler. 这种错误是因为请求没有协议,应该把协议头加上 错误的例子 window.
  • 网页资源阻塞浏览器加载的原理

    网页资源阻塞浏览器加载的原理
    一个页面允许加载的外部资源有很多,常见的有脚本、样式、字体、图片和视频等,对于这些外部资源究竟是如何影响整个页面的加载和渲
  • Hardhat进行合约测试环境准备及方法

    Hardhat进行合约测试环境准备及方法
    引言 Hardhat是一个开源的以太坊开发框架,简单好用、可扩展、可定制的特点让它在开发者中间很受欢迎。Hardhat在支持编辑、编译、调试和
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计