Vue3中注册挂载全局方法

场景：

在Vue2添加实例方法，通过把它们添加到 Vue.prototype 上实现。

  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }

而在Vue3，这种方式已经不适用了，那么如何解决呢？

解决方法：

1.app.config.globalProperties

一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。

全局注册

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import api from '@/api'
...
const app = createApp(App)
...
app.config.globalProperties.$api = api
...
app.mount('#app')

在组件中使用

import { getCurrentInstance } from 'vue'
...
const { proxy } = getCurrentInstance()
const $api = proxy.$api

const getData = async () => {
    await $api.xxx()
}

2.provide/inject

全局注册

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import api from '@/api'
...
...
const app = createApp(App)
...
app.provide('$api', api)
...
app.mount('#app')

在组件中使用

import { inject } from 'vue'
...
const $api = inject('$api')
const getData = async () => {
    await $api.xxx()
}