Vue3之getCurrentInstance與ts結合使用的方式

Posted on by

getCurrentInstance與ts結合使用

vue3項目中，如果不用ts這樣使用是沒問題的

const { proxy } = getCurrentInstance()

在ts中使用會報錯：報錯：…類型“ComponentInternalInstance | null”

我們在項目中一般會用到很多getCurrentInstance()方法，直接封裝一下

創建useCurrentInstance.ts文件：

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

組件內使用：

<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使用getCurrentInstance報錯

vue3中沒有this + 各種api的方法 

vue3提供的方法，創建類似於this的實例。

const instance = getCurrentInstance() 

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

這種隻適合本地調試，運行到線上就會報錯，報錯詳情為：

類型“ComponentInternalInstance | null”上不存在屬性“proxy”。ts(2339)

然後下面會報這個錯誤

Unsafe member access .$axios on an `any` value.  eslint@typescript-eslint/no-unsafe-member-access

Unsafe call of an `any` typed value.  eslint@typescript-eslint/no-unsafe-call

原因：

getCurrentInstance()的返回類型存在null所以在此處添加斷言即可。

在proxy後面添加?來過濾null的結果，即：

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

總結

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：