介绍
这篇文章将为大家详细讲解有关怎么在vue项目中定义全局变量,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
<强>定义全局变量
原理:使用模块(js或。vue文件)来管理全局变量,最后使用出口暴露出去(最好导出的格式为对象,方便在其他地方调用),当其它地方需要使用时,用进口导入该模块
<强> 1,使用全局变量专用模块,挂载到main.js文件上面
全局变量模块全球。vue定义如下:
const 令牌=& # 39;12345678 & # 39;;
const userStatus=false;
export default {
令牌,才能,//,用户令牌身份//userStatus 才能;用户登录状态
} 模块里的变量用出口暴露出去,当其它地方需要使用时,引入模块便可。
使用全局变量:
import global 得到& # 39;. ./. ./组件/全球# 39;//引用模块进的来
export default {
data (), {
return {才能
,,,,令牌:global.token,//将全局变量赋值到数据里面
,,,}
,,}
} <强> 2,全局变量模块挂载到Vue.prototype上
Global.vue文件同上,在项目入口的主要。js里配置:
import global 得到& # 39;. ./. ./组件/全球# 39;
时间=Vue.prototype.GLOBAL 全球 挂载之后,在需要引用全局变量的模块处,不需再导入全局变量模块,而是直接用这就可以引用了,如下:
export default {
,data (), {
return {才能
,才能令牌:this.GLOBAL.token,
,,}
,}
} 方法一跟方法二的主要区别是,方法二全局只需要导入一次就可以,简单方便。
<强> 3,使用vuex定义全局变量
vuex是一个专为Vue。js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,因此可以存放着全局量。
//, index.js文件里定义vuex
import state 得到& # 39;。/状态# 39;
export default new Vuex.Store ({
,行动,
getter方法,
,突变,
,状态,
})//,state.js里面存放全局变量,并且暴露出去
const state =, {
,令牌:& # 39;12345678 & # 39;
,语言:& # 39;en # 39;
}
export default 国家 使用的时候,在需要引用全局变量的模块处直接使用。美元商店调用
export default {
方法:才能,{
,,getInternation (), {
,,,if (。store.state.language 美元;===,& # 39;en # 39;), {
,,,,this.internation =2
,,,},else if (。store.state.language 美元;===,& # 39;zh_cn # 39;), {
,,,,this.internation =1
,,,}
,,}
,,},
} 因为Vuex有点繁琐,有点杀鸡用牛刀的感觉。因此认为并没有必要使用它。上面只是简单的使用,如果想要具体了解使用方式,可以去查阅资料具体掌握。
<强>定义全局函数
原理:在main.js里面通过Vue.prototype将函数挂载到Vue实例上面,通过。函数名,来运行函数。
<强> 1,在main.js文件直接定义方法
简单的函数可以直接写在主。js文件里定义。
//,将方法挂载到vue原型上
时间=Vue.prototype.changeData function () {
,警报(& # 39;执行成功& # 39;);
} 使用的时候组件里直接调用。
//直接通过这个运行函数,这里这是vue实例对象
this.changeData (); 2,使用全局函数专用模块,挂载到main.js上面
base.js文件,文件位置可以放在跟主要。js同一级,方便引用(这点可以依据个人习惯决定)。
exports.install =, function (Vue,选项),{
时间=Vue.prototype.changeData 才能;function () {
,,,警报(& # 39;执行成功& # 39;);
,,};
}; 主要。js引入并使用。
import base 得到& # 39;。/基地# 39;
Vue.use(基地); 所有的组件里就可以调用该函数。
this.changeData (); 关于怎么在vue项目中定义全局变量就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
