在Vue 3中定义全局变量可以通过以下几种方式实现：
- 在
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');
- 使用 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 访问全局变量。
- 使用 provide/inject 实现父组件向所有子孙组件注入全局变量：
// 父组件
<script setup>
import { provide } from 'vue';
provide('globalVar', 'Hello Provider');
</script>
// 子组件
<script setup>
import { inject } from 'vue';
const globalVar = inject('globalVar');
</script>
- 使用
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') 来访问国际化文本。
以上方法可以根据项目需求选择合适的方式来定义全局变量。