评论

使用 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 在实际使用时还有很多好的实践经验,感兴趣的话,可以阅读一些其他相关的文章。

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

7 个评论

  • 天心
    天心
    04-29

    请问如何在单独的js中更改store中的值(不在Componet或者Page实例中,而是其引用的js中直接更改,因为一些公共的方法中需要更改state)?

    04-29
    赞同
    回复 2
  • 百熟优质果~运营合作
    百熟优质果~运营合作
    03-12

    打包成json 页面传值不是也很香吗?跨的页面比较多使用全局变量应该也可以吧?有没有性能优势对比的文章,好让我们择优使用

    03-12
    赞同
    回复 2
    • 小程序技术专员-LastLeaf
      小程序技术专员-LastLeaf
      03-12
      那样的话每次数据变动都得传,是“过程式”的方法。状态管理框架在处理数据项需要在多个页面间同步的情况中会更加方便。
      03-12
      1
      回复
    • 百熟优质果~运营合作
      百熟优质果~运营合作
      03-12回复小程序技术专员-LastLeaf
      似有所获,一次获取多次使用。另外,我觉得在使用状态框架的时候,也要注意利用时间差定时更新数据。不然展示的数据一直就是旧的,造成客户不必要的误会。哈哈哈哈
      03-12
      回复
  • 同步
    同步
    03-11

    为什么在作者的基础上更新store ,没能达到同步更新效果,是bug 还是我书写用法错误,请教

    https://developers.weixin.qq.com/s/2mHJdLmz74fX


    03-11
    赞同
    回复 7
    • 小程序技术专员-LastLeaf
      小程序技术专员-LastLeaf
      03-11
      依目前的实现,如果你只是改变其中的 checkAttendance 这个子字段,则不会触发界面更新。你需要重新生成一个新的 queryItems 对象。
      03-11
      回复
    • 同步
      同步
      03-13回复小程序技术专员-LastLeaf
      怎么重新生成一个新对象?是在store.js 里面吗?


      目前想到的方法是:
      1、store/index.js 中的 setQuery 函数 ,外部传参,queryItems为字符串类型,然后再如图代码重新 JSON.parse ,解决wxml 未及时更新的问题。。。


      但是楼主DEMO也没有更新数据同步更新视图这一项呀?楼主讲的具体实战中,重新生成一个新对象是怎么操作???
      03-13
      回复
    • 小程序技术专员-LastLeaf
      小程序技术专员-LastLeaf
      03-16
      最简单的办法是用 Object.assign({}, OTHER_OBJECTS)
      03-16
      回复
    • 同步
      同步
      03-17回复小程序技术专员-LastLeaf
      Object.assign({}, OTHER_OBJECTS) 的方法测试发现不通过呀
      03-17
      回复
    • 同步
      同步
      03-17回复小程序技术专员-LastLeaf
      如果创建对象, Object.assign 不能及时将数据更新到wxml,我重新做了个代码示例,发现数字是直接行得通的,但是JS其他变量还未逐一测试,不知道是否每个变量都要用不同的转换方式,例如 数组和对象可以通过 JSON.stringify ,JSON.parse 更换。
      数字是直接行得通的,其他的不知道怎么样?
      https://developers.weixin.qq.com/s/IQpuRUm57ufZ
      03-17
      回复
    查看更多(2)
  • 至简
    至简
    03-03

    你的list初始值打印出来是什么样的?为什么我的是这样?,一直到999,值都是undefined

    03-03
    赞同
    回复 3
  • 99
    99
    02-20

    如果直接定义这样的action:

    testAction: action(async function(){ ... })
    


    在Component中绑定到this.testAsync。

    这时候直接调用await this.testAsync则不起作用(),因为绑定到this的过程套了一层同步函数apply调用。。

    如果直接调用await store.testAsync()则正常。

    想问问是有意这样设计还是有别的原因。如果直接使用await store.xxx()会引发问题吗。

    02-20
    赞同
    回复 5
  • 99
    99
    02-20

    请问可以使用异步action吗?

    02-20
    赞同
    回复
  • 少年啦
    少年啦
    2019-11-01

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

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