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

来源:https://www.cnblogs.com/wuhuacong/archive/2022/09/27/16735031.html
-Advertisement-
Play Games

剛完成一些前端項目的開發,騰出精力來總結一些前端開發的技術點,以及繼續完善基於SqlSugar的開發框架循序漸進介紹的系列文章,本篇隨筆主要介紹一下基於Vue3+TypeScript的全局對象的註入和使用。我們知道在Vue2中全局註入一個全局變數使用protoType的方式,很方便的就註入了,而Vu... ...


剛完成一些前端項目的開發,騰出精力來總結一些前端開發的技術點,以及繼續完善基於SqlSugar的開發框架循序漸進介紹的系列文章,本篇隨筆主要介紹一下基於Vue3+TypeScript的全局對象的註入和使用。我們知道在Vue2中全局註入一個全局變數使用protoType的方式,很方便的就註入了,而Vue3則不能通過這種方式直接使用,而是顯得複雜一些,不過全局變數的掛載有它的好處,因此我們在Vue3+TypeScript中也繼續應用這種模式來處理一些常規的輔助類方法。

1、Vue2的全局掛載

Vue2的掛載由於它的便利性,常常會被大量的使用,只需要使用Vue.protoType.**的方式就可以註入一個變數到全局上,併在頁面或者組件中,通過this.**就可以訪問到,非常的方便,如下所示。

    Vue.prototype.getToken = getToken
    Vue.prototype.guid = guid
    Vue.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' })
    }

有時候為了便利,會把一些常規的放在一個函數裡面進行註冊掛載處理。如下代碼所示。

 這樣我們在main.js函數里,就可以直接導入並註冊掛載即可。

// 導入一些全局函數
import prototype from './prototype'
Vue.use(prototype)

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

 

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 ComponentInternalInstance
  const proxy = appContext.config.globalProperties
  return {
    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 ComponentInternalInstance
  const proxy = appContext.config.globalProperties;
  const $u = proxy.$u as $u_interface;
  return $u;
}

這樣這個文件返回的$user函數就是一個我們掛載的用戶自定義對象了,我們把它統一調用即可。

import { $user } from '/@/utils/useCurrentInstance' //使用簡便模式獲取註入全局變數$u
let $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中強類型的一些約束,它能給我們帶來很多語義提示的好處的。

我們知道,基於Typescrip的項目,在項目中都有一個typescript的配置文件tsconfig.json,其中對一些typescript的目錄或者設置進行設定。由於在VSCode載入項目的時候,會把項目相關的類型定義載入進來,它的配置在Include的配置項中。

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

  我們在這裡增加一個獨立的文件,來設置我們定義掛載對象的介面類型信息。

另外我們打算的全局輔助類對象的信息,放在util目錄裡面,如下所示。

 編寫相關的代碼,並提供一個install的組件安裝方法,給在main.ts中調用處理。

在mian.ts中,使用use的方式實現掛載處理即可。

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

 

 而對應的輔助類介面定義,統一放在全局的Types目錄的一個單獨的$u.d.ts文件中定義。

例如我們定義常規彈出消息的函數介面如下所示。

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

其他的一些介面定義,則進行組合處理即可。

 而我們最終的目的就是通過$u可以獲得相關 $u_interface 的介面信息即可。

最後我們來看看用戶信息管理頁面的界面效果,頁面很多地方使用了基於Vue3+TypeScript的全局對象的註入處理。如一些信息提示,一些通用函數的調用等。

 

系列文章:

基於SqlSugar的開發框架的循序漸進介紹(1)--框架基礎類的設計和使用

基於SqlSugar的開發框架循序漸進介紹(2)-- 基於中間表的查詢處理

基於SqlSugar的開發框架循序漸進介紹(3)-- 實現代碼生成工具Database2Sharp的整合開發

基於SqlSugar的開發框架循序漸進介紹(4)-- 在數據訪問基類中對GUID主鍵進行自動賦值處理 

基於SqlSugar的開發框架循序漸進介紹(5)-- 在服務層使用介面註入方式實現IOC控制反轉

基於SqlSugar的開發框架循序漸進介紹(6)-- 在基類介面中註入用戶身份信息介面 

基於SqlSugar的開發框架循序漸進介紹(7)-- 在文件上傳模塊中採用選項模式【Options】處理常規上傳和FTP文件上傳

 《基於SqlSugar的開發框架循序漸進介紹(8)-- 在基類函數封裝實現用戶操作日誌記錄

基於SqlSugar的開發框架循序漸進介紹(9)-- 結合Winform控制項實現欄位的許可權控制

基於SqlSugar的開發框架循序漸進介紹(10)-- 利用axios組件的封裝,實現對後端API數據的訪問和基類的統一封裝處理

基於SqlSugar的開發框架循序漸進介紹(11)-- 使用TypeScript和Vue3的Setup語法糖編寫頁面和組件的總結

基於SqlSugar的開發框架循序漸進介紹(12)-- 拆分頁面模塊內容為組件,實現分而治之的處理

基於SqlSugar的開發框架循序漸進介紹(13)-- 基於ElementPlus的上傳組件進行封裝,便於項目使用

 

