vue3全局注入方法，防止每个页面不停的引入

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

其实很多小伙伴都是从vue2过来的我们之前想要注册一个全局属性让所有的子组件都可以使用到
也许会这样书写就是

import moment from "moment"
Vue.prototype.$moment = moment;

// 在所有的组件中
this.$moment() // 进行使用

但是在vue3 特别是 setup中好像有点行不通我们需要换种写法了

特别是过滤器还被移除了推荐让我们使用方法的方式进行对一些状态数或者特殊的文案进行处理

这里就用到了两种全局属性的使用方式了

担当之前的过滤器属性

这个可以直接通过全局属性中

// main.js
app.config.globalProperties.filtersSatus = (status) => {
	if(status === 1) return "待收货"
	if(status === 2) return "已收货"
	if(status === 3) return "已退货"
}
// 这个定义好的话 可以直接在模板中使用
<div>{{ filtersSatus(1) }}</div>

在setup中要经常使用的方法比如某个第三方库 moment

这个我们可以通过 app.provide() // 的方法进行处理

// main.js
import { createApp } from "vue"
import moment from "moment"
const app = createApp()
app.provide("moment', moment)


// 在子组件中任意后代组件中
import { inject } from "vue"

export default {
	setup() {
		const moment = inject('moment') // 如果你要用的话
	}
}

其实有的童鞋可能以为我怎么访问之前我写的那个通过globalProperties 挂载的全局属性呢

其实也有一个方法其实就是比较麻烦
api这个在官网中其实搜不到并不建议你使用这个api哈

import { getCurrentInstance } from "vue"

export default {
	setup() {
		const proxy = getCurrentInstance() //
		console.log(proxy.appContext.app.config.globalProperties)
	}
}