定义全局变量的几种方式

1.Vuex

在大型应用中，全局变量比较多且需要实时修改时，建议使用Vuex
方法建议看官方文档：https://vuex.vuejs.org/zh/guide/

2.sessionStorage

webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage。
sessionStorage仅在当前会话中有效，关闭页面或者浏览器后被清除。存放大小一般为5MB，,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持。
访问sessionStorage：

var storage = window.sessionStorage

清除sessionStorage：

storage.clear()

3.localStorage

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。
方法与上相似：

var storage = window.localStorage

localStorage和sessionStorage使用时使用相同API：

localStorage.setItem("key","value");//以“key”为名称存储一个值“value”

 localStorage.getItem("key");//获取名称为“key”的值

 localStorage.removeItem("key");//删除名称为“key”的信息。

 localStorage.clear();​//清空localStorage中所有信息

4.global

稍后

5.挂载到Vue.prototype 里

可以挂载一个变量，也可以挂载一个全局变量模块

// main.js
import global_ from './components/tool/Global';
Vue.prototype.GLOBAL = global_;

//需要引用的模块处

import Vue from 'vue'
Vue.prototype.colorsss = 2

但是经过我的实验在组件中只能访问该值，不能修改该值，除非使用set方法，但是这样组件之间的实时更新也存在问题

6.跨模块常量

// conmmon.vue

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

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

import { host } form './conmmon';

如果要使用的常量非常多，可以建一个专门的constants目录，将各种常量写在不同的文件里面，保存在该目录下。
或者数量较小的值被多个模块共享

// constants.js 模块
export const A = 1;
export const B = 3;
export const C = 4;

// test1.js 模块
import * as constants from './constants';
console.log(constants.A); // 1
console.log(constants.B); // 3

// test2.js 模块
import {A, B} from './constants';
console.log(A); // 1
console.log(B); // 3

7.使用window对象

window.map=map;

后续待补充
参考博客：https://blog.csdn.net/qq_21356483/article/details/70177013