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


Posted in Javascript onOctober 24, 2017

写在前面:

如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录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>

<script>
export default {
 name: 'text',
data () {
  return {
     token:this.GLOBAL.token,//直接通过this访问全局变量。
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

Vuex也可以设置全局变量:

通过vuex来存放全局变量,这里东西比较多,也相对复杂一些,有兴趣的小伙伴们,可自行查阅资料,折腾一波、

定义全局函数

原理

新建一个模块文件,然后在main.js里面通过Vue.prototype将函数挂载到Vue实例上面,通过this.函数名,来运行函数。

1. 在main.js里面直接写函数

简单的函数可以直接在main.js里面直接写

Vue.prototype.changeData = function (){//changeData是函数名
 alert('执行成功');
}

组件中调用:

this.changeData();//直接通过this运行函数

2. 写一个模块文件,挂载到main.js上面。

base.js文件,文件位置可以放在跟main.js同一级,方便引用

exports.install = function (Vue, options) {
  Vue.prototype.text1 = function (){//全局函数1
  alert('执行成功1');
  };
  Vue.prototype.text2 = function (){//全局函数2
  alert('执行成功2');
  };
};

main.js入口文件:

import base from './base'//引用
  Vue.use(base);//将全局函数当做插件来进行注册

组件里面调用:

this.text1();
  this.text2();

后话

上面就是如何定义全局变量 全局函数的内容了,这里的全局变量全局函数可以不局限于vue项目,vue-cli是用了webpack做模块化,其他模块化开发,定义全局变量、函数的套路基本上是差不多。上文只是对全局变量,全局函数的希望看完本文能给大家一点帮助。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript的Function详细
Nov 14 Javascript
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
Javascript中arguments对象详解
Oct 22 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 Javascript
浅谈angular4实际项目搭建总结
Dec 01 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 Javascript
vue element table中自定义一些input的验证操作
Jul 18 Javascript
详解Vue数据驱动原理
Nov 17 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 #Javascript
详解基于Vue+Koa的pm2配置
Oct 24 #Javascript
Vue.js2.0中的变化小结
Oct 24 #Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 #Javascript
分享vue.js devtools遇到一系列问题
Oct 24 #Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 #Javascript
Vue基于NUXT的SSR详解
Oct 24 #Javascript
You might like
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
PHP 危险函数解释 分析
2009/04/22 PHP
PHP 字符串分割和比较
2009/10/06 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
js实现飞机大战小游戏
2020/08/26 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
公司员工的自我评价范例
2013/11/01 职场文书
如何掌握自荐信格式呢
2013/11/19 职场文书
路政管理专业个人自荐信范文
2013/11/30 职场文书
2014年学习雷锋活动总结
2014/03/01 职场文书
考核工作实施方案
2014/03/30 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
集结号观后感
2015/06/08 职场文书
网络舆情信息简报
2015/07/21 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
中学政教处工作总结
2015/08/13 职场文书
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python
Consul在linux环境的集群部署
2022/04/08 Servers
Python循环之while无限迭代
2022/04/30 Python