globalData
小程序有globalData,这是一种简单的全局变量机制。这套机制在uni-app里也可以使用,并且全端通用。
以下是 App.vue 中定义globalData的相关配置:
<script>
export default {
globalData: {
text: 'text'
}
}
</script>
js中操作globalData的方式如下: getApp().globalData.text = 'test'
在应用onLaunch时,getApp对象还未获取,暂时可以使用this.$scope.globalData
获取globalData
。
如果需要把globalData
的数据绑定到页面上,可在页面的onShow
页面生命周期里进行变量重赋值。
nvue的weex编译模式中使用globalData的话,由于weex生命周期不支持onShow,但熟悉5+的话,可利用监听webview的addEventListener show事件实现onShow效果,或者直接使用weex生命周期中的beforeCreate。但建议开发者使用uni-app编译模式,而不是weex编译模式。
globalData是简单的全局变量,如果使用状态管理,请使用vuex(main.js中定义)
全局样式
getApp()
getApp() 函数用于获取当前应用实例,一般用于获取globalData 。
const app = getApp()
console.log(app.globalData)
注意:
-
不要在定义于 App() 内的函数中,或调用 App 前调用 getApp() ,可以通过 this.$scope 获取对应的app实例
-
通过 getApp() 获取实例之后,不要私自调用生命周期函数。
-
v3模式加速了首页nvue的启动速度,当在首页nvue中使用getApp()不一定可以获取真正的App对象。对此v3版本提供了const app = getApp({allowDefault: true})用来获取原始的App对象,可以用来在首页对globalData等初始化
在App.vue中的调用:
this.globalData.systemTitle
在App.vue中的修改:
this.globalData.systemTitle = res.title
在pages中调用:
let title = ""
title = getApp().globalData.systemTitle
<script>
export default {
globalData: {
systemTitle: "",//系统标题
},
onLaunch: function() {
this.getProjectTitle()
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
},
methods: {
// 获取系统标题,设置全局静态数据
async getProjectTitle() {
const res = await this.$http.get("api/gettitle")
if (res.success == 1) {
this.globalData.systemTitle = res.title
uni.setNavigationBarTitle({
title: this.globalData.systemTitle
});
}
}
}
}
</script>