Vue全局变量的实现方式

今天在用vue做一个单页面地图的时候，关于vue全局变量产生了疑问，经过一番思考和查找资料总结了接下来几个方法。

---

1.直接使用window对象

   window.map=map;

---

2.使用webpack的全局变量

webpack 有global关键字比如在一个a.js文件中定义全局变量：

global.COURSES = 'xxxxx';

在入口的main.js

import './a'；

就可以，别的js不需要import也能用到COURSES

3.编写特定模块管理全局变量

// conmmon.vue

const host = '//top/mid/xx';export default {  host};

然后在需要用的文件中使用一下方法引入:

import { host } form './conmmon';

---

4.全局变量模块挂载到Vue.prototype 里

// main.jsimport global_ from './components/tool/Global';Vue.prototype.GLOBAL = global_;//需要引用的模块处<script>export default {    data () {      return {        getColor: this.GLOBAL.getRandColor}</script>

4.VUEX

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，因此可以存放着全局变量。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex
Vuex文档