Vue3定义全局变量的方式总结

在Vue 3中定义全局变量可以通过以下几种方式实现：

1. 在 main.js 或 main.ts 文件中使用 globalProperties：

import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'; // 可选，用于定义事件总线
 
const app = createApp(App);
 
// 定义全局变量
app.config.globalProperties.$myGlobalVar = 'Hello Vue 3';
 
// 使用事件总线作为全局事件发射器
app.config.globalProperties.$bus = mitt();
 
app.mount('#app');

2. 使用 Vuex 管理状态：

首先安装Vuex：

npm install vuex@next --save

然后在 store.js 中定义状态和getters：

import { createStore } from 'vuex';
 
export default createStore({
  state() {
    return {
      globalVar: 'Hello Vuex'
    };
  },
  getters: {
    getGlobalVar(state) {
      return state.globalVar;
    }
  }
});

在 main.js 中引入并配置：

import { createApp } from 'vue'
import App from './App.vue'
import store from './store';
 
const app = createApp(App);
 
app.use(store);
 
app.mount('#app');

在任何组件中，你可以通过 this.$store.state.globalVar 或 this.$store.getters.getGlobalVar 访问全局变量。

3. 使用 provide/inject 实现父组件向所有子孙组件注入全局变量：

// 父组件
<script setup>
import { provide } from 'vue';
 
provide('globalVar', 'Hello Provider');
</script>
 
// 子组件
<script setup>
import { inject } from 'vue';
 
const globalVar = inject('globalVar');
</script>

4. 使用 vue-i18n 国际化插件管理多语言文本：

首先安装 vue-i18n：

npm install vue-i18n@next --save

然后在 i18n.js 中配置：

import { createI18n } from 'vue-i18n';
 
const messages = {
  en: {
    message: {
      hello: 'Hello i18n'
    }
  },
  zh: {
    message: {
      hello: '你好 i18n'
    }
  }
};
 
const i18n = createI18n({
  locale: 'en', // set default locale
  fallbackLocale: 'en', // set fallback locale
  messages, // set locale messages
});
 
export default i18n;

在 main.js 中引入并配置：

import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n';
 
const app = createApp(App);
 
app.use(i18n);
 
app.mount('#app');

在任何组件中，你可以通过 this.$t('message.hello') 来访问国际化文本。

以上方法可以根据项目需求选择合适的方式来定义全局变量。