Vue3.0 挂载方法，添加全局属性

# 方式一

使用 app.config.globalProperties，在 main.js 中引入全局要使用的方法，通过 app.config.globalProperties 添加到全局中。

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 假设 config 是外部引入的配置文件
import config from './config'

const app = createApp(App)
// 添加到全局中
app.config.globalProperties.$config = config
// app.use(config)
app.use(store).use(router).mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13

通过在生命周期函数中通过 this 使用或在 getCurrentInstance 的 appContext 使用，appContext获取的即为 main.js 里创建的的 vue 对象。

// Home.vue
// js写法中会使用 defineComponent，普通的写法不用在意
import { defineComponent, getCurrentInstance } from 'vue'

export default defineComponent({
    name: 'Home',
    setup() {
        // js proxy 使用
        const { proxy }: any = getCurrentInstance()
        // js
        /* const { proxy } = getCurrentInstance() */
        console.log(proxy, proxy.$config)

        // js appContext 使用
        const { $config } = getCurrentInstance().appContext.config.globalProperties
        console.log($config)
    },
    created() {
      console.log(this.$config)
    }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 方式二

通过依赖和注入（ provide 和 inject）来完成，我这里是通过 symbol 方式定义的这个常量，大家可以根据自己使用方式在 app.provide('xxx') 的时候，使用自定义的字符串，只要使用起来不会混乱即可。

src 文件夹下新建 symbol 文件夹并新增index.js文件

// src/symbol/index.js
// 定义对应的 symbol 并暴露出去
export const TEST_SYMBOL = Symbol('Test 测试')

1
2
3

在 main.js 中引入，并使用 project 绑定依赖

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

import { TEST_SYMBOL } from './symbol'

// 假设 test 是外部引入的方法
const test = () => {
    console.log('ccccc')
    return '测试成功888'
}

const app = createApp(App)
// 使用 symbol 方式
app.provide(TEST_SYMBOL, test)
// 使用自定义字符串方式
app.provide('$test', test)
app.use(store)
app.use(router)
app.mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在对应.vue文件中引入并使用

import { defineComponent, inject } from 'vue'
import { TEST_SYMBOL } from '@/symbol'
export default defineComponent({
    setup() {
        // js 中它的类型可能是个undefined
        // symbol 方式
        const $Test: (() => string) | undefined = inject(TEST_SYMBOL)
        $Test && $Test()
        // 自定义字符串方式
        const $Test2: (() => string) | undefined = inject('$Test')
        $Test2 && $Test2()
        // js
        /*
        const $Test = inject(TEST_SYMBOL)
        $Test()
        */
    }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

注意

关于上面两种方式在 vuejs/rfcs (opens new window) 中有相关讨论，看尤大的意思是vue3.0 不推荐方式一在原型链上挂载一些东西这种方式，而是更建议使用方式二的 provide 和 inject 方式，

#Vue

上次更新: 2024/01/30, 00:35:17

← Vue3.0 基础知识点总结 vue3.0之全局变量app.config.globalProperties的使用→