浅谈在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 相关文章推荐
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
Js-$.extend扩展方法使方法参数更灵活
Jan 15 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
3种js实现string的substring方法
Nov 09 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 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
apache+php+mysql安装配置方法小结
2010/08/01 PHP
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
yii添删改查实例
2015/11/16 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
js读取cookie方法总结
2014/10/31 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
Javascript中弹窗confirm与prompt的区别
2018/10/26 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
Python中的rfind()方法使用详解
2015/05/19 Python
python开发之for循环操作实例详解
2015/11/12 Python
Python3.5实现的罗马数字转换成整数功能示例
2019/02/25 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
python调用win32接口进行截图的示例
2020/11/11 Python
python 写一个文件分发小程序
2020/12/05 Python
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
自荐书封面下载
2013/11/29 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
迎国庆主题班会
2015/08/17 职场文书