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 相关文章推荐
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
javascript面向对象之Javascript 继承
May 04 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
简单的Vue SSR的示例代码
Jan 12 Javascript
node的process以及child_process模块学习笔记
Mar 06 Javascript
JQuery animate动画应用示例
May 14 jQuery
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
基于javascript实现移动端轮播图效果
Dec 21 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
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
javascript中的继承实例代码
2011/04/27 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
Python常见数据类型转换操作示例
2019/05/08 Python
python五子棋游戏的设计与实现
2019/06/18 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
中软国际Java程序员机试题
2012/08/19 面试题
应届生服务员求职信
2013/10/31 职场文书
人事部专员岗位职责
2014/03/04 职场文书
个人担保书范文
2014/05/20 职场文书
个人批评与自我批评
2014/10/15 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
结婚仪式主持词
2015/06/29 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python
zabbix配置nginx监控的实现
2022/05/25 Servers