小程序监听globalData,类似vue中的watch

1.app.js文件中添加如下代码

    watchCallBack: {},
    watchingKeys: [],
    setGlobalData(data) {
        // 为了便于管理,应通过此方法修改全局变量
        Object.keys(data).map(key => {
            this.globalData[key] = data[key]
        })
        console.log('mutation', data);
        wx.setStorageSync('store', this.globalData)// 加入缓存
    },

    $watch(key, cb) {
        this.watchCallBack = Object.assign({}, this.watchCallBack, {
            [key]: this.watchCallBack[key] || []
        });
        this.watchCallBack[key].push(cb);
        if (!this.watchingKeys.find(x => x === key)) {
            const that = this;
            this.watchingKeys.push(key);
            let val = this.globalData[key];
            Object.defineProperty(this.globalData, key, {
                configurable: true,
                enumerable: true,
                set(value) {
                    const old = that.globalData[key];
                    val = value;
                    that.watchCallBack[key].map(func => func(value, old));
                },
                get() {
                    return val
                }
            })
        }
    }

在需要监听全局变量的文件中(如index.js)使用如下代码

show() {
    app.$watch('要监听的变量名', (val, old) => {
        // 处理全局变量
    })
}

 

你可能感兴趣的:(小程序监听globalData,类似vue中的watch)