vue实现全局变量

Vue 2 实现全局变量

在 Vue 2 中，可以通过 Vue 的原型链或 Vuex 状态管理实现全局变量。

原型链方式
通过 Vue.prototype 挂载全局变量，所有组件实例均可访问：

// main.js
Vue.prototype.$globalVar = '全局变量值';

// 组件中使用
this.$globalVar;

Vuex 方式
适用于需要响应式更新或复杂状态管理的场景：

// store.js
export default new Vuex.Store({
  state: {
    globalVar: '初始值'
  }
});

// 组件中使用
this.$store.state.globalVar;

Vue 3 实现全局变量

Vue 3 推荐使用 provide/inject 或全局状态管理库（如 Pinia）。

provide/inject 方式
在应用顶层提供变量，子组件注入使用：

// main.js
import { createApp } from 'vue';
const app = createApp(App);
app.provide('globalVar', '全局值');

// 子组件中使用
import { inject } from 'vue';
const globalVar = inject('globalVar');

Pinia 方式
Vue 3 官方推荐的状态管理工具：

// stores/global.js
import { defineStore } from 'pinia';
export const useGlobalStore = defineStore('global', {
  state: () => ({ globalVar: '值' })
});

// 组件中使用
import { useGlobalStore } from '@/stores/global';
const store = useGlobalStore();
store.globalVar;

注意事项

1. 响应式更新
   若需变量响应式更新，优先使用 Vuex/Pinia 或 Vue 3 的 ref/reactive。

2. 命名规范
   通过原型链挂载的变量建议以 $ 开头（如 $globalVar），避免命名冲突。

3. 类型安全
   Vue 3 结合 TypeScript 时，可为 provide/inject 声明类型：

   app.provide<string>('globalVar', '值');
   const globalVar = inject<string>('globalVar');