Heim > Web-Frontend > View.js > So verwenden Sie getCurrentInstance in Vue3 mit ts

So verwenden Sie getCurrentInstance in Vue3 mit ts

王林
Freigeben: 2023-05-15 22:37:04
nach vorne
2318 Leute haben es durchsucht

getCurrentInstance wird in Kombination mit ts verwendet

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

const { proxy } = getCurrentInstance()
Nach dem Login kopieren

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
    }
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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; });
Nach dem Login kopieren

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;)
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:yisu.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage