Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie getCurrentInstance in Vue3 mit ts

So verwenden Sie getCurrentInstance in Vue3 mit ts

王林
王林nach vorne
2023-05-15 22:37:042263Durchsuche

getCurrentInstance wird in Kombination mit ts verwendet

Wenn Sie es im vue3-Projekt ohne ts verwenden, ist das kein Problem

const { proxy } = getCurrentInstance()

Wenn Sie es in ts verwenden, wird ein Fehler gemeldet: Fehler:...Typ „ComponentInternalInstance |. null"

Wir machen das im Allgemeinen im Projekt. Viele getCurrentInstance()-Methoden werden verwendet, kapseln Sie sie direkt

UseCurrentInstance.ts-Datei erstellen:

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

Verwenden Sie innerhalb der Komponente:

<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 verwenden Sie getCurrentInstance, um eine zu melden Fehler

vue3 verfügt nicht über diese + verschiedene API-Methoden

vue3 Bereitgestellte Methode zum Erstellen einer ähnlichen Instanz.

const instance = getCurrentInstance() 

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

Dies ist nur für das lokale Debuggen geeignet. Bei der Online-Ausführung wird ein Fehler gemeldet:

Das Attribut „proxy“ existiert nicht für den Typ „ComponentInternalInstance | null“. ts(2339)

Dann wird dieser Fehler unten gemeldet

Unsicherer Mitgliedszugriff .$axios für einen „any“-Wert.

Unsicherer Aufruf eines „any“. ` typisierter Wert. eslint@typescript-eslint/no-unsafe-call

Grund: Der Rückgabetyp von getCurrentInstance() ist null, also fügen Sie hier einfach eine Behauptung hinzu.

Fügen Sie ? nach Proxy hinzu, um Null-Ergebnisse zu filtern, das heißt:

const instance = getCurrentInstance()?.proxy  
 instance ?.$toast(&#39;请xxx!&#39;)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie getCurrentInstance in Vue3 mit ts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:yisu.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen