浅谈在vue项目中如何定义全局变量和全局函数

写在前面：

如题，在项目中，经常有些函数和变量是需要复用，比如说网站服务器地址，从后台拿到的：用户的登录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做模块化，其他模块化开发，定义全局变量、函数的套路基本上是差不多。上文只是对全局变量，全局函数的希望看完本文能给大家一点帮助。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue中定义全局变量与常量的各种方式详解

    前言 本文主要跟大家介绍了关于Vue定义全局变量与常量的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都引入. 尝试1: 创建 global.js 并且在其中定义 let a = 10; 在入口文件中引入 global.js import './global.js' 在项目中使用: a // 报错 发现报错了, a 并没有定义. 为什么? 这个涉及到模块作用域: 1 每一个 js 都相当于

  • vue 如何添加全局函数或全局变量以及单页面的title设置总结

    传统的设置title的方法是:document.title = 'title' 但是这种写法在iOS的微信上是不兼容的 这里设置title的方法是通过在百度搜索的所谓黑科技,避免了安卓和iOS的不兼容写法 首先在index.html中定义一个全局的函数: var setTitle = function (title) { var u = navigator.userAgent var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linu

  • 详解VUE 定义全局变量的几种实现方式

    最近在学习VUE.js 中间涉及到JS全局变量,与其说是VUE的全局变量,不如说是模块化JS开发的全局变量. 1.全局变量专用模块 就是以一个特定模块来组织管理这些全局量,需要引用的地方导入该模块便好. 全局变量专用模块 Global.vue <script type="text/javascript"> const colorList = [ '#F9F900', '#6FB7B7', '#9999CC', '#B766AD', '#B87070', '#FF8F59'

  • 浅谈在vue项目中如何定义全局变量和全局函数

    写在前面: 如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数,这两个设置不太难,而且有一些共通之处,可能有一些朋友对此不太了解,所以随便写出来分享一波.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. 定义全局变量 原理: 设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vu

  • 浅谈在JAVA项目中LOG4J的使用

    一.直接使用: //输出到项目文件夹下output1.txt文件中 ////////////////////////////// // DEBUG - Here is some DEBUG // INFO - Here is some INFO // WARN - Here is some WARN // ERROR - Here is some ERROR // FATAL - Here is some FATAL ////////////////////////////// package

  • 浅谈web服务器项目中request请求和response的相关响应处理

    我们经常使用别人的服务器进行构建网站,现在我们就自己来写一个自己的服务来使用. 准备工作:下载所需的题材及文档 注:完整项目下载 一.request请求获取  1.了解request请求 在写服务器之前,我们需要知道客户端发送给我们哪些信息?以及要求我们返回哪些信息?经过测试我们能够知道用户客户端发送的信息有以下几点: 客户端发送到服务器端的请求消息,我们称之为请求(request),其实就是一个按照http协议的规则拼接而成的字符串,Request请求消息包含三部分: 请求行 消息报头 请求正

  • 浅谈JAVA在项目中如何自定义异常

    浅谈JAVA在项目中如何自定义异常

    JAVA项目中自定义异常 1.数据返回处理类 @Data public class R<T> implements Serializable { private static final long serialVersionUID = -8497670085742879369L; @ApiModelProperty(value = "返回码", example = "200") private Integer code=200; @ApiModelPro

  • 浅谈如何在项目中使用Spring Cloud Alibaba Sentinel组件

    浅谈如何在项目中使用Spring Cloud Alibaba Sentinel组件

    目录 Sentinel 是什么 Sentinel与Hystrix的区别 Sentinel分为两大部分: 一.控制台(Dashboard) 二.搭建客户端 1.在自己的项目中引入依赖 2.编辑项目中的 application.yml或者bootstrap.yml文件 3.资源是 Sentinel 中的一个关键概念.它可以是任何东西,例如服务.方法,甚至是代码片段. 三.查看接口的流量的详情 1.实时监控 2.簇点链路 3.等等:其他使用方法有待发掘 Sentinel 是什么 随着微服务的流行,服务

  • 浅谈vue3在项目中的逻辑抽离和字段显示

    目录 逻辑分层 将各个区域业务分开 这样做的优势 这样的场景应该如何处理 优化 reactive 不一定非要写在setup函数中 如何在页面上直接显示值 逻辑分层 我们在使用vue3开发项目的时候, 如何进行[区域分层]呢???? 举一个简单的小粒子 一个区域有[查询逻辑.修改后的保存逻辑.新增逻辑.删除逻辑] 这个页面可能还有其他的区域.A区域.B区域,C区域...[有很多逻辑] 这个时候我们可以将一个区域的逻辑分离出去 将各个区域业务分开 export default { setup ()

  • 浅谈redis在项目中的应用

    redis在项目中的应用 ps:PHP 会自动 关redis连接 不需要手动关 对于临时的数据 可以不经过数据库直接redis上操作 /*消息队列实例 */ public function insertinfo(){ //连接本地的 Redis 服务 $redis = new \Redis(); $redis->connect('127.0.0.1', 6379); //存储数据到列表中 $infos = array('info1' => 66, 'info2' => 88); $red

  • 浅谈web服务器项目中静态请求和动态请求处理

    注:完整项目下载 在处理了核心任务之后,我们会发现有些请求并不是都是静态的,那么我们就需要进行实现处理动态请求的要求,如下面代码是我们请求的解决方式,我们只需在HttpRequestImpl实现类中,将如下代码实现具体的判断过程 //判断当前请求的否是静态资源 public boolean isStaticResource(){ return true; } //判断当前请求的否是动态资源 public boolean isDynamicResource(){ return true; } 1.

  • 浅谈在vue-cli3项目中解决动态引入图片img404的问题

    博主最近手头再做一个项目,需要调用天气接口,并且还要动态显示天气相关图片icon. 本来以为没什么大问题,结果硬生生被这个动态图片路径搞得民不聊生(博主还是 too young,too simple~),给出效果图: 就是那个红框选中的那个天气状况图标icon要根据当前城市获取当前城市天气状态码,再根据当前城市状态码找到这个对应的天气图标icon~~ 按照一般的开发模式,静态图片路径是相对路径还是绝对路径都可以,因为图片路径是静态的是死的,所以webpack去找这个图片路径的时候是能找到的. 但

  • 浅谈PHP检查数组中是否存在某个值 in_array 函数

    PHP in_array() 函数检查数组中是否存在某个值,如果存在则返回 TRUE ,否则返回 FALSE . 语法: bool in_array( mixed needle, array array [, bool strict] ) 参数说明: 参数 说明 needle 需要在数组中搜索的值,如果是字符串,则区分大小写 array 需要检索的数组 strict 可选,如果设置为 TRUE ,则还会对 needle 与 array 中的值类型进行检查 例子: <?php $arr_a = a

随机推荐