好资源导航 » 文章资讯 » 详解VUE 定义全局变量的几种实现方式

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

2024-02-21 17:24:05 57

最近在学习VUE.js中间涉及到JS全局变量，与其说是VUE的全局变量，不如说是模块化JS开发的全局变量。

1、全局变量专用模块

就是以一个特定模块来组织管理这些全局量，需要引用的地方导入该模块便好。

全局变量专用模块Global.vue


constcolorList=[
'#F9F900',
'#6FB7B7',
'#9999CC',
'#B766AD',
'#B87070',
'#FF8F59',
'#FFAF60',
'#FFDC35',
'#FFFF37',
'#B7FF4A',
'#28FF28',
'#1AFD9C',
'#00FFFF',
'#2894FF',
'#6A6AFF',
'#BE77FF',
'#FF77FF',
'#FF79BC',
'#FF2D2D',
'#ADADAD'
]
constcolorListLength=20
functiongetRandColor(){
vartem=Math.round(Math.random()*colorListLength)
returncolorList[tem]
}
exportdefault
{
colorList,
colorListLength,
getRandColor
}

模块里的变量用export暴露出去，当其它地方需要使用时，引入模块global便可。

需要使用全局变量的模块html5.vue





importglobal_from'components/tool/Global'
exportdefault{
data(){
return{
getColor:global_.getRandColor,
mainList:[
{
id:1,
img:require('../../assets/rankIcon.png'),
title:'登录界面'
},
{
id:2,
img:require('../../assets/rankIndex.png'),
title:'主页'
}
]
}
}
}


.projectItem
{
margin:5px;
width:200px;
height:120px;
/*border:1pxsoild;*/
box-shadow:1px1px10px;
}
.projectItema
{
min-width:200px;
}
.projectItemaspan
{
text-align:center;
display:block;
}

2、全局变量模块挂载到Vue.prototype里。

Global.js同上，在程序入口的main.js里加下面代码

importglobal_from'./components/tool/Global'
Vue.prototype.GLOBAL=global_

挂载之后，在需要引用全局量的模块处，不需再导入全局量模块，直接用this就可以引用了，如下:


exportdefault{
data(){
return{
getColor:this.GLOBAL.getRandColor,
mainList:[
{
id:1,
img:require('../../assets/rankIcon.png'),
title:'登录界面'
},
{
id:2,
img:require('../../assets/rankIndex.png'),
title:'主页'
}
]
}
}
}

3、使用VUEX

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。因此可以存放着全局量。因Vuex有点繁琐，有点杀鸡用牛刀的感觉。认为并没有必要。

链接：vuex官方介绍

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

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