微信小程序监听App中的globalData——全局数据监听

小程序 0

微信小程序监听App中的globalData——全局数据监听

  • 定义数据
  • 定义监听方法
  • 注册监听方法
  • 修改监听的数据
  • 扩展

需求:微信小程序项目需要全局监听某个数据。
方法:在 app.ts/app.js 中定义 globalData 公共数据,然后定义一个监听方法 watch,在其他页面或组件中通过使用 【发布订阅 】 模式,进行数据的监听操作。

定义数据

// app.tsApp<IAppOption>({    globalData: {        count:0    },})

定义监听方法

使用 Object.defineProperty 方法进行数据监听

// app.tsApp<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.tsComponent({	data: {        count: 0    },	lifetimes:{		attached(){			getApp().watch('count', () => {                this.setData({                    count: getApp().globalData.count                })            });		}	}})

修改监听的数据

在项目中任何页面或组件中,修改count都能被监听到

// xxPage.tsPage({	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)

也许您对下面的内容还感兴趣: