vue定义全局变量

1、将从服务器请求的数据作为全局变量（全局变量模块挂载到Vue.prototype）

在开发中，有时需要将从接口请求到的一些数据当做全局变量，在其他页面多次使用。比如，登录成功后可能需要将用户名，id等信息存起来，便于其他页面展示或使用，将这些信息定义为全局变量是用起来就很方便。
举栗子：
在login.vue中拿到了用户的一些信息：

<script>
    import Vue from 'vue'     //注意，要在这个页面中引入vue，不然下面的Vue.prototype会报错
    export default {
        data(){
            return{}
        },
        methods:{
            login(){
                const userMsg = {
                    userId : 123,
                    userName : '张三',
                    userSite : '上海市浦东新区'
                }
                Vue.prototype.$userMsg = userMsg;    //将全局变量模块挂载到Vue.prototype中
                this.$router.push({path:'/index2'});
            },
        }
    }
</script>

在另一个页面使用：

alert(this.$userMsg.userSite);      //拿到在login.vue中的用户位置

2、在全局的js中自定义全局变量

命名global.js为全局js，自定义全局变量：

const host = 'localhost:8080';
const token = 'abcdefg123456';
const city = '上海';

export default{
    host,    //地址
    token,   //用户token信息
    city     //位置
}

在vue页面中使用：

<template>
    <div>
        <button @click="clickMe">点我</button>
    </div>
</template>
<script>    
    import global_msg from '../js/global.js'    //注意文件路径，实际路径以项目目录结构为准
    export default {
        data(){
            return{}
        },
        methods:{
            clickMe(){
                alert(global_msg.host);     //localhost:8080
            }
        }
    }
</script>

3、在main.js中将global.js挂载到Vue.prototype中

将上面例子中的global.js在入口文件main.js中引入并挂载:

import global_msg from './js/global.js'   //注意文件路径，实际路径以项目目录结构为准
Vue.prototype.$global_msg = global_msg;

在页面中使用：

<template>
    <div>
        <button @click="clickMe">点我</button>
    </div>
</template>
<script>    
    export default {
        data(){
            return{}
        },
        methods:{
            clickMe(){
                alert(this.$global_msg.host);    //localhost:8080
            }
        }
    }
</script>