使用 MobX 来管理小程序的跨页面数据

文件来源：https://developers.weixin.qq.com/community/develop/article/doc/0004686e3c8980b53469f176e51413

在小程序中引入 MobX

在小程序项目中，可以通过 npm 的方式引入 MobX 。

npm init -y

引入 MobX ：

npm install --save mobx-miniprogram mobx-miniprogram-bindings

（这里用到了 mobx-miniprogram-bindings 模块，模块说明在这里： https://developers.weixin.qq.com/miniprogram/dev/extended/functional/mobx.html 。）

npm 命令执行完后，记得在开发者工具的项目中点一下菜单栏中的 工具 - 构建 npm 。

建立数据仓库

数据仓库通常专门写在store的 js 文件中。

import { observable, action } from 'mobx-miniprogram'

// 数据仓库
export const store = observable({

  list: [], // 天气数据（包含列表和详情）

  // 设置天气列表，从网络上获取到数据之后调用
  setList: action(function (list) {
    this.list = list
  }),

})

在首页中使用数据仓库

如果需要在页面中使用数据仓库里的数据，需要调用 createStoreBindings 来将仓库中的数据绑定到页面数据中，然后就可以在页面中直接使用仓库数据了。

import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from './store'

Page({
  onLoad() {
    // 绑定 MobX store
    this.storeBindings = createStoreBindings(this, {
      store, // 需要绑定的数据仓库
      fields: ['list'], // 将 this.data.list 绑定为仓库中的 list ，即天气数据
      actions: ['setList'], // 将 this.setList 绑定为仓库中的 setList action
    })
    // 从服务器端读取数据
    wx.showLoading()
    wx.request({ // 请求网络数据
      // ...
      success: (data) => {
        wx.hideLoading()
        // 调用 setList action ，将数据写入 store
        this.setList(data)
      }
    })
  },
  onUnload() {
    // 解绑
    this.storeBindings.destroyStoreBindings()
  },
})

这样，可以在 wxml 中直接使用 list ：

<view class="item" wx:for="{{list}}" wx:key="date" data-index="{{index}}">
  <!-- 这里可以使用 list 中的数据了！ -->
  <view class="title">{{item.date}} {{item.summary}}</view>
  <view class="abstract">{{item.temperature}}</view>
</view>

在详情页中使用数据仓库

在详情页中，同样可以使用 createStoreBindings 来将仓库中的数据绑定到页面数据中：

import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from './store'

Page({
  onLoad(args) {
    // 绑定 MobX store
    this.storeBindings = createStoreBindings(this, {
      store, // 需要绑定的数据仓库
      fields: ['list'], // 将 this.data.list 绑定为仓库中的 list ，即天气数据
    })
    // 页面参数 `index` 表示要展示哪一条天气详情数据，将它用 setData 设置到界面上
    this.setData({
      index: args.index
    })
  },
  onUnload() {
    // 解绑
    this.storeBindings.destroyStoreBindings()
  },
})

<view class="title">{{list[index].date}}</view>
<view class="content">温度 {{list[index].temperature}}</view>
<view class="content">天气 {{list[index].weather}}</view>
<view class="content">空气质量 {{list[index].airQuality}}</view>
<view class="content">{{list[index].details}}</view>

完整示例

完整例子可以在这个代码片段中体验： https://developers.weixin.qq.com/s/YhfvpxmN7HcV