在Vue 3中定义全局变量可以通过创建一个全局状态管理库（如Vuex）来实现，或者直接在Vue应用的实例上定义属性。以下是一个简单的例子，展示如何在Vue 3中定义和使用全局变量：
- 创建一个全局变量文件，例如
global-variables.js：
// global-variables.js
import { inject, provide } from 'vue';
export function provideGlobalVariables() {
provide('globalVars', {
userInfo: null,
theme: 'light',
setUserInfo(userInfo) {
this.userInfo = userInfo;
},
toggleTheme() {
this.theme = this.theme === 'light' ? 'dark' : 'light';
}
});
}
export function useGlobalVariables() {
return inject('globalVars');
}- 在主入口文件（例如
main.js或main.ts）中，在创建Vue实例之前调用provideGlobalVariables：
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { provideGlobalVariables } from './global-variables';
provideGlobalVariables();
const app = createApp(App);
app.mount('#app');- 在任何组件中，你可以使用
useGlobalVariables来访问和修改全局变量：
// SomeComponent.vue
<template>
<div>
User Info: {{ globalVars.userInfo }}
<button @click="globalVars.setUserInfo({ name: 'John Doe', age: 30 })">
Set User Info
</button>
Theme: {{ globalVars.theme }}
<button @click="globalVars.toggleTheme">Toggle Theme</button>
</div>
</template>
<script>
import { useGlobalVariables } from './global-variables';
export default {
setup() {
const globalVars = useGlobalVariables();
return { globalVars };
}
};
</script>这个例子展示了如何定义一个全局变量对象，并提供了一些方法来修改它的属性。然后在Vue应用的任何组件中，你可以通过useGlobalVariables函数来注入这个全局变量对象，并使用它的属性和方法。