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 相关文章推荐
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
Jun 27 Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
javascript实现在线客服效果
Jul 15 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 Javascript
Bootstrap源码解读网格系统(3)
Dec 22 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 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
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
PHP教程 预定义变量
2009/10/23 PHP
超级简单的php+mysql留言本源码
2009/11/11 PHP
PHP XML操作类DOMDocument
2009/12/16 PHP
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
vue webpack打包优化操作技巧
2018/02/22 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
Python自动登录126邮箱的方法
2015/07/10 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
python3字符串操作总结
2019/07/24 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
python 制作简单的音乐播放器
2020/11/25 Python
python利用opencv实现颜色检测
2021/02/23 Python
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
美国旅游网站:Tours4Fun
2017/02/17 全球购物
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
《在山的那边》教学反思
2014/02/23 职场文书
企业员工集体活动方案
2014/08/17 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
详解vue身份认证管理和租户管理
2021/05/25 Vue.js