微信小程序监听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)

相关推荐

  1. 程序监听AppglobalData——全局数据监听

    2024-04-26 15:20:03       15 阅读
  2. 程序实现watch监听数值改变效果

    2024-04-26 15:20:03       40 阅读
  3. 程序全局变量应用

    2024-04-26 15:20:03       39 阅读
  4. 程序全局数据共享

    2024-04-26 15:20:03       17 阅读
  5. 程序 分享按钮 监听用户分享成功

    2024-04-26 15:20:03       37 阅读
  6. 程序监听用户经纬度变化

    2024-04-26 15:20:03       20 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-26 15:20:03       19 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-26 15:20:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-26 15:20:03       20 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-26 15:20:03       20 阅读

热门阅读

  1. js中onchange的使用场景及如何使用

    2024-04-26 15:20:03       27 阅读
  2. 子组件使用this.$emit向父组件传递信息

    2024-04-26 15:20:03       18 阅读
  3. Gradle的安装配置及使用

    2024-04-26 15:20:03       13 阅读
  4. 安装OceanBase的机器如果出现故障,应该如何处理

    2024-04-26 15:20:03       15 阅读
  5. kotlin根据文件的filePath转化为uri

    2024-04-26 15:20:03       37 阅读
  6. WordPress外贸独立站如何提高询盘转化率

    2024-04-26 15:20:03       18 阅读
  7. Reactjs数据篇

    2024-04-26 15:20:03       12 阅读