|-转 vue中在.vue文件中定义全局变量 全局函数及使用
背景：项目开发中使用到了多个项目的集成，需要集成分系统的跳转链接，但是涉及系统的内网地址及外网地址的频繁更新设置，这样在代码里修改非常的不方便，于是创建一个全局变量提高工作效率。
正文： 在项目中，经常有些函数和变量是需要复用，比如说网站服务器地址，从后台拿到的：用户的登录token,用户的地址信息等，这时候就需要设置一波全局变量和全局函数。 **
一、定义全局变量
** 原理： 设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用export default 暴露出去，在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可；在src/config文件下创建global.vue文件，引入文件获取变量即可。
全局变量模块文件： global.vue文件：
<script>
const serverUrl='www.baidu.com';
const token='12345678';
const loginStatus=false;
const userAddr="北京";
export default
{
serverUrl,//服务器地址
token,//用户token身份
loginStatus,//用户登录状态
userAddr,//用户地址
}
</script>
使用方式1： 在需要的地方引用进全局变量模块文件，然后通过文件里面的变量名字获取全局变量参数值。 在helloworld.vue组件中使用：
<template>
<div>{{ token }}</div>
</template>
<script>
import global from ../config/global//引用模块进来
export default {
name: helloworld,
data () {
return {
token:global.token,//将全局变量赋值到data里面，也可以直接使用global.token
}
}
}
</script>
<style lang="scss" scoped>
</style>
使用方式2： 在程序入口的main.js文件里面，将上面那个global.vue文件挂载到Vue.prototype。
import global from ../config/global//引用模块进来
Vue.prototype.GLOBAL = global //挂载到Vue实例上面
接着在整个项目中不需要再通过引用global.vue模块文件，直接通过this就可以直接访问Global文件里面定义的全局变量。 helloworld2.vue： ...
浏览更多内容请先登录。
立即注册
分享的网址网站均收集自搜索引擎以及互联网，非查问网运营，查问网并没有提供其服务，请勿利用其做侵权以及违规行为。
更新于：2022-10-27 18:32:20
相关内容
excel 列索引（数字）转列名-修正亲测版20200414
前端优化之lazy-load Chris__Liu
vue框架大概要学多久(前端vue要学5天就会方法)
带你玩转vue——开发工具的选择vscode
VS Code——Live Server的简介、安装与使用
fatal: unable to access ‘https://github.com/nhn/raphael.git/‘: Op...
fatal: unable to connect to gitee.com: gitee.com[0: 180.97.125.228]: e...
git提交或克隆报错fatal: unable to access ‘https://github.com/tata20191...
Docker Desktop requires Windows 10 Pro/Enterprise/Home (18363+)
vue-router.esm.js?8c4f:2065 Uncaught (in promise) NavigationDuplicate...
express + vue +mysql 搭建项目
Vue + NodeJS + MySQL 搭建文章后台管理系统
vue中在.vue文件中定义全局变量 全局函数及使用
Identifier * is not in camel case - 代码规范性问题
实战案例丨Vscode开发第一个Vue+Element Plus示例
学习JS，TS，Vue等等语言做一个信息分享的小平台
什么是 JWT -- JSON WEB TOKEN
vue中 router.beforeEach() 的用法
＜router-view v-if=“isRouterAlive“＞ 刷新当前页面 - Vue2
createError.js?2d83:16 Uncaught (in promise) Error: Request failed wi...
vue axios跨域 Request Method: OPTIONS问题
Vue报错 Errors compiling template: ****** : Interpolation inside attr...
图片上传402 (Payment Required) 看具体js是这行xhr.send(formData); 报错
这个符号`是怎么打出来的
this.$router.push跳转时页面不刷新的问题
vue 刷新当前页面或者跳转页面时候刷新
vue项目如何刷新当前页面
让 vue项目在Linux后台持久运行 npm run dev
vue+element-ui表格列元素添加链接
sockjs-node/info?t= net::ERR_CONNECTION_TIMED_OUT
js快速将字符串数组转化为数字数组（互换）
Vue中checkbox的v-model初值设置为数组才对
vue element 中使用a标签报错的问题
Vue 中使用 router-link 后，URL 变化但是页面不刷新，Vue获取后台传过来的值
vue：报错“Extra semicolon“解决
vue中的各种报错整理
vscode 运行 vue localhost 拒绝了我们的连接请求。使用visual Studio Code...
uni-app 简单介绍（基于Vue.js，开发一次，多端覆盖）
推荐内容
