Heim > Artikel > Web-Frontend > So verwenden Sie getCurrentInstance in Vue3 mit ts
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 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: 'error', text: '登录失败' });
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('请xxx!')
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!