如何使用小程序实现类似Vux的功能

背景

微信小程序原生没有提供全局的状态管理相关的api，但往往在开发小程序功能的时候又需要使用全局的状态管理，那下面我们就来实现一个类似 vuex 的状态管理功能。

实现思路

其实我们只需要实现在全局存储数据，然后让小程序所有页面都能访问到，然后封装一个方法能够更新这个存储在全局的数据，并且更新到所有页面，这样就能实现类似 vuex 的功能了。

示例代码

export const store = {

  // 刷新全局数据到当前页面
  syncPage(page) {
    const keys = page.onGlobalKeys || []
    const globalData = getApp().data
    const temp = {}
    for (const key of keys) {
      const data = globalData[key]
      if (data != null) temp[key] = data
    }
    page.setData(temp)
  },

  // 刷新全局数据到所有页面
  syncPages() {
    const pages = getCurrentPages()
    for (const page of pages) {
      store.syncPage(page)
    }
  },

  // 提交数据到全局数据,并更新到所有页面
  commit(data, sync = true) {
    Object.assign(getApp().data, data)
    if (sync) store.syncPages()
  },

  // 同步全局数据到当前页
  syncGlobalData(page) {
    if (!page) return console.error('Sync Global Data Page is null => store.syncGlobalData(this)')
    store.syncPage(page)
  }

}

封装一个类，提供一个 syncPage 方法,每个页面需要用到全局什么数据，在 onGlobalKeys 定义所要用到的全局数据，syncPage 通过更新 onGlobalKeys 所对应的 key 值来更新所有页面的全局状态值。