uniapp全局变量四种实现方式,uni-app全局变量
Uni通过以下方式定义全局变量：1 .使用代码为[return obj instance of array]的通用模块；2.将一些常用的常量或方法直接扩展到【Vue.prototype】。
UNI-APP开发(仿饿)开发课程：进入学习
本教程运行环境：windows7系统，Uni-App版本2.5.1，Dell G3电脑。这个方法适用于所有品牌的电脑。
推荐(免费):uni-app开发教程
uniapp定义全局变量的方法：
1、公用模块
定义一个专门的模块来组织和管理这些全局变量，并在所需的页面中介绍它们。
注意，这种方法只支持多个vue页面或多个n vue页面之间的共享，不支持vue和nvue之间的共享。
例子如下：
在uni-app项目的根目录下创建一个公共目录，然后在公共目录下新建一个helper.js来定义公共方法。
const websiteUrl= http://uni app . d cloud . io ；
const now=Date.now function () {
返回新日期()。getTime()；
};
const is array=array . is array function(obj){
返回数组的对象实例；
};
导出默认值{
网站Url，
现在，
伊萨雷
}接下来，引用pages/index/index.vue中的模块。
脚本
从导入助手././common/helper . js ；
导出默认值{
data() {
return { }；
},
onLoad(){
console . log( now: helper . now())；
},
方法：{
}
}
/script维护方便，缺点是每次都需要引入。
2、挂载 Vue.prototype
一些常用的常量或方法直接扩展到Vue.prototype，每个Vue对象都会被“继承”。
注意这个方法只支持vue页面。
例子如下：
在main.js中挂载属性/方法
vue . prototype . website URL= http://uni app . d cloud . io ；
vue . prototype . now=date . now function(){
返回新日期()。getTime()；
};
vue . prototype . is array=array . is array function(obj){
返回数组的对象实例；
};然后调入pages/index/index.vue。
脚本
导出默认值{
data() {
return { }；
},
onLoad(){
console . log( now: this . now())；
},
方法：{
}
}
/script这样，只需要在main.js中定义就可以在每个页面中直接调用。
技巧
每页中不要有重复的属性或方法名称。
建议装载在Vue.prototype上的属性或方法可以加上统一的前缀。比如$url和global_url，在阅读代码时很容易与当前页面的内容区分开来。
3、globalData
小程序里有一个globalData的概念，可以在app上声明全局变量。Vue之前没有这个概念，但是uni-app引入了globalData的概念，并且在包括H5和app在内的平台上实现。
可以在App.vue中定义globalData，也可以使用API来读写这个值。
GlobalData支持vue和n vue之间的数据共享。
Global是使用全局变量的一种相对简单的方法。
定义：App.vue
脚本
导出默认值{
全局数据：{
文本：“文本”
},
onLaunch: function() {
console.log(“应用程序启动”)
},
onShow: function() {
console.log(“应用程序显示”)
},
onHide: function() {
console.log(“应用程序隐藏”)
}
}
/脚本
风格
/*每个页面的通用CSS */
/风格
在js中操作globalData的方法如下：
赋值：getApp().globalData.text=test 。
值：console.log (getapp()。globaldata.text)//测试
如果需要将globalData的数据绑定到页面，可以在页面的onshow声明循环中重新分配变量。从HBuilderX 2.0.3开始，nvue页面处于uni-app编译模式，也支持onshow。
4、Vuex
Vuex是专门为Vue.js应用开发的状态管理模式。它采用集中存储来管理应用程序所有组件的状态，并确保状态以可预测的方式随相应的规则变化。
这里以登录后同步更新用户信息为例，简单说明一下Vuex的用法。关于Vuex更详细的内容，建议去其官网Vuex了解。
示例：
在uni-app项目的根目录下新建一个store目录，并创建index.js来定义store目录中的状态值。
const store=new Vuex。商店({
状态：{
登录：假，
令牌： ，
avatarUrl: ，
用户名：“”
},
突变：{
登录(州、提供商){
console.log(状态)
console.log(提供者)
state.login=true
state . token=provider . token；
state .用户名=provider.userName
state . avatar URL=provider . avatar URL；
},
注销(状态){
state.login=false
state . token=“”；
state . username=“”；
state . avatar URL=“”；
}
}
})然后，需要在main.js中挂载Vuex
从导入存储。/商店
Vue.prototype.$store=store最后在Pages/Index/Index.vue中使用。
脚本
导入{
地图状态，
地图突变
}来自‘vuex’；
导出默认值{
计算值：{
.mapState([avatarUrl ， login ， userName])
},
方法：{
.地图突变([logout])
}
}
/脚本相关免费学习推荐：编程视频
以上是uniapp如何全局定义变量的细节。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。