Vue3注册全局属性

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）

vue3中注册一个全局属性，在任何的组件都可以使用

const app = createApp()
app.config.globalProperties.xxx = xxx

//这样就注册了一个全局属性

结构分离，不能所有的逻辑都写在createApp这个文件里面，需要单独建立文件，然后以中间件的形式插入进来

理解app.use()

//字符串 vuex vue-router
const app = createApp(App)
app.use(router)

//函数形式 （自动执行）
import { App } from 'vue'  //App是类型
app.use(function(app: App) {
    //自定义插件的形式（）
})

//对象形式 (自动执行install方法)
app.use({
    install: function(app: App) {}
})

注册一个全局的时间过滤器

// src/global/index.ts

import { App } from 'vue'
import rigsterProperties from './registerProperties'

export function globalRegister(app: App) {
  app.use(rigsterProperties)
}

上面这个文件，可以注册多个全局属性，所以需要进行统一导出，然后注册。（比如：还可以动态注册ElementPlus）

// src/global/registerProperties.ts

import { App } from 'vue'
import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'

dayjs.extend(utc)

const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'

export default function rigsterProperties(app: App) {
  app.config.globalProperties.$filter = {
    //格式化时间 utc
    formatUtc: (utc: string, format: string = DATE_TIME_FORMAT) => {
      return dayjs.utc(utc).format(format)
    }
  }
}

在具体的文件中，代码逻辑实现。

//main.ts

import { globalRegister } from '@/global'
app.use(globalRegister)

在项目入口文件，进行注册。