Comment utiliser getCurrentInstance dans Vue3 avec ts

getCurrentInstance est utilisé en combinaison avec ts

Dans le projet vue3, si vous l'utilisez sans ts, ce n'est pas un problème

const { proxy } = getCurrentInstance()

Si vous l'utilisez dans ts, une erreur sera signalée : Erreur :...Tapez "ComponentInternalInstance | null"

Nous faisons généralement cela dans le projet De nombreuses méthodes getCurrentInstance() sont utilisées, encapsulez-les directement

Créez le fichier useCurrentInstance.ts :

import { ComponentInternalInstance, getCurrentInstance } from 'vue'
export default function useCurrentInstance() {
    const { appContext } = getCurrentInstance() as ComponentInternalInstance
    const proxy = appContext.config.globalProperties
    return {
        proxy
    }
}

Utilisez dans le composant :

<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 utilisez getCurrentInstance pour signaler un error

vue3 n'a pas cela + diverses méthodes API

vue3 Méthode fournie pour créer une instance similaire à celle-ci.

const instance = getCurrentInstance() 

const a1= getCurrentInstance();
a1.$toast({type: 'error', text: '登录失败' });

Ceci ne convient qu'au débogage local. Lors de l'exécution en ligne, une erreur sera signalée :

L'attribut "proxy" n'existe pas sur le type "ComponentInternalInstance | null". ts(2339)

Ensuite, cette erreur sera signalée ci-dessous

Accès membre non sécurisé .$axios sur une valeur `any` eslint@typescript-eslint/no-unsafe-member-access

Appel non sécurisé d'un `any'. ` valeur saisie. eslint@typescript-eslint/no-unsafe-call

Raison : Le type de retour de getCurrentInstance() est nul, ajoutez donc simplement une assertion ici.

Ajoutez ? après le proxy pour filtrer les résultats nuls, c'est-à-dire :

const instance = getCurrentInstance()?.proxy  
 instance ?.$toast('请xxx！')

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!