Vue3+ts+setup The problems encountered when using getCurrentInstance and solutions

environment

vscode
typescript4
vue3

Problem description

First of all, everyone should already know the changes in the configuration of global variables and methods in vue3, and if you are not clear, you can check it.Official description, but I encountered problems when using it in combination with typescript according to the official documentation:

// 
import axios from 'axios'
const app = ({})

// Global custom propertiesdeclare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $axios: AxiosInstance;
  }
}

.$axios = axios

Any .vue file

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

// First of all, proxy ts will report here// The property "proxy" does not exist on type "ComponentInternalInstance | null".  ts(2339)const { proxy } = getCurrentInstance()

// Then the error will be reported below// 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('')

The above is all about the error. Next, we will solve this problem

Problem solving

• The first error is easy to understand becausegetCurrentInstance()The return type existsnullSo add assertions here

import { ComponentInternalInstance, getCurrentInstance } from 'vue';
// Add assertionconst { proxy } = getCurrentInstance() as ComponentInternalInstance

2. But after the correction, we found that there will still be an error below

// The object may be "null".  ts(2531)proxy.$axios('')

This is easier to solve.proxyAdded later?Come to filternullResults

proxy?.$axios('')

The above, the problem is solved!

Supplement: The pit of Vue3 getCurrentInstance combined with ts

1. Regarding the problem of using type definition errors in ts

Error: ...type "ComponentInternalInstance | null"

Just burp is absent. . .

1. You can add ts to resolve

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

But this method is very brainless and troublesome. . .

2. Considering that this getCurrentInstance will be used when obtaining the context and global mount instance, let's create new hooks\

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

    const { appContext } = getCurrentInstance() as ComponentInternalInstance

    const globalProperties = 

    return {

        globalProperties

    }

}

Used in components

//Introduce the file firstimport useCurrentInstance from "@/hooks/useCurrentInstance";

...// Use processing in setupconst { globalProperties } = useCurrentInstance();

2. Cannot use ctx with getCurrentInstance

When we get the method of global mount in Vue3, we will write this:

The ctx here is not the ctx provided by setup

const { ctx } = getCurrentInstance()

Here, ctx cannot be obtained in the production environment after packaging. Please do not accidentally mislead others if you have never played production. Haha, it happened to be found in the issues of Vue3.

It should be used correctly

const { proxy } = getCurrentInstance()

Summarize

This is the article about the problems encountered and solutions of Vue3+ts+setup getCurrentInstance when using Vue3+ts+setup getCurrentInstance. For more related content on the use of Vue3 ts setup getCurrentInstance, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!