vue3：如何去挂载全局的变量和方法

在vue2中，我们会把经常使用的方法，变量挂载到 vue.prototype上，例如下面这样

const getParams = (params) => params
Vue.prototype.$getParams = getParams

然后我们就可以在任意的组件中 进行 this.$getParams('999')，这种调用，也很是简单方便

但是时代变了，在vue3中，我们不能再去这么操作，这么写了，我们需要采用以下方式

1. 使用 app.config.globalProperties 配合 getCurrentInstance使用

1. main.js

import {
    createApp
} from 'vue'
import App from './App.vue'

const app = createApp(App); //创建实例对象

const baseUrl = 'https://www.baidu.com/'
app.config.globalProperties.$baseUrl = baseUrl
app.config.globalProperties.$getFullUrl = (params) => {
    return baseUrl + params
}

app.mount("#app") //挂载

2. 使用

<script setup>
import {getCurrentInstance} from "vue";

const {proxy} = getCurrentInstance()
console.log(proxy.$baseUrl)
console.log(proxy.$getFullUrl('123456789'))

</script>

打印:

 2. 使用 inject 和 provide，达到目的

1. main.js

import {
    createApp
} from 'vue'
import App from './App.vue'

const app = createApp(App); //创建实例对象

const taobao = 'https://www.taobao.com/'
const getFullTaobao = (params) => {
    return `${taobao}${params}`
}
app.provide('$taobao', taobao)
app.provide('$getFullTaobao', getFullTaobao)

app.mount("#app") //挂载

2. 使用

<script setup>
import {inject} from "vue";

const taobao = inject('$taobao')
const getFullTaobao = inject('$getFullTaobao')
console.log(taobao)
console.log(getFullTaobao('123456789'))

</script>

打印：

 结束！