VUE 全局变量的几种实现方式

weixin_34241036

于 2018-08-21 06:36:30 发布

阅读量108

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000016091789

本文介绍在Vue项目中管理全局变量的三种方式：通过专用模块、挂载到Vue.prototype及使用Vuex状态管理。讨论了各自的特点及适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、全局变量专用模块
意思是说，用一个模块（js or vue）管理这套全局变量，模块里的变量用export （最好导出的格式为对象，方便在其他地方调用）暴露出去，当其它地方需要使用时，用import 导入该模块
2、全局变量模块挂载到Vue.prototype 里
Global.js同上，在程序入口的main.js里加下面代码

import global_ from './components/tool/Global'
Vue.prototype.GLOBAL = global_
挂载之后，在需要引用全局量的模块处，不需再导入全局量模块，直接用this就可以引用了，如下:

return {
  getColor: this.GLOBAL.getRandColor,
  mainList: [
    {
      id: 1,
      img: require('../../assets/rankIcon.png'),
      title: '登录界面'
    },
    {
      id: 2,
      img: require('../../assets/rankIndex.png'),
      title: '主页'
    }
  ]
}

}
}
</script>
1和2的区别在于：2不用在用到的时候必须按需导入全局模块文件
3、vuex
//摘自网络