在vue3中 定义全局变量

在vue3中，如何定义一个全局变量，便于在template部分直接使用，而无需每次都引入

以下是实现步骤：

1. 使用 app.provide 和 app.config.globalProperties 定义全局变量。

// 假设这是我们的全局变量
const globalVar = 'Hello, global variable!';

// 使用 provide 将全局变量作为响应式对象
app.provide('globalVar', globalVar); //便于在js部分可直接用

// 使用 globalProperties 将全局变量附加到 Vue 实例上
app.config.globalProperties.$globalVar = globalVar;  //便于在模板部分可直接用

2. 现在可以在任何 Vue 组件的模板中直接使用 $globalVar，无需引入。

<template>
  <div>
    <h1>{{ $globalVar }}</h1>
  </div>
</template>

需要注意的是，使用这种方法定义的全局变量在组件的 setup 函数和非模板部分的其他 JavaScript 代码中，仍然需要通过 inject 函数引入。

import { inject } from 'vue';

export default {
  setup() {
    const globalVar = inject('globalVar');
    console.log(globalVar);
  },
};