基於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
  • 在C#中使用SQL Server實現事務的ACID(原子性、一致性、隔離性、持久性)屬性和使用資料庫鎖(悲觀鎖和樂觀鎖)時,你可以通過ADO.NET的SqlConnection和SqlTransaction類來實現。下麵是一些示例和概念說明。 實現ACID事務 ACID屬性是事務處理的四個基本特征, ...
  • 我們在《SqlSugar開發框架》中,Winform界面開發部分往往也用到了自定義的用戶控制項,對應一些特殊的界面或者常用到的一些局部界面內容,我們可以使用自定義的用戶控制項來提高界面的統一性,同時也增強了使用的便利性。如我們Winform界面中用到的分頁控制項、附件顯示內容、以及一些公司、部門、菜單的下... ...
  • 在本篇教程中,我們學習瞭如何在 Taurus.MVC WebMVC 中進行數據綁定操作。我們還學習瞭如何使用 ${屬性名稱} CMS 語法來綁定頁面上的元素與 Model 中的屬性。通過這些步驟,我們成功實現了一個簡單的數據綁定示例。 ...
  • 是在MVVM中用來傳遞消息的一種方式。它是在MVVMLight框架中提供的一個實現了IMessenger介面的類,可以用來在ViewModel之間、ViewModel和View之間傳遞消息。 Send 接受一個泛型參數,表示要發送的消息內容。 Register 方法用於註冊某個對象接收消息。 pub ...
  • 概述:在WPF中,通過EventHandler可實現基礎和高級的UI更新方式。基礎用法涉及在類中定義事件,併在UI中訂閱以執行更新操作。高級用法藉助Dispatcher類,確保在非UI線程上執行操作後,通過UI線程更新界面。這兩種方法提供了靈活而可靠的UI更新機制。 在WPF(Windows Pre ...
  • 概述:本文介紹了在C#程式開發中如何利用自定義擴展方法測量代碼執行時間。通過使用簡單的Action委托,開發者可以輕鬆獲取代碼塊的執行時間,幫助優化性能、驗證演算法效率以及監控系統性能。這種通用方法提供了一種便捷而有效的方式,有助於提高開發效率和代碼質量。 在軟體開發中,瞭解代碼執行時間是優化程式性能 ...
  • 概述:Cron表達式是一種強大的定時任務調度工具,通過配置不同欄位實現靈活的時間規定。在.NET中,Quartz庫提供了簡便的方式配置Cron表達式,實現精準的定時任務調度。這種靈活性和可擴展性使得開發者能夠根據需求輕鬆地制定和管理定時任務,例如每天備份系統日誌或其他重要操作。 Cron表達式詳解 ...
  • 概述:.NET提供多種定時器,如System.Windows.Forms.Timer適用於UI,System.Web.UI.Timer用於Web,System.Diagnostics.Timer用於性能監控,System.Threading.Timer和System.Timers.Timer用於一般 ...
  • 問題背景 有同事聯繫我說,在生產環境上,訪問不了我負責的common服務,然後我去檢查common服務的health endpoint, 沒問題,然後我問了下異常,timeout導致的System.OperationCanceledException。那大概率是客戶端的問題,會不會是埠耗盡,用ne ...
  • 前言: 在本篇 Taurus.MVC WebMVC 入門開發教程的第四篇文章中, 我們將學習如何實現數據列表的綁定,通過使用 List<Model> 來展示多個數據項。 我們將繼續使用 Taurus.Mvc 命名空間,同時探討如何在視圖中綁定並顯示一個 Model 列表。 步驟1:創建 Model ...