vue实现全局变量

在Vue中实现全局变量的几种方法

使用Vue.prototype

通过Vue.prototype可以挂载全局变量或方法，在任何组件中通过this访问。

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

// 组件中使用
this.$globalVar

使用Vuex状态管理

Vuex是Vue官方推荐的状态管理库，适合管理复杂的全局状态。

// store.js
const store = new Vuex.Store({
  state: {
    globalVar: '全局变量值'
  },
  mutations: {
    setGlobalVar(state, value) {
      state.globalVar = value
    }
  }
})

// 组件中使用
this.$store.state.globalVar
this.$store.commit('setGlobalVar', '新值')

使用全局混入（Global Mixin）

通过全局混入可以在所有组件中注入变量或方法。

// main.js
Vue.mixin({
  data() {
    return {
      globalVar: '全局变量值'
    }
  }
})

// 组件中使用
this.globalVar

使用window对象

直接将变量挂载到window对象上，适合简单的全局变量需求。

// main.js
window.globalVar = '全局变量值';

// 组件中使用
window.globalVar

使用Provide/Inject

父组件通过provide提供变量，子组件通过inject注入，适合组件层级较深的场景。

// 父组件
export default {
  provide() {
    return {
      globalVar: '全局变量值'
    }
  }
}

// 子组件
export default {
  inject: ['globalVar']
}

使用插件机制

通过Vue插件封装全局功能。

// plugin.js
export default {
  install(Vue) {
    Vue.prototype.$globalVar = '全局变量值'
  }
}

// main.js
import GlobalVarPlugin from './plugin'
Vue.use(GlobalVarPlugin)

// 组件中使用
this.$globalVar

选择建议

• 简单项目：Vue.prototype或window对象
• 中型项目：Vuex或Provide/Inject
• 复杂项目：Vuex结合插件机制
• 组件库开发：插件机制或全局混入