评论

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

MobX 可以帮助小程序管理跨页面的数据。小程序团队近期开源了 MobX 的小程序辅助模块,使用 MobX 也更加方便。在这篇文章中就来介绍一下 MobX 在小程序中的一个简单用例。

在小程序中,常常有些数据需要在几个页面或组件中共享。对于这样的数据,在 web 开发中,有些朋友使用过 redux 、 vuex 之类的 状态管理 框架。在小程序开发中,也有不少朋友喜欢用 MobX ,说明这类框架在实际开发中非常实用。

小程序团队近期也开源了 MobX 的辅助模块,使用 MobX 也更加方便。那么,在这篇文章中就来介绍一下 MobX 在小程序中的一个简单用例!

在小程序中引入 MobX

在小程序项目中,可以通过 npm 的方式引入 MobX 。如果你还没有在小程序中使用过 npm ,那先在小程序目录中执行命令:

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

MobX 有什么用呢?

试想这样一个场景:制作一个天气预报资讯小程序,首页是列表,点击列表中的项目可以进入到详情页。

首页如下:

详情页如下:

每次进入首页时,需要使用 wx.request 获取天气列表数据,之后将数据使用 setData 应用到界面上。进入详情页之后,再次获取指定日期的天气详情数据,展示在详情页中。

这样做的坏处是,进入了详情页之后需要再次通过网络获取一次数据,等待网络返回后才能将数据展示出来。

事实上,可以在首页获取天气列表数据时,就一并将所有的天气详情数据一同获取回来,存放在一个 数据仓库 中,需要的时候从仓库中取出来就可以了。这样,只需要进入首页时获取一次网络数据就可以了。

MobX 可以帮助我们很方便地建立数据仓库。接下来就讲解一下具体怎么建立和使用 MobX 数据仓库。

建立数据仓库

数据仓库通常专门写在一个独立的 js 文件中。

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

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

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

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

})

在上面数据仓库中,包含有数据 list (即天气数据),还包括了一个名为 setList 的 action ,用于更改数据仓库中的数据。

在首页中使用数据仓库

如果需要在页面中使用数据仓库里的数据,需要调用 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()
  },
})

这样,这个页面 wxml 中也可以直接使用 list :

<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

这个就是 MobX 在小程序中最基础的玩法了。相关的 npm 模块文档可参考 mobx-miniprogram-bindingsmobx-miniprogram

MobX 在实际使用时还有很多好的实践经验,感兴趣的话,可以阅读一些其他相关的文章。

最后一次编辑于  11-01  
点赞 4
收藏
评论

1 个评论

  • 少年啦
    少年啦
    11-01

    有个学习成本更低 体积更小的 onfire.js

    11-01
    赞同
    回复 1
    • 小程序技术专员-LastLeaf
      小程序技术专员-LastLeaf
      11-07
      嗯嗯,我们选择了 mobx 来作为实例。这类模块还是有很多选择的,大同小异,可以按自己的喜好和需求来。
      11-07
      回复