浅谈在vue项目中如何定义全局变量和全局函数_vue全局变量资源-CSDN文库

27 浏览量 2020-08-29 01:15:07 上传评论收藏 56KB PDF 举报

资源推荐

资源详情

资源评论

浅谈在浅谈在vue项目中如何定义全局变量和全局函数项目中如何定义全局变量和全局函数

本篇文章主要介绍了浅谈在vue项目中如何定义全局变量和全局函数，具有一定的参考价值，感兴趣的小伙伴们

可以参考一下

写在前面：写在前面：

如题，在项目中，经常有些函数和变量是需要复用，比如说网站服务器地址，从后台拿到的：用户的登录token,用户的地址信

息等，这时候就需要设置一波全局变量和全局函数，这两个设置不太难，而且有一些共通之处，可能有一些朋友对此不太了

解，所以随便写出来分享一波。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。

定义全局变量定义全局变量

原理：原理：

设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用export default 暴露出去，在main.js里面使用

Vue.prototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可。

全局变量模块文件：

Global.vue文件：

<script>

const serverSrc='www.baidu.com';

const token='12345678';

const hasEnter=false;

const userSite="中国钓鱼岛";

export default

{

userSite,//用户地址

token,//用户token身份

serverSrc,//服务器地址

hasEnter,//用户登录状态

}

</script>

使用方式使用方式1：：

在需要的地方引用进全局变量模块文件，然后通过文件里面的变量名字获取全局变量参数值。

在text1.vue组件中使用：

<template>

<div>{{ token }}</div>

</template>

<script>

import global_ from '../../components/Global'//引用模块进来

export default {

name: 'text',

data () {

return {

token:global_.token,//将全局变量赋值到data里面，也可以直接使用global_.token

}

}

}

</script>

<style lang="scss" scoped>

</style>

使用方式使用方式2：：

在程序入口的main.js文件里面，将上面那个Global.vue文件挂载到Vue.prototype。

import global_ from './components/Global'//引用文件

Vue.prototype.GLOBAL = global_//挂载到Vue实例上面

接着在整个项目中不需要再通过引用Global.vue模块文件，直接通过this就可以直接访问Global文件里面定义的全局变量。

text2.vue：

<template>

<div>{{ token }}</div>

</template>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

内容反馈

weixin_38686187

粉丝: 8
资源: 965

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip