Vue3 全局变量

153 阅读1分钟

原问答:How to use Vue.prototype or global variable in Vue 3?

Vue3 使用provide/inject或者config.globalProperties,代替了Vue.prototype

1. provide/inject (适用于组合式/选项式API)

provide

import axios from 'axios';

const app = Vue.createApp(App);
app.provide('$axios', axios); // 在app的所有子组件中都可使用

inject

// 组合式API中使用
<script setup>
    const { inject } = Vue;
    const $axios = inject('$axios');   // 组件注入全局变量
</script>

// 选项式API中使用
<script>
    export default {
        inject: ['$axios'],
        ...
    }
</script>

2.globalProperties (适用于选项式API)

import axios from 'axios';

const app = Vue.createApp(App);
app.config.globalProperties.$axios = axios;

// 选项式API中使用
<script>
    export default {
        mounted() {
           this.$axios.get('/api/XXX', () => {})
        }
        ...
    }
</script>

附:Vue.prototype用法

Vue2 将全局变量通过绑定到Vue.prototype上,便于Vue实例获取。

```main.js
function log(msg) {
    console.log('打印数据:', msg);
}
// 全局变量声明
Vue.prototype.$log = log;

<script>
    export default {
        mounted() {
            // 读取全局变量
            this.$log('component a');
        }
    }
</script>