vue3从精通到入门23：定义全局变量

在Vue 3中定义全局变量可以通过创建一个全局状态管理库（如Vuex）来实现，或者直接在Vue应用的实例上定义属性。以下是一个简单的例子，展示如何在Vue 3中定义和使用全局变量：

1. 创建一个全局变量文件，例如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');
}

2. 在主入口文件（例如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');

3. 在任何组件中，你可以使用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函数来注入这个全局变量对象，并使用它的属性和方法。