欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue定义全局变量

程序员文章站 2024-01-21 22:40:58
...

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>