專註於代碼生成工具、.Net/.NetCore 框架架構及軟體開發,以及各種Vue.js的前端技術應用。著有Winform開發框架/混合式開發框架、微信開發框架、Bootstrap開發框架、ABP開發框架、SqlSugar開發框架等框架產品。
  轉載請註明出處:撰寫人:伍華聰  http://www.iqidi.com 
    

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在Xcode 項目執行:Run Script 時,則標識:${SYMROOT} . 更改括弧類型。 例如:BUILD 號自增,編譯完成後自動copy 某文件至目標文件夾等: cp -R ${BUILD_DIR}/${CONFIGURATION}-iphoneos/XXXX.bundle ${SRCR ...
  • 一、CSS選擇器 1、標簽選擇器 選中所有的該標簽 標簽名 { CSS屬性名:屬性值;} 2、類選擇器 .類名 { CSS屬性名:屬性值;} 所有標簽都有class屬性,class屬性的屬性值稱為類名 類名可以由數字、字母、下劃線、中劃線組成,但不能以數字或中劃線開頭 一個標簽可以有多個類名,類名之 ...
  • #背景 學習前端新框架、新技術。如果需要做一些資料庫的操作來增加demo的體驗(CURD流程可以讓演示的體驗根據絲滑) 最開始的時候一個演示程式我們會調用後臺,這樣其實有一點弊端,就是增加了開發和維護成本,簡單的一個demo不應該勞師動眾 後來我會在demo中使用一些websql,奈何,websql ...
  • HTML標簽 1、標題和段落 <h1>一級標題</h1> ~ <h6>六級標題</h6>是標題標簽,獨占一行,均有加粗效果,且字體逐漸變小 <h1>一級標題</h1> ​ 一級標題 ​ <h6>六級標題</h6> ​ 六級標題 ​ <p>p是段落標簽,獨占一行</p> ​ p標簽是段落標簽,獨占一行 ...
  • html插入圖片有兩種方式:一種是通過<img>標簽插入的正常的圖片,另一種是通過css樣式插入的背景圖片 1、首先你是通過第二種方式插入的是背景圖片,直接用width和height只能控制div的寬度和高度。 2、如果你插入的圖片是通過<img>標簽的方式來插入的話,可以通過<img>自身的屬性控 ...
  • 場景描述: 場景描述:一個介面(IPerson)有很多個的欄位,可能有幾百。而且這些欄位都是必須的。 我們需要使用這個介面,但是我又不可能使用它的全部。可能只會使用幾個。 我還必須要使用這介面。這個時候,我們怎麼解決這個問題呢? TS給了我們一個工具類Partial,可以解決這隔辦法 Partial ...
  • <div class="fuzhiWarp"> <div class="copydiv">這裡是DIV中的文本</div> <button type="button" class="fuzhibtn btn-default" data-clipboard-action="copy" data-cli ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 一.typescript 高階類型 Exclude 和 Extract Exclude<T, U> TypeScript 2.8 中增加了 Exclude 類型,該如何理解這個高級類型的定義呢? type Exclude<T, U> = ...
一周排行
    -Advertisement-
    Play Games
  • 下麵是一個標準的IDistributedCache用例: public class SomeService(IDistributedCache cache) { public async Task<SomeInformation> GetSomeInformationAsync (string na ...
  • 這個庫提供了在啟動期間實例化已註冊的單例,而不是在首次使用它時實例化。 單例通常在首次使用時創建,這可能會導致響應傳入請求的延遲高於平時。在註冊時創建實例有助於防止第一次Request請求的SLA 以往我們要在註冊的時候實例單例可能會這樣寫: //註冊: services.AddSingleton< ...
  • 最近公司的很多項目都要改單點登錄了,不過大部分都還沒敲定,目前立刻要做的就只有一個比較老的項目 先改一個試試手,主要目標就是最短最快實現功能 首先因為要保留原登錄方式,所以頁面上的改動就是在原來登錄頁面下加一個SSO登錄入口 用超鏈接寫的入口,頁面改造後如下圖: 其中超鏈接的 href="Staff ...
  • Like運算符很好用,特別是它所提供的其中*、?這兩種通配符,在Windows文件系統和各類項目中運用非常廣泛。 但Like運算符僅在VB中支持,在C#中,如何實現呢? 以下是關於LikeString的四種實現方式,其中第四種為Regex正則表達式實現,且在.NET Standard 2.0及以上平... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他們的程式記憶體會偶發性暴漲,自己分析了下是非托管記憶體問題,讓我幫忙看下怎麼回事?哈哈,看到這個dump我還是非常有興趣的,居然還有這種游戲幣自助機類型的程式,下次去大玩家看看他們出幣的機器後端是不是C#寫的?由於dump是linux上的程式,剛好win ...
  • 前言 大家好,我是老馬。很高興遇到你。 我們為 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的,可以參考我的另一個項目: 手寫從零實現簡易版 tomcat minicat 手寫 ngin ...
  • 上一次的介紹,主要圍繞如何統一去捕獲異常,以及為每一種異常添加自己的Mapper實現,並且我們知道,當在ExceptionMapper中返回非200的Response,不支持application/json的響應類型,而是寫死的text/plain類型。 Filter為二方包異常手動捕獲 參考:ht ...
  • 大家好,我是R哥。 今天分享一個爽飛了的面試輔導 case: 這個杭州兄弟空窗期 1 個月+,面試了 6 家公司 0 Offer,不知道問題出在哪,難道是杭州的 IT 崩盤了麽? 報名面試輔導後,經過一個多月的輔導打磨,現在成功入職某上市公司,漲薪 30%+,955 工作制,不咋加班,還不捲。 其他 ...
  • 引入依賴 <!--Freemarker wls--> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> ...
  • 你應如何運行程式 互動式命令模式 開始一個互動式會話 一般是在操作系統命令行下輸入python,且不帶任何參數 系統路徑 如果沒有設置系統的PATH環境變數來包括Python的安裝路徑,可能需要機器上Python可執行文件的完整路徑來代替python 運行的位置:代碼位置 不要輸入的內容:提示符和註 ...