vue定义全局变量

墨蓝 2024-04-19 10:58 101阅读 0赞

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

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

export default {
            data(){
                return{}
            },
            methods:{
                login(){
                    const userMsg = {
                        userId : 123,
                        userName : '张三',
                        userSite : '上海市浦东新区'
                    }
                    Vue.prototype.$userMsg = userMsg;    //将全局变量模块挂载到Vue.prototype中
                    this.$router.push({path:'/index2'});
                },
            }
        }

## 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>