Vue3 全局变量定义方式汇总及代码示例

在 Vue3 中，合理地定义全局变量可以方便在多个组件之间共享数据和状态。以下为您汇总几种常见的 Vue3 全局变量定义方式，并附上相应的代码示例。

方式一：利用 Vue 应用实例的 provide 和 inject

import { createApp } from 'vue';

const app = createApp({
  provide: {
    globalVar: '这是一个全局变量'
  }
});

app.mount('#app');

在子组件中通过 inject 来获取全局变量：

import { inject } from 'vue';

export default {
  setup() {
    const globalVar = inject('globalVar');
    return { globalVar };
  }
}

方式二：使用 Vuex 状态管理库

首先安装 vuex：

npm install vuex@next

创建一个 store.js 文件：

import { createStore } from 'vuex';

const store = createStore({
  state: {
    globalData: '这是 Vuex 中的全局数据'
  },
  // 其他模块如 mutations、actions、getters 等
});

export default store;

在组件中使用：

import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    return { globalData: store.state.globalData };
  }
}

方式三：创建独立的 JavaScript 文件

创建一个 global.js 文件来定义全局变量：

export const globalVar = '全局变量的值';

在需要使用的组件中导入：

import { globalVar } from './global';

以上就是 Vue3 中常见的全局变量定义方式，您可以根据项目的实际需求和架构选择合适的方式。通过合理运用全局变量，能够提高代码的复用性和可维护性，使得开发过程更加高效和便捷。

掌握这些全局变量的定义方式将有助于您更好地构建 Vue3 应用程序，提升开发体验和效率。