剛完成一些前端項(xiàng)目的開發(fā)，騰出精力來總結(jié)一些前端開發(fā)的技術(shù)點(diǎn)，以及繼續(xù)完善基于SqlSugar的開發(fā)框架循序漸進(jìn)介紹的系列文章，本篇隨筆主要介紹一下基于Vue3+TypeScript的全局對(duì)象的注入和使用。我們知道在Vue2中全局注入一個(gè)全局變量使用protoType的方式，很方便的就注入了，而Vue3則不能通過這種方式直接使用，而是顯得復(fù)雜一些，不過全局變量的掛載有它的好處，因此我們?cè)赩ue3+TypeScript中也繼續(xù)應(yīng)用這種模式來處理一些常規(guī)的輔助類方法。

1、Vue2的全局掛載

Vue2的掛載由于它的便利性，常常會(huì)被大量的使用，只需要使用Vue.protoType.**的方式就可以注入一個(gè)變量到全局上，并在頁面或者組件中，通過this.**就可以訪問到，非常的方便，如下所示。

Vue.prototype.getToken = getToken
    Vue.prototype.guid = guid
    Vue.prototype.isEmpty = isEmpty

如果注入一些函數(shù)定義，也是類似的方式

// 提示成功信息
    Vue.prototype.msgSuccess = function(msg) {
      this.$message({ showClose: true, message: msg, type: 'success' })
    }
    // 提示警告信息
    Vue.prototype.msgWarning = function(msg) {
      this.$message({ showClose: true, message: msg, type: 'warning' })
    }
    // 提示錯(cuò)誤信息
    Vue.prototype.msgError = function(msg) {
      this.$message({ showClose: true, message: msg, type: 'error' })
    }

有時(shí)候?yàn)榱吮憷瑫?huì)把一些常規(guī)的放在一個(gè)函數(shù)里面進(jìn)行注冊(cè)掛載處理。如下代碼所示。

這樣我們?cè)趍ain.js函數(shù)里，就可以直接導(dǎo)入并注冊(cè)掛載即可。

// 導(dǎo)入一些全局函數(shù)
import prototype from './prototype'
Vue.use(prototype)

有了一些常規(guī)函數(shù)的掛載處理，我們可以在組件或者頁面中，通過this引用就可以獲得了。

2、Vue3+TypeScript的全局掛載

而相對(duì)于Vue2，Vue3由于語法的變化，全局掛載則不能通過這種方式進(jìn)行處理了，甚至在頁面或者組件中，都不能訪問this指針引用了。

不過由于全局變量的掛載還是有它的好處，因此我們?cè)赩ue3+TypeScript中也繼續(xù)應(yīng)用這種模式來處理一些常規(guī)的輔助類方法。

網(wǎng)上的處理Vue3+TypeScirpt的掛載方式的介紹也比較多，如下是它的處理方式。創(chuàng)建一個(gè)獨(dú)立的ts文件useCurrentInstance.ts，如下代碼所示。

import { ComponentInternalInstance, getCurrentInstance } from 'vue'

//獲取默認(rèn)的全局自定義屬性
export default function useCurrentInstance() {
  const { appContext } = getCurrentInstance() as ComponentInternalInstance
  const proxy = appContext.config.globalProperties
  return {
    proxy
  }
}

然后在頁面代碼中import進(jìn)來實(shí)例化使用即可，如下代碼所示。

<script setup lang="ts">
import useCurrentInstance from '/@/utils/useCurrentInstance' //使用常規(guī)方式獲取對(duì)象
const { proxy } = useCurrentInstance();
let $u = proxy.$u as $u_interface;

//掛載的時(shí)候初始化數(shù)據(jù)
onMounted(async () => {
  console.log($u.success('abcdefa'));
  console.log($u.util.guid());
});

為了方便，我對(duì)上面的代碼進(jìn)行了加工處理，以便在使用的時(shí)候，盡可能的簡(jiǎn)單化一些。

在原先獨(dú)立的ts文件useCurrentInstance.ts，文件上，設(shè)置代碼如下所示。

