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

Vue全局变量管理

最新推荐文章于 2023-09-11 10:00:03 发布

转载最新推荐文章于 2023-09-11 10:00:03 发布 · 144 阅读

0 ·

CC 4.0 BY-SA版权

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

文章标签：

#javascript #ViewUI

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

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
//摘自网络