[Vue3] app.use、globalProperties 和 app.provide 定义全局属性和函数

app.use 插件

// myPlugin.js
export default {
  install(app) {
    app.config.globalProperties.$myPlugin = () => {
      console.log('This is a method from a plugin!')
    }
  }
}

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import MyPlugin from './myPlugin'

const app = createApp(App)
app.use(MyPlugin)
app.mount('#app')

模板内全局可用：

<h1>{{ $myPlugin('greetings.hello') }}</h1>

app.config.globalProperties

可在 main.js 写全局属性和函数，但不利于维护和团队开发。推荐通过 app.use。

全局属性和函数的 TS 类型

为了请求数据而安装 $http，或者为了国际化而安装 $translate。为了使 TypeScript 更好地支持这个行为，可以通过 TypeScript 模块扩展来扩展 ComponentCustomProperties 接口：

import axios from 'axios'

declare module 'vue' {
  interface ComponentCustomProperties {
    $http: typeof axios
    $translate: (key: string) => string
  }
}

上面代码已经有了 import {}，若没有建议写一个 export {} 在顶层。具体查看官方文档，Vue3 文档 - 扩展全局属性 和 类型扩展的位置。

app.provide

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

const app = createApp(App)

app.provide('globalMethod', () => {
  console.log('This is a provided global method!')
})

app.mount('#app')

<template>
  <div>
    <button @click="globalMethod">Call Injected Method</button>
  </div>
</template>

<script setup>
import { inject } from 'vue'

const globalMethod = inject('globalMethod')
</script>