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结合插件机制
- 组件库开发：插件机制或全局混入
