零侵入式实现小程序的全局状态管理，让数据自动更新！

2023-09-29 10:52:36

对于小程序开发者来说，状态管理一直是一个令人头疼的问题。由于小程序官方没有提供全局状态管理机制，想要使用全局变量只能在app.js中声明，这无疑会增加代码的复杂度和维护难度。

本文将介绍一种零侵入式实现小程序全局状态管理的方法，使任何地方对数据的修改都能自动更新相应的视图数据。这种方法不仅简单易用，而且不会对原有代码逻辑造成任何影响。

全局响应式globalData

首先，我们需要定义一个全局响应式对象globalData。这个对象可以存储任何我们需要在小程序中共享的数据，例如用户信息、当前页面信息等。

// app.js
App({
  globalData: {}
})

然后，我们在需要使用globalData的地方，可以通过getApp().globalData来访问它。例如，在页面中我们可以这样使用：

// pages/index/index.js
const app = getApp()

Page({
  data: {
    userInfo: app.globalData.userInfo
  }
})

当globalData.userInfo发生变化时，页面中的userInfo数据也会自动更新。

Observer

为了实现globalData的响应式，我们需要借助Observer。Observer是一个小程序内置的类，它可以监听对象的属性变化，并自动更新视图。

使用Observer监听globalData的变化非常简单，只需要在需要使用globalData的地方调用Observer的observe方法即可。例如：

// pages/index/index.js
const app = getApp()
const observer = new Observer(app, {
  props: ['globalData.userInfo']
})

Page({
  data: {
    userInfo: app.globalData.userInfo
  },

  onLoad() {
    observer.observe(() => {
      this.setData({
        userInfo: app.globalData.userInfo
      })
    })
  },

  onUnload() {
    observer.disconnect()
  }
})

在上面的代码中，我们首先创建了一个Observer对象，并指定要监听globalData.userInfo的变化。然后，我们在onLoad方法中调用observer.observe方法，并将观察者添加到页面实例中。这样，当globalData.userInfo发生变化时，观察者就会自动调用回调函数，并更新视图中的userInfo数据。