浅谈在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 相关文章推荐
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
javascript window.opener的用法分析
Apr 07 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
js实现省份下拉菜单效果
Feb 15 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
JavaScript事件对象深入详解
Dec 30 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
Vue组件简易模拟实现购物车
Dec 21 Vue.js
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
项目中应用Redis+Php的场景
2016/05/22 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
js href的用法
2010/05/13 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
django中的HTML控件及参数传递方法
2018/03/20 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
SQL面试题
2013/12/09 面试题
建筑工程毕业生自我鉴定
2014/01/14 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
大学四年个人总结
2015/03/03 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
python - asyncio异步编程
2021/04/06 Python
golang 如何用反射reflect操作结构体
2021/04/28 Golang
浅谈Python数学建模之线性规划
2021/06/23 Python
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js