基于Vue3+TypeScript的全局对象的注入和使用详解

刚完成一些前端项目的开发,腾出精力来总结一些前端开发的技术点,以及继续完善基于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' })
    }

有时候为了便利,会把一些常规的放在一个函数里面进行注册挂载处理。如下代码所示。

基于Vue3+TypeScript的全局对象的注入和使用详解_第1张图片

这样我们在main.js函数里,就可以直接导入并注册挂载即可。

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

有了一些常规函数的挂载处理,我们可以在组件或者页面中,通过this引用就可以获得了。

基于Vue3+TypeScript的全局对象的注入和使用详解_第2张图片

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进来实例化使用即可,如下代码所示。


                    
                    

你可能感兴趣的:(基于Vue3+TypeScript的全局对象的注入和使用详解)