import { ComponentInternalInstance, getCurrentInstance } from 'vue'

//直接獲得注入的對(duì)應(yīng)的$u實(shí)例
export function $user() {
  const { appContext } = getCurrentInstance() as ComponentInternalInstance
  const proxy = appContext.config.globalProperties;
  const $u = proxy.$u as $u_interface;
  return $u;
}

這樣這個(gè)文件返回的$user函數(shù)就是一個(gè)我們掛載的用戶自定義對(duì)象了，我們把它統(tǒng)一調(diào)用即可。

import { $user } from '/@/utils/useCurrentInstance' //使用簡(jiǎn)便模式獲取注入全局變量$u
let $u = $user();//實(shí)例化

兩行代碼就可以直接獲得一個(gè)當(dāng)前app的全局對(duì)象的引用了。

由于我們封裝了一些常規(guī)的方法和對(duì)象，我們?cè)赩ue3的setup代碼中直接使用全局對(duì)象的$u的代碼如下所示。

// 顯示編輯對(duì)話框
function showEdit(id) {
  if ($u.test.isEmpty(id)) {
    $u.warn("請(qǐng)選擇編輯的記錄!");
    return;
  }
  emit('showEdit', id)
}

至于全局對(duì)象中如何掛載自己的快捷對(duì)象，則是根據(jù)自己的實(shí)際需要了。

3、Vue3+TypeScript的全局掛載的對(duì)象接口定義

在前面我們大概介紹了全局對(duì)象的一些掛載和使用的過程，以及相關(guān)的實(shí)例代碼，不過我們可能一些剛使用Vue3+TypeScript的朋友可能不太清楚typescript中強(qiáng)類型的一些約束，它能給我們帶來很多語義提示的好處的。

我們知道，基于Typescrip的項(xiàng)目，在項(xiàng)目中都有一個(gè)typescript的配置文件tsconfig.json，其中對(duì)一些typescript的目錄或者設(shè)置進(jìn)行設(shè)定。由于在VSCode加載項(xiàng)目的時(shí)候，會(huì)把項(xiàng)目相關(guān)的類型定義加載進(jìn)來，它的配置在Include的配置項(xiàng)中。

其中一些項(xiàng)目全局通用的定義放在了types/*.d.ts 里面的，我們查看types目錄，可以看到很多全局的定義信息，如下所示。

我們?cè)谶@里增加一個(gè)獨(dú)立的文件，來設(shè)置我們定義掛載對(duì)象的接口類型信息。

另外我們打算的全局輔助類對(duì)象的信息，放在util目錄里面，如下所示。

編寫相關(guān)的代碼，并提供一個(gè)install的組件安裝方法，給在main.ts中調(diào)用處理。

在mian.ts中，使用use的方式實(shí)現(xiàn)掛載處理即可。

 app.use($u);//掛載自定義的一些變量輔助類

而對(duì)應(yīng)的輔助類接口定義，統(tǒng)一放在全局的Types目錄的一個(gè)單獨(dú)的$u.d.ts文件中定義。

例如我們定義常規(guī)彈出消息的函數(shù)接口如下所示。

//定義自定義類$u的接口類型
interface message_interface {
  Message(message: string): any;
  success(message: string): any;
  warn(message: string): any;
  error(message: string): any;
  confirm(message = '您確認(rèn)刪除選定的記錄嗎?'): Promise<any>;
};

其他的一些接口定義，則進(jìn)行組合處理即可。

而我們最終的目的就是通過$u可以獲得相關(guān)$u_interface 的接口信息即可。

最后我們來看看用戶信息管理頁面的界面效果，頁面很多地方使用了基于Vue3+TypeScript的全局對(duì)象的注入處理。如一些信息提示，一些通用函數(shù)的調(diào)用等。

到此這篇關(guān)于基于Vue3+TypeScript的全局對(duì)象的注入和使用的文章就介紹到這了,更多相關(guān)Vue3 TypeScript全局對(duì)象內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論