浅谈在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 相关文章推荐
js实现的网站首页随机公告随机公告
Mar 14 Javascript
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
精读《Vue3.0 Function API》
May 20 Javascript
DWR内存兼容及无法调用问题解决方案
Oct 16 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
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
js实现小时钟效果
2020/03/25 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
python fabric使用笔记
2015/05/09 Python
python 容器总结整理
2017/04/04 Python
python实现爬取图书封面
2018/07/05 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
Django 拆分model和view的实现方法
2019/08/16 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
Python常用编译器原理及特点解析
2020/03/23 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
大学生作弊检讨书
2014/02/19 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
实习指导教师评语
2014/12/30 职场文书
学生个人总结范文
2015/02/15 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
建筑工程催款函
2015/06/24 职场文书
新闻通讯稿模板
2015/07/22 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server