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 相关文章推荐
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
jQuery中height()方法用法实例
Dec 24 Javascript
浅谈javascript 函数属性和方法
Jan 21 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
bootstrap table使用入门基本用法
May 24 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
详解如何运行vue项目
Apr 15 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
Dec 16 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表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
js如何实现设计模式中的模板方法
2013/07/23 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
再谈JavaScript线程
2015/07/10 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
在Python中使用列表生成式的教程
2015/04/27 Python
Python批量转换文件编码格式
2015/05/17 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
python实现朴素贝叶斯算法
2018/11/19 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
自荐信要包含哪些内容
2013/11/06 职场文书
健康教育主题班会
2015/08/14 职场文书
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python