vue项目中定义全局变量、函数的几种方法


Posted in Javascript onNovember 08, 2019

前言

在项目中,经常会复用一些变量和函数,比如用户的登录token,用户信息等。这时将它们设为全局的就显得很重要了,全局变量和全局函数之间有一些相通之处,它们其实很简单,但是有些人可能还不太了解。简单总结分享一波,希望对你有所帮助。

定义全局变量

原理:使用模块(.js或.vue文件)来管理全局变量,最后使用export暴露出去 (最好导出的格式为对象,方便在其他地方调用),当其它地方需要使用时,用import导入该模块

1、使用全局变量专用模块,挂载到main.js文件上面

全局变量模块Global.vue定义如下:

const token='12345678';
const userStatus=false;
export default {
  token, // 用户token身份
  userStatus // 用户登录状态
}

模块里的变量用export暴露出去,当其它地方需要使用时,引入模块便可。

使用全局变量:

import global from '../../components/Global'//引用模块进来
export default {
data () {
  return {
     token:global.token,//将全局变量赋值到data里面
    }
  }
}

2、全局变量模块挂载到Vue.prototype上

Global.vue文件同上,在项目入口的main.js里配置:

import global from '../../components/Global'
Vue.prototype.GLOBAL = global

挂载之后,在需要引用全局变量的模块处,不需再导入全局变量模块,而是直接用this就可以引用了,如下:

export default {
 data () {
  return {
   token: this.GLOBAL.token,
  }
 }
}

方法一跟方法二的主要区别是,方法二全局只需要导入一次就可以,简单方便。

3、使用vuex定义全局变量

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。因此可以存放着全局量。

// index.js文件里定义vuex
import state from './state'
export default new Vuex.Store({
 actions,
 getters,
 mutations,
 state,
})
// state.js里面存放全局变量,并且暴露出去
const state = {
 token:'12345678',
 language: 'en',
}

export default state

使用的时候,在需要引用全局变量的模块处直接使用this.$store调用

export default {
  methods: {
   getInternation() {
    if (this.$store.state.language === 'en') {
     this.internation = 2
    } else if (this.$store.state.language === 'zh_CN') {
     this.internation = 1
    }
   }
  } 
}

因为Vuex有点繁琐,有点杀鸡用牛刀的感觉。因此认为并没有必要使用它。上面只是简单的使用,如果想要具体了解使用方式,可以去查阅资料具体掌握。

定义全局函数

原理:在main.js里面通过Vue.prototype将函数挂载到Vue实例上面,通过this.函数名,来运行函数。

1、在main.js文件直接定义方法

简单的函数可以直接写在main.js文件里定义。

// 将方法挂载到vue原型上
Vue.prototype.changeData = function (){
 alert('执行成功');
}

使用的时候组件里直接调用。

//直接通过this运行函数,这里this是vue实例对象
this.changeData();

2、使用全局函数专用模块,挂载到main.js上面

base.js文件,文件位置可以放在跟main.js同一级,方便引用(这点可以依据个人习惯决定)。

exports.install = function (Vue, options) {
  Vue.prototype.changeData = function (){
    alert('执行成功');
  };
};

main.js引入并使用。

import base from './base'
Vue.use(base);

所有的组件里就可以调用该函数。

this.changeData();

结语

以上是vue中全局变量和全局函数使用的全部内容。希望总结的东西对你有所帮组。还不太了解的可以多看几遍,大家加油!!!也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
常见的jQuery选择器汇总
Nov 24 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 Javascript
详解JavaScript对象类型
Jun 16 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 Javascript
Angular value与ngValue区别详解
Nov 27 Javascript
Vue修改项目启动端口号方法
Nov 07 #Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 #Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 #Javascript
浅谈Vue中render中的h箭头函数
Nov 07 #Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 #Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 #Javascript
vue之a-table中实现清空选中的数据
Nov 07 #Javascript
You might like
NO3第三帝国留言簿制作过程
2006/10/09 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
php中session定期自动清理的方法
2015/11/12 PHP
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
Javascript的并行运算实现代码
2010/11/19 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
原生JS实现留言板
2020/03/26 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
Python 实现链表实例代码
2017/04/07 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
Linux下python制作名片示例
2018/07/20 Python
使用Python进行目录的对比方法
2018/11/01 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
python简单实现最大似然估计&scipy库的使用详解
2020/04/15 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
中文师范生自荐信
2014/01/30 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
申报优秀教师材料
2014/12/16 职场文书
导游词格式
2015/02/13 职场文书
团日活动总结格式
2015/05/11 职场文书
学生会部长竞选稿
2015/11/19 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers