In small programs, there is often some data that needs to be shared among several pages or components. For this kind of data, some of you in Web development have used state management frameworks like Redux and VUex. In the small program development, there are also many friends like to use MobX, indicating that this kind of framework is very practical in the actual development.

The miniprogram team has also recently opened source MobX helper modules, making MobX easier to use. So, in this article, I’ll take a look at a simple use case for MobX in applets!

Introducing MobX in applets In applets projects, MobX can be introduced by NPM. If you haven’t already used NPM in applets, run the following command in the applets directory:

npm init -y
Copy the code

The introduction of MobX:

npm install --save mobx-miniprogram mobx-miniprogram-bindings
Copy the code

(here with the help of mobx miniprogram – bindings module, the module description here: developers.weixin.qq.com/miniprogram… ).

After the NPM command is executed, remember to click tools – Build NPM on the menu bar in the Developer Tools project.

What does MobX do? Imagine this scenario: make a small program for weather forecast information. The front page is a list. Click on the items in the list to go to the details page.

The home page is as follows:

Details page below:

Each time you enter the home page, you need to use wx.request to obtain the weather list data, and then use setData to apply the data to the interface. After entering the details page, obtain the detailed weather data of the specified date again and display it in the details page.

The downside of this is that after entering the detail page, you need to fetch the data again through the network and wait for the network to return before presenting the data.

In fact, when you get the weather list data on the home page, you get all the weather details back together and store them in a data warehouse that you can pull out of when you need them. In this way, it is ok to acquire network data only when entering the home page.

MobX makes it easy to build a data warehouse. Here’s how to set up and use a MobX data warehouse.

Creating a data warehouse A data warehouse is usually written exclusively in a separate JS file.

import { observable, action } from 'mobx-miniprogram'// Data warehouseexportObservable ({list: [], const store = Observable ({list: [], // Weather data (lists and details) // Weather list, called when data is retrieved from the networksetList: action(function (list) {
    this.list = list
  }),

})
Copy the code

In the data warehouse above, there is a data list (that is, weather data) and an action called setList that changes the data in the data warehouse.

If you want to use data from a data warehouse in a page, you need to call createStoreBindings to bind data from the warehouse to the page data, and then you can use the warehouse data directly in the page.

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

Page({
  onLoad() {// Bindings MobX store this.storeBindings = createStoreBindings(this, {store, // Data warehouse bindings: ['list'], // bind this.data.list to the list in the warehouse, i.e. the weather data actions: ['setList'], // bind this.setList to the repositorysetWx.showloading () wx.request({// request network data //... Success: (data) => {wx.hideloading () // callsetList action, store this.setList(data)}})},onUnload() {/ / solution to this. StoreBindings. DestroyStoreBindings ()},})Copy the code

Thus, you can use list directly in WXML:

<view class="item" wx:for="{{list}}" wx:key="date" data-index="{{index}}"> <! Now you can use the data in the list! --> <view class="title">{{item.date}} {{item.summary}}</view>
  <view class="abstract">{{item.temperature}}</view>
</view>

Copy the code

In a detail page, you can also use createStoreBindings to bind data from a warehouse to page data:

import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from './store'Page({onLoad(args) {// Bindings MobX store this.storeBindings = createStoreBindings(this, {store, // Data warehouse bindings: ['list'}) // The page parameter 'index' indicates which weather data is to be displayedsetThis.setdata ({index: args.index})},onUnload() {/ / solution to this. StoreBindings. DestroyStoreBindings ()},})Copy the code

Thus, the page can also use the list directly in WXML:

<view class="title">{{list[index].date}}</view>
<view class="content"> Temperature {{list[index]. Temperature}}</view> <view class="content"> Weather {{list[index]. Weather}}</view> <view class="content"> airQuality {{list[index]. AirQuality}}</view> <view class="content">{{list[index].details}}</view>
Copy the code

Complete sample complete examples in this code fragment experience: developers.weixin.qq.com/s/YhfvpxmN7…

This is MobX in the applets in the most basic play. Relevant NPM module documentation can refer to Mobx-miniprogram-Bindings and MOBx-miniprogram.

There is a lot of good practice in using MobX in practice, but if you are interested, read some other articles on it.