vue3 如何调用全局注册的 app.config.globalProperties?_小冰的开发笔记

Vue2 与 Vue3 挂载全局属性和方法有着很大的不同，相对来说 Vue2 写法更简单，而 Vue3 更为合理。关于 Vue2 的介绍已经很多了，这里仅介绍 Vue3 下挂载全局属性和方法的方法。

挂载

首先在 main.js 中引入全局常量 constants.js 。

import { createApp } from 'vue'
import App from './App.vue'
// 全局常量
import constants from '@/assets/js/constants'

接着改动 createApp 方法如下：
```
const app = createApp(App)
```

接着在 app 上挂载 constants：

app.config.globalProperties.$constants = constants

最后 mount app：
```
app.mount('#app')
```

完整代码如下：

import { createApp } from 'vue'
import App from './App.vue'
// 全局常量
import constants from '@/assets/js/constants'
const app = createApp(App)
app.config.globalProperties.$constants = constants
app.mount('#app')

使用

在 Vue 页面中导入 getCurrentInstance，然后通过 getCurrentInstance().appContext.config.globalProperties 来获取 constants 引用。具体如下：

import {getCurrentInstance} from 'vue'
export default {
  components: {},
  setup() {
    const $constants  = getCurrentInstance().appContext.config.globalProperties.$constants
    console.log($constants)
    return {}
  },
}