Vue3+ts+setup getCurrentInstance使用时遇到的问题以及解决办法

目录
  • 环境
  • 问题描述
  • 问题解决
  • 补充：Vue3 getCurrentInstance与ts结合使用的坑
    • 一、关于在ts中使用到类型定义错误问题
    • 二.不能使用getCurrentInstance的ctx
  • 总结

环境

vscode
typescript4
vue3

问题描述

首先，vue3中的全局变量及方法的配置较vue2中的变化大家应该已经知道了，不清楚的可以查看官方说明，但是按照官方文档结合typescript使用时遇到了问题：

axios.ts

// axios.ts
import axios from 'axios'
const app = Vue.createApp({})

// 全局自定义属性
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $axios: AxiosInstance;
  }
}

app.config.globalProperties.$axios = axios

任意.vue文件

<script lang="ts" setup>
import { getCurrentInstance } from 'vue';

// 首先 此处 proxy ts会报
// 类型“ComponentInternalInstance | null”上不存在属性“proxy”。ts(2339)
const { proxy } = getCurrentInstance()

// 然后下面会报这个错误
// 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
proxy.$axios('')

以上就是报错的全部内容，接下来我们解决这个问题

问题解决

  • 第一个报错很好理解 因为 getCurrentInstance()的返回类型存在null所以在此处添加断言即可
import { ComponentInternalInstance, getCurrentInstance } from 'vue';
// 添加断言
const { proxy } = getCurrentInstance() as ComponentInternalInstance

2.但是改完后我们发现下面依旧会有报错

// 对象可能为 "null"。ts(2531)
proxy.$axios('')

这个解决起来更简单了，在proxy后面添加?来过滤null的结果

proxy?.$axios('')

以上，问题解决！

补充：Vue3 getCurrentInstance与ts结合使用的坑

一、关于在ts中使用到类型定义错误问题

报错：...类型“ComponentInternalInstance | null”

就嗝屁了。。。

1. 可以添加ts忽略去解决

// @ts-ignoreconst { proxy } = getCurrentInstance();

但是这个方法很无脑，也麻烦。。。

2. 考虑到在获取上下文和全局挂载实例的时候会用到这个getCurrentInstance，那我们来新建 hooks\useCurrentInstance.ts

import { ComponentInternalInstance, getCurrentInstance } from 'vue'export defaultfunction useCurrentInstance() {

    const { appContext } = getCurrentInstance() as ComponentInternalInstance

    const globalProperties = appContext.config.globalProperties

    return {

        globalProperties

    }

}

组件中使用

// 先引入文件
import useCurrentInstance from "@/hooks/useCurrentInstance";

...// 在setup 中使用处理
const { globalProperties } = useCurrentInstance();

二.不能使用getCurrentInstance的ctx

我们在获取Vue3中全局挂载的方法时会这么写：

这里的ctx不是setup提供的ctx

const { ctx } = getCurrentInstance()

这里ctx打包后在生产环境下是获取不到的，请各位没玩过生产的别不小心误导到别人啊哈，恰好在Vue3的issues中找到的。

正确应该使用

const { proxy } = getCurrentInstance()

总结

