微信小程序监听App中的globalData全局数据监听
目录
微信小程序监听App中的globalData——全局数据监听
微信小程序监听App中的globalData——全局数据监听
需求 :微信小程序项目需要全局监听某个数据。
方法 :在 app.ts/app.js 中定义 globalData 公共数据,然后定义一个监听方法 watch ,在其他页面或组件中通过使用 【发布订阅 】 模式,进行数据的监听操作。
定义数据
// app.ts
App<IAppOption>({
globalData: {
count:0
},
})
定义监听方法
使用 Object.defineProperty 方法进行数据监听
// app.ts
App<IAppOption>({
globalData: {
count:0
},
watch: function (variate: any, method: any) {
var obj = getApp().globalData;
let val = obj[variate];
Object.defineProperty(obj, variate, {
set: function (value) {
val = value;
method(variate, value);
},
get: function () {
return val;
}
})
}
})
注册监听方法
在需要监听的组件中注册app().watch 方法
// xxCompinents.ts
Component({
data: {
count: 0
},
lifetimes:{
attached(){
getApp().watch('count', () => {
this.setData({
count: getApp().globalData.count
})
});
}
}
})
修改监听的数据
在项目中任何页面或组件中,修改count都能被监听到
// xxPage.ts
Page({
handleSetCount(){
getApp().globalData.count = 1
},
handleSetCount(){
console.log(getApp().globalData.count)
}
})
调用 handleSetCount 方法,即可xxComponent 中的count。
扩展
可以结合之前的全局登录弹窗使用
(https://blog.csdn.net/qq_45142260/article/details/128844351#comments_32228729)