浅谈在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 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
Oct 16 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
Vue中Quill富文本编辑器的使用教程
Sep 21 Javascript
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 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
php返回当前日期或者指定日期是周几
2015/05/21 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
详解微信小程序审核不通过的解决方法
2018/01/17 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
python 正则表达式 概述及常用字符
2009/05/04 Python
Python XML RPC服务器端和客户端实例
2014/11/22 Python
Python中运行并行任务技巧
2015/02/26 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
应聘自荐书
2013/10/08 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
招股说明书范本
2014/05/06 职场文书
2014最新离职证明范本
2014/09/12 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
golang实现浏览器导出excel文件功能
2022/03/25 Golang