vue3 ts 定义全局变量

在Vue 3中，你可以通过在main.ts或main.js文件中定义全局变量，并在根组件中设置属性来实现。

以下是一个如何在Vue 3 + TypeScript项目中定义全局变量的例子：

1. 在main.ts中定义全局变量：

import { App } from 'vue';
 
declare module '@vue/runtime-core' {
  export interface ComponentCustomProperties {
    $globalVar: string;
  }
}
 
const app = createApp(App);
 
app.config.globalProperties.$globalVar = '这是一个全局变量';
 
app.mount('#app');

2. 在任何组件中，你可以通过this访问这个全局变量：

<template>
  <div>{{ globalVarMessage }}</div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
  name: 'MyComponent',
  computed: {
    globalVarMessage(): string {
      return this.$globalVar;
    }
  }
});
</script>

在这个例子中，我们使用了Vue 3的createApp方法来创建应用实例，并通过config.globalProperties定义了一个全局属性$globalVar。然后，我们通过TypeScript的声明模块扩展(declare module)来声明这个全局属性，这样在组件中就可以通过this.$globalVar来访问这个全局变量了。