sqlsugar教程,sqlsugar入门
基于SqlSugar的开发框架分步介绍(14)——基于Vue3 TypeScript的全局对象的注入和使用_wx630f055ce23fc的技术博客_博客
Yyds干货库存
刚刚完成一些前端项目的开发，腾出精力总结一些前端开发的技术点，继续完善基于SqlSugar的开发框架分步介绍系列文章。本文主要介绍了基于Vue3类型脚本的全局对象的注入和使用。我们知道使用protoType在Vue2中注入一个全局变量比较方便，而Vue3不能直接用这种方式，但是比较复杂。但是挂载全局变量有它的好处，所以我们在Vue3 TypeScript中继续应用这种模式来处理一些常规的辅助类方法。
1.Vue2全球挂载。因为方便，Vue2的挂载经常大量使用。你只需要使用Vue.protoType.**，就可以把一个变量注入到整个世界，并且可以通过这个在页面或者组件中访问。**，非常方便，如下图。
vue . prototype . getToken=getToken
Vue.prototype.guid=guid
Vue.prototype.isEmpty=isEmpty如果注入一些函数定义，也会类似。
//提示成功信息
vue . prototype . msg success=function(msg){ this。$message({ showClose: true，message: msg，type: success })
}//提示警告信息
vue . prototype . msg warning=function(msg){ this。$message({ showClose: true，message: msg，type: warning })
}//提示错误信息
vue . prototype . msg error=function(msg){ this。$message({ showClose: true，message: msg，type: error })
}有时，为了方便起见，将一些常规的放在一个函数中进行注册和安装。如下面的代码所示。
这样我们就可以在main.js函数中直接导入注册挂载了。
//导入一些全局函数
从导入原型。/prototype vue.use (prototype)有一些常规的函数挂载处理，我们可以通过这个引用在组件或者页面中获取。
2.Vue3类型脚本的全局安装。与Vue2相比，由于语法的变化，Vue3的全局mount不能这样处理。即使在页面或组件中，也不能访问这个指针引用。
然而，由于安装全局变量仍然有其优势，我们也继续在Vue3 TypeScript中应用这种模式来处理一些常规的辅助类方法。
网上也有很多关于对付Vue3 TypeScirpt的挂载方式的介绍。这是如何处理的。创建一个单独的ts文件useCurrentInstance.ts，如以下代码所示。
从“vue”导入{ ComponentInternalInstance，getCurrentInstance }
//获取默认的全局自定义属性
导出默认函数useCurrentInstance() {
const { app context }=getCurrentInstance()as component internal instance
const proxy=app context . config . global properties return {
代理人
}
}然后在页面代码中导入实例化它，如下面的代码所示。
script setup lang= ts import usecurrentinstance from /@/utils/usecurrentinstance //以正常方式获取对象。
const { proxy }=useCurrentInstance()；
设$u=代理。$ u as $ u _ interface//安装时初始化数据
onMounted(async ()={
console . log($ u . success( ABC defa ))；
console . log($ u . util . guid())；
});为了方便，我对上面的代码进行了处理，在使用的时候尽量简化。
在原来独立的ts文件useCurrentInstance.ts中，设置代码如下。
从“vue”导入{ ComponentInternalInstance，getCurrentInstance }
//直接获取注入的对应$u实例
导出函数$user() {
const { app context }=getCurrentInstance()as component internal instance
const proxy=app context . config . global properties；
const $u=代理。$ u as $ u _ interface返回$ u；
}这样这个文件返回的$user函数就是我们挂载的一个自定义对象。我们可以统一称之为。
从“/@/utils/usecurrentinstance”//导入{$ user}，使用简单模式获取注入的全局变量$ u。
* * let $ u=$ user()；* *//实例化两行代码，直接获取对当前app全局对象的引用。
由于我们封装了一些常规的方法和对象，所以我们在Vue3的设置代码中直接使用了全局对象的$u代码，如下所示。
//显示编辑对话框
函数showEdit(id){ if(* * $ u . test . isempty * *(id)){
**$u.warn**(请选择编辑过的记录！);返回；
}
发出( showEdit ，id)
}至于如何在全局对象中挂载自己的快捷方式对象，那就根据自己的实际需要了。
3.Vue3类型脚本的全局挂载的对象接口的定义。在上一节中，我们介绍了安装和使用全局对象的一些过程，以及相关的示例代码。但是我们有些刚用Vue3 TypeScript的朋友可能不知道TypeScript中强类型的一些约束，这些约束可以给我们带来很多语义提示的好处。
我们知道，所有基于typescript的项目，在项目中都有一个typescript的配置文件tsconfig.json，它设置了一些typescript的目录或者设置。VSCode加载项目时，会加载项目相关的类型定义，其配置在Include的配置项中。
这些项目的一些全局定义放在types/*中。通过查看类型目录，我们可以看到很多全局定义信息，如下所示。
这里，我们添加一个单独的文件来设置我们定义的挂载对象的接口类型信息。
另外，我们打算放在util目录中的全局辅助类对象的信息，如下所示。
编写相关代码，在main.ts中提供一个调用install的组件安装方法
在main . ts中，可以通过使用。
app . use($ u)；//挂载一些自定义变量辅助类的接口定义，在全局类型目录下的单个$u.d.ts文件中定义。
比如我们对常规弹出消息的函数接口定义如下。
//定义自定义类$ u的接口类型。
**接口消息_接口** {
message(message:string):any；
成功(消息：字符串):any
warn(message:string):any；
错误(消息：字符串):any
确认(message=您确定要删除所选记录吗？):答应任何
};可以组合一些其他的接口定义。
而我们的最终目的是利用**u_interface**的接口信息。
最后，我们来看看用户信息管理页面的界面效果。页面中很多地方使用了基于Vue3 TypeScript的全局对象的注入处理。比如一些信息提示，一些通用函数的调用等。
版权归作者所有：原创作品来自博主小二上九8，转载请联系作者取得转载授权，否则将追究法律责任。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。