1. 首頁 > 生活百科 > >

14 基于SqlSugar的開發框架循序漸進介紹-- 基于Vue3+TypeScript的全局對象的注入和使用

生活百科

剛完成一些前端項目的開發，騰出精力來總結一些前端開發的技術點，以及繼續完善基于SqlSugar的開發框架循序漸進介紹的系列文章，本篇隨筆主要介紹一下基于Vue3+TypeScript的全局對象的注入和使用 。我們知道在Vue2中全局注入一個全局變量使用protoType的方式，很方便的就注入了，而Vue3則不能通過這種方式直接使用，而是顯得復雜一些，不過全局變量的掛載有它的好處，因此我們在Vue3+TypeScript中也繼續應用這種模式來處理一些常規的輔助類方法 。
1、Vue2的全局掛載Vue2的掛載由于它的便利性，常常會被大量的使用，只需要使用Vue.protoType.**的方式就可以注入一個變量到全局上，并在頁面或者組件中，通過this.**就可以訪問到，非常的方便，如下所示 。
Vue.prototype.getToken = getTokenVue.prototype.guid = guidVue.prototype.isEmpty = isEmpty如果注入一些函數定義，也是類似的方式
// 提示成功信息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' })}// 提示錯誤信息Vue.prototype.msgError = function(msg) {this.$message({ showClose: true, message: msg, type: 'error' })}有時候為了便利，會把一些常規的放在一個函數里面進行注冊掛載處理 。如下代碼所示 。

14 基于SqlSugar的開發框架循序漸進介紹-- 基于Vue3+TypeScript的全局對象的注入和使用

文章插圖
這樣我們在main.js函數里，就可以直接導入并注冊掛載即可 。
// 導入一些全局函數import prototype from './prototype'Vue.use(prototype)有了一些常規函數的掛載處理，我們可以在組件或者頁面中 ， 通過this引用就可以獲得了 。
14 基于SqlSugar的開發框架循序漸進介紹-- 基于Vue3+TypeScript的全局對象的注入和使用

文章插圖
2、Vue3+TypeScript的全局掛載而相對于Vue2 ， Vue3由于語法的變化 ， 全局掛載則不能通過這種方式進行處理了，甚至在頁面或者組件中 ， 都不能訪問this指針引用了 。
不過由于全局變量的掛載還是有它的好處，因此我們在Vue3+TypeScript中也繼續應用這種模式來處理一些常規的輔助類方法 。
網上的處理Vue3+TypeScirpt的掛載方式的介紹也比較多 ， 如下是它的處理方式 。創建一個獨立的ts文件useCurrentInstance.ts，如下代碼所示 。
import { ComponentInternalInstance, getCurrentInstance } from 'vue'//獲取默認的全局自定義屬性export default function useCurrentInstance() {const { appContext } = getCurrentInstance() as ComponentInternalInstanceconst proxy = appContext.config.globalPropertiesreturn {proxy}}然后在頁面代碼中import進來實例化使用即可，如下代碼所示 。
<script setup lang="ts">import useCurrentInstance from '/@/utils/useCurrentInstance' //使用常規方式獲取對象const { proxy } = useCurrentInstance();let $u = proxy.$u as $u_interface;//掛載的時候初始化數據onMounted(async () => {console.log($u.success('abcdefa'));console.log($u.util.guid());});為了方便，我對上面的代碼進行了加工處理 ， 以便在使用的時候，盡可能的簡單化一些 。
在原先獨立的ts文件useCurrentInstance.ts，文件上，設置代碼如下所示 。
import { ComponentInternalInstance, getCurrentInstance } from 'vue'//直接獲得注入的對應的$u實例export function $user() {const { appContext } = getCurrentInstance() as ComponentInternalInstanceconst proxy = appContext.config.globalProperties;const $u = proxy.$u as $u_interface;return $u;}這樣這個文件返回的$user函數就是一個我們掛載的用戶自定義對象了，我們把它統一調用即可 。
import { $user } from '/@/utils/useCurrentInstance' //使用簡便模式獲取注入全局變量$ulet $u = $user();//實例化兩行代碼就可以直接獲得一個當前app的全局對象的引用了 。
由于我們封裝了一些常規的方法和對象，我們在Vue3的setup代碼中直接使用全局對象的$u的代碼如下所示 。
// 顯示編輯對話框function showEdit(id) {if ($u.test.isEmpty(id)) {$u.warn("請選擇編輯的記錄!");return;}emit('showEdit', id)}至于全局對象中如何掛載自己的快捷對象，則是根據自己的實際需要了 。
3、Vue3+TypeScript的全局掛載的對象接口定義在前面我們大概介紹了全局對象的一些掛載和使用的過程，以及相關的實例代碼，不過我們可能一些剛使用Vue3+TypeScript的朋友可能不太清楚typescript中強類型的一些約束，它能給我們帶來很多語義提示的好處的 。

推薦閱讀