正文

在vue项目中如何定义全局变量全局函数(代码片段)

tkzc2013  tkzc2013  2022-12-16  149

关键词：

如题，在项目中，经常有些函数和变量是需要复用，比如说网站服务器地址，从后台拿到的：用户的登录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也可以设置全局变量

定义全局函数

原理

新建一个模块文件，然后在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做模块化，其他模块化开发，定义全局变量、函数的套路基本上是差不多。上文只是对全局变量

在vue项目中如何定义全局变量全局函数(代码片段)

写在前面：如题，在项目中，经常有些函数和变量是需要复用，比如说网站服务器地址，从后台拿到的：用户的登录token,用户的地址信息等，这时候就需要设置一波全局变量和全局函数，这两个设置不太难，而且有一些共通之处... 查看详情

vue项目使用less全局变量(代码片段)

vue使用less全局变量2018年07月11日22:14:52 阅读数：524 我们经常用less定义一些全局变量，比如头部的高度，比如主题的颜色，比如侧边栏的宽度，这时我们定义less全局文件是有必要的，那如何在vue中使用呢？我首先尝... 查看详情

函数-全局变量(代码片段)

...兄弟都可以随便使用的（可以理解为全局变量）demo如下:#定义全局变量a=100deftest1():print(a)#虽然没有定义变量a但是依然可以获取其数据defte 查看详情

局部变量(代码片段)

...变量在函数里修改列表数据全局变量，局部变量全局变量定义在函数外部一级代码的变量，叫全局变量局部变量在函数里面定义的变量，叫局部变量，只能在函数内部使用，如果全局变量跟局部变量名一样，优先使用函数局部的... 查看详情

作用域(代码片段)

作用域变量作用域：一个变量的作用域就是代码中定义变量的区域。全局变量：在全局中定义的变量拥有全局作用域局部变量：在函数内部定义的变量为局部变量，具有局部作用域局部变量的优先级高于全局变量,当全局变量与... 查看详情

vsc++警惕项目中文件全局变量冲突！！！！！！！！(代码片段)

...与原变量的地址竟然不一样！后来发现，原来在项目的其他文件里，定义了相同名字的全局变量，，，，导致了冲突。。。main4.c和main5.cpp定义了相同名称的全局变量m_json_cfg以后别干这种抠门的事了&# 查看详情

c语言面试考点之二(代码片段)

...的局部变量，而那个局部变量的作用域就在那个循环体内如何引用一个已经定义过的全局变量？extern关键字全局变量可不可以定义在可被多个.C文件包含的头文件中？为什么？可以，在不同的C文件中以static形式来声明同名全局变... 查看详情

c语言面试考点之二(代码片段)

c_局部变量&全局变量(代码片段)

2018-5-9?WritenByStephen.Yu 一、定义1.局部变量：在函数中定义的变量2.全局变量：在所有函数体之外定义定义(Definition)：声明并分配内存;未分配内存则只是声明（declaration)二、局部变量&全局变量1.某个函数中定义的变量不能被... 查看详情

变量作用域(代码片段)

一个变量的作用域（scope）的程序源代码中定义这个变量得的区域。全局变量拥有全局作用域，在Javascript代码中的任何地方多是有定义的。然而在函数内声明的变量只在函数体内有定义。它们是局部变量，作用域是局部性的。函... 查看详情

局部变量和全局变量(代码片段)

在函数外边定义的变量叫做全局变量全局变量能够在所有的函数中进行访问如果在函数中修改全局变量，那么就需要使用global进行声明，否则出错如果全局变量的名字和局部变量的名字相同，那么使用的是局部变量的，小技巧强... 查看详情

定义了一个vue全局方法，不能再vuex中进行调用(代码片段)

...的。建议：把函数放在一个单独的模块里定义，这样你在项目的不同地方，可以通过import的方式引入使用。查看详情

vue自定义函数挂到全局方法(代码片段)

方法一:使用Vue.prototype//在mian.js中写入函数Vue.prototype.getToken=function()...//在所有组件里可调用函数this.getToken();方法二:使用exports.install+Vue.prototype//写好自己需要的fun.js文件exports.install=function(Vue,options)Vue.proto 查看详情

局部变量与全局变量(代码片段)

1、局部变量在一个函数内部定义的变量是内部变量，它只在本函数范围内有效，也就是说只有在本函数内才能使用他们，在此函数以外是不能使用这些变量的。这称为“局部变量”。例：floatf1（inta）/*函数f1*/　　　　　　intb,c... 查看详情

如何从挂载的函数中修改全局变量？ Vue.js

】如何从挂载的函数中修改全局变量？Vue.js【英文标题】：Howtomodifyaglobalvariablefromamountedfunction?Vue.js【发布时间】：2020-03-2104:44:38【问题描述】：我是Vue.js的新手，在网上找不到答案。我在\'mounted:\'中有一个函数，我需要它来更... 查看详情

局部函数和全局函数(代码片段)

#!/usr/bin/envpython#coding=utf-8#局部变量，就是在函数内部定义的变量#不同的函数，可以定义相同的名字的局部变量，但是各用个的不会产生影响#局部变量的作用，为了临时保存数据需要在函数中定义变量来进行存储，这就是它的作... 查看详情

局部变量全局变量(代码片段)

1.局部变量1deffun():2a=10#这个a在函数体中声明定义，仅作用在函数中3print(a)4returna+10056print(fun())78"""9101011011"""2.全局变量1A=100#全局变量2a=None3deffun():4globala#使用global关键字将函数体中的a声明为全局变量5a=20#现在的a是全局变量了6retu... 查看详情

python全局变量global(代码片段)

Python全局变量局部变量就是定义在一个函数体内部的变量全局变量是定义在外面的变量 a=1#全局变量是定义在函数、类外面的变量deff():b=2#局部变量print(a)#全局变量引用全局变量a=1#全局变量a是定义在函数、类外面的... 查看详情