到此这篇关于Vue3+ts+setup getCurrentInstance使用时遇到问题以及解决的文章就介绍到这了,更多相关Vue3 ts setup getCurrentInstance使用问题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue3中setup方法的用法详解

    目录 1.参数props 2.参数context 3. 子组件向父组件派发事件 4.优化事件派发 5.获取父组件传递的值 1.参数props props是一个对象,包含父组件传递给子组件的所有数据.在子组件中使用props进行接收.包含配置声明并传入的所有的属性的对象. 也就是说,如果你想通过props的方式输出父组件传递给子组件的值.你需要使用props进行接收配置.即props:{......}.如果你未通过Props进行接受配置,则输出的值是undefined <template> &l

  • vue3 setup中父组件通过Ref调用子组件的方法(实例代码)

    目录 在setup()钩子函数中调用 在<srcipt setup>中调用 在setup()钩子函数中调用 父组件 <template> <div> 我是父组件 <children ref="childrenRef" /> <button @click="handleChildren">触发子组件</button> </div> </template> <scrip

  • 详解Vue3 父组件调用子组件方法($refs 在setup()、＜script setup＞ 中使用)

    在 vue2 中 ref 被用来获取对应的子元素,然后调用子元素内部的方法. <template> <!-- 子组件 --> <TestComponent ref="TestComponent"></TestComponent> </template> <script> // 导入子组件 import TestComponent from './TestComponent' export default { com

  • vue3.0实践之写tsx语法实例

    vue3.0实践之写tsx语法实例

    目录 测试tsx 新建一个App.tsx页面 tsx使用v-model指令 (App.tsx组件) 使用v-show.与三目运算符 tsx之数组的遍历(map) 自定义属性 data-index tsx绑定事件 tsx之 props父组件向子组件传递参数 App.vue 父 App.tsx 子 tsx之子组件 向父组件 传递数据 子组件 App.tsx App.vue 父 总结 00:下载 yarn add @vitejs/plugin-vue-jsx -D 01:引入 vite.config.

  • vue3+vite使用jsx和tsx详情

    目录 安装@vitejs/plugin-vue-jsx 配置vite.config.js 使用实战 第一种写法使用this 第二种写法 第三种写法 安装@vitejs/plugin-vue-jsx yarn add -D @vitejs/plugin-vue-jsx npm i -D @vitejs/plugin-vue-jsx 配置vite.config.js ... import vueJsx from '@vitejs/plugin-vue-jsx'; export default def

  • TSX常见简单入门用法之Vue3+Vite

    目录 1.安装tsx 1.安装tsx插件 2.vite.config.ts里的配置 3.tsconfig.json里的配置 2.使用TSX 1.app.vue里的代码 2.app.tsx的代码 注意: 总结 1.安装tsx 1.安装tsx插件 npm install @vitejs/plugin-vue-jsx -D 2.vite.config.ts里的配置 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-v

  • 如何在vue3中同时使用tsx与setup语法糖

    如何在vue3中同时使用tsx与setup语法糖

    目录 前言 Tsx与setup语法糖的优势 遇到的问题 最后 前言 想这样做的原因是在vue3里使用tsx开发时,props的声明显得异常麻烦,不禁想到defineProps的便利,但同时在vue3里tsx文件里tsx语法的书写必须在setup函数或者render函数里,无法正常的使用defineProps等一系列的宏.为了能够更加便利,使用了下文的方法. Tsx与setup语法糖的优势 目前,在vue3中使用tsx已经越来越流行且便捷,对于webpack与vite构建的项目,都有很好的插件支持

  • 使用vue3+ts+setup获取全局变量getCurrentInstance的方法实例

    使用vue3+ts+setup获取全局变量getCurrentInstance的方法实例

    目录 前言: vue3官方提供的方法 1.引入方法 2.定义变量,接到我们的方法 3.main.js中定义我们的全局变量 4.页面中使用我们的全局变量 vue3+ts 使用官方方法遇到的问题: 最终我解决问题的方法: 补充:Vue3 getCurrentInstance与ts结合使用的问题 总结 前言: vue3的 setup中是获取不到this的,为此官方提供了特殊的方法,让我们可以使用this,达到我们获取全局变量的目的,但是在使用typescript的时候,就会有一些新的问题产生,这里来做

  • Vue3+ts+setup getCurrentInstance使用时遇到的问题以及解决办法

    目录 环境 问题描述 问题解决 补充:Vue3 getCurrentInstance与ts结合使用的坑 一.关于在ts中使用到类型定义错误问题 二.不能使用getCurrentInstance的ctx 总结 环境 vscodetypescript4vue3 问题描述 首先,vue3中的全局变量及方法的配置较vue2中的变化大家应该已经知道了,不清楚的可以查看官方说明,但是按照官方文档结合typescript使用时遇到了问题: axios.ts // axios.ts import axios f

  • SpringBoot @PathVariable使用时遇到的问题及解决

    SpringBoot @PathVariable使用时遇到的问题及解决

    目录 @PathVariable使用时遇到的问题 第一个问题 解决办法 第二个问题 解决办法 @PathVariable 404问题 @PathVariable使用时遇到的问题 第一个问题 接口: /** * 查询客户详细信息 * BY Oliver_Deng * @param userId 用户id * @return */ @ApiOperation(value="查询客户详细信息",notes = "根据传入id查询客户详细信息") @ApiResponses

  • 记VUE3+TS获取组件类型的方法踩坑及解决

    目录 VUE3+TS获取组件类型的方法踩坑 遇到的坑 问题原因 解决办法 VUE3+TS获取组件ref实例 如何获取组件的类型呢? 总结 VUE3+TS获取组件类型的方法踩坑 获取组件类型的方法 const AccountRef = ref<InstanceType<typeof LoginAccount>>() 遇到的坑 typeof LoginAccount一直报红线提示错误 LoginAction: () => vo...' provides no match for

  • Vue3使用setup如何定义组件的name属性详解

    Vue3使用setup如何定义组件的name属性详解

    目录 问题: 描述: 解决: 第一种: 第二种: 总结 问题: 解决Vue3中使用setup如何定义组件的name属性 描述: 这几天在尝试改写基于vue2的组件至vue3版本,使用了最新的setup也就是如下这种方式编写组件 <script lang="ts" setup> // ...代码块 </script> 由于个人还是比较喜欢Element那种组件注册方式,也就是如下 import TButton from './src/index.vue'; TBu

  • 详解如何在Vue3使用＜script lang=“ts“ setup＞语法糖

    目录 迁移组件 隐式返回 defineProps defineEmits 默认关闭和defineExpose Vue 3.2 引入了语法,这是一种稍微不那么冗长的声明组件的方式.您可以通过向 SFC 的元素添加属性来启用它,然后可以删除组件中的一些样板.script setupsetupscript 让我们举一个实际的例子,并将其迁移到这个语法! 迁移组件 以下组件有两个道具(要显示的和一个标志).基于这两个道具,计算模板中显示的小马图像的URL(通过另一个组件).该组件还会在用户单击它时发出一

  • Vue3+script setup+ts+Vite+Volar搭建项目

    Vue3+script setup+ts+Vite+Volar搭建项目

    目录 使用 Vite 创建 vue + ts 项目 Vue 3 的三种语法 Option API Composition API script setup(Composition API 的语法糖) 安装 Volar 结尾 好久没有写了,最近看到Vue3.2 发布了,害,又要开始卷了么. 其实我自己本身还没有使用过Vue3 做过实际的项目开发,然鹅又出新东西了--, 新时代农民工真的是左手工作,右手游戏,还要用jio去学习呢. 什么? 你说谈对象? xswl,我特么一个农民工也配谈对象? 不卷不

  • Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现

    Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现

    目录 写在前面 创建Vue3项目 开发规范 Vite配置 别名配置 环境变量 .env文件 定义环境变量 在vite.config.ts中获取环境变量 自动导入 NaiveUI的安装 写在最后 写在前面 现在已经有很多项目团队使用Vue3+TS进行开发,同时也就意味着Vue3的生态越来越完善,如果还是停留在Vue2的阶段已经out了,这篇文章将会使用Vue3+TS+NaivaUI搭建一个简单的项目骨架. 创建Vue3项目 首先我们通过Vite来创建一个Vue3+TS的一个项目,打开终端,找到我们

  • Vue3在Setup中使用axios请求获取的值方式

    目录 Setup中使用axios请求获取的值 Vue3+Setup使用知识点 Setup中使用axios请求获取的值 上次我们使用axios给项目搞上了网络请求,从此项目数据不再是静态的.对于后端返回的值如何赋值给data里面的变量并且赋予数据响应式,写此日记记录踩坑过程. axios返回的项目数据无法通过函数返回值返回,如何获取返回值呢? <script> import { defineComponent, reactive, onMounted, toRefs, ref } from &q

  • 利用vue3+ts实现管理后台（增删改查）

    简单的管理后台基本上就是数据的增删改查.主要就是 列表 + form 表单.每个页面的逻辑基本上都相同.不同的地方就是每个页面需要调用的具体 API 及参数. 以前 vue2 的时候最简单的做法是写出来一个页面的逻辑,然后直接 copy 到各个页面中,修改 API 及参数即可.高级一点的是利用 mixin 函数,将可复用逻辑抽离,每个页面引入 mixin. vue3 之后新增了composition API.本文就是利用composition API,将可复用的逻辑抽离到composition

随机推荐