vue3 ts 挂载全局变量

在 Vue 3 中，可以使用 provide 和 inject 来实现全局变量的挂载。然而，由于 TypeScript 的限制，需要一些额外的步骤来正确地类型化这些全局变量。

首先，在你的应用程序的根组件（例如 main.ts）中，创建一个 provide 对象来包含你要挂载的全局变量。例如：

import { createApp, provide } from 'vue';

const app = createApp(App);

app.provide('globalVariable', 'Hello, world!');
// 或者如果是对象
// app.provide('globalVariable', { message: 'Hello, world!' });

app.mount('#app');

然后，在你想要访问全局变量的组件中，使用 inject 来获取它们。例如：

import { defineComponent, inject } from 'vue';

export default defineComponent({
  setup() {
    const globalVariable = inject<string>('globalVariable');
    // 或者如果是对象
    // const globalVariable = inject<{ message: string }>('globalVariable');

    // 使用全局变量
    console.log(globalVariable);

    return {};
  },
});

这样就可以在任何组件中访问到全局变量了。注意，为了正确获得类型推断，需要在 `inject` 函数中提供一个类型参数来指定全局变量的类型。

希望这个回答对你有所帮助！如有其他问题，请随时提问。