Cara menggunakan getCurrentInstance dalam Vue3 dengan ts

getCurrentInstance digunakan dalam kombinasi dengan ts

Dalam projek vue3, tidak mengapa untuk menggunakannya seperti ini tanpa ts

const { proxy } = getCurrentInstance()

Jika digunakan dalam ts, ralat akan dilaporkan: Ralat :... Taip "ComponentInternalInstance | null"

Kami biasanya menggunakan banyak kaedah getCurrentInstance() dalam projek kami, cuma merangkumnya secara terus

Buat fail useCurrentInstance.ts:

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

Gunakan dalam komponen:

<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 menggunakan getCurrentInstance untuk melaporkan ralat

Tiada ini + pelbagai kaedah api dalam vue3

Kaedah yang disediakan oleh vue3 mencipta contoh yang serupa dengan ini.

const instance = getCurrentInstance() 

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

Ini hanya sesuai untuk penyahpepijatan setempat Apabila dijalankan dalam talian, ralat akan dilaporkan:

Atribut "proksi" tidak wujud pada jenis "ComponentInternalInstance | null". ts(2339)

Kemudian ralat ini akan dilaporkan di bawah

Akses ahli tidak selamat .$axios pada nilai `sebarang` eslint@typescript-eslint/no-unsafe-member - akses

Panggilan tidak selamat bagi nilai taip `sebarang` eslint@typescript-eslint/no-unsafe-call

Punca:

<.>Jenis pemulangan getCurrentInstance() adalah batal, jadi cuma tambahkan penegasan di sini.

Tambah ? selepas proksi untuk menapis hasil nol, iaitu:

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

Atas ialah kandungan terperinci Cara menggunakan getCurrentInstance dalam Vue3 dengan ts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!