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中强类型的一些约束,它能给我们带来很多语义提示的好处的 。
我们知道,基于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的全局对象的注入处理 。如一些信息提示,一些通用函数的调用等 。
文章插图
【14 基于SqlSugar的开发框架循序渐进介绍-- 基于Vue3+TypeScript的全局对象的注入和使用】系列文章:
《基于SqlSugar的开发框架的循序渐进介绍(1)--框架基础类的设计和使用》
《基于SqlSugar的开发框架循序渐进介绍(2)-- 基于中间表的查询处理》
《基于SqlSugar的开发框架循序渐进介绍(3)-- 实现代码生成工具Database2Sharp的整合开发》
《基于SqlSugar的开发框架循序渐进介绍(4)-- 在数据访问基类中对GUID主键进行自动赋值处理》
《基于SqlSugar的开发框架循序渐进介绍(5)-- 在服务层使用接口注入方式实现IOC控制反转》
经验总结扩展阅读
- 2023年3月20日可以安门吗
- 2023年10月22日是祭祖的黄道吉日吗 2023年10月22日祭祖好吗
- Docker MySql 查看版本的三种方法
- 男主是医生得到武侠系统的小说
- 我国古代四大类书指的是哪几部
- 哪些书籍是英语专业必读的
- 2023年10月22日是拜神的黄道吉日吗 2023年10月22日拜神黄道吉日
- 2023年10月22日是求神拜佛的黄道吉日吗 2023年10月22日求神拜佛好吗
- 葡萄怎么做酒
- 2023年农历九月初八宜拜观音吗 2023年10月22日是拜观音的黄道吉日吗