小程序 mobx

<p>来源：<a href="https://developers.weixin.qq.com/community/develop/article/doc/0004686e3c8980b53469f176e51413">使用 MobX 来管理小程序的跨页面数据 | 微信开放社区 (qq.com)</a></p>
```bash
npm install —save mobx-miniprogram mobx-miniprogram-bindings
```
project.config.json
```json
“packNpmManually”: true,
“packNpmRelationList”: [
    {
       “packageJsonPath”: “./package.json”,
       “miniprogramNpmDistDir”: “./“
    }
],
```
store.js
```javascript
import { observable , action } from ‘mobx-miniprogram’
export const store = observable({
  numA: 1,
  numB: 2,
   //定义计算属性
  get sum(){
    return this.numA+this.numB
  },
   //定义action方法，用来修改store中的数据
   updateNumA:action(function(step){
       this.numA+=step
    })
})
```
页面
```html
{{ numA }} + {{ numB }} = {{ sum }}
 numA + 1
 numA -1
goPa
```
页面js
```javascript
import { createStoreBindings } from “mobx-miniprogram-bindings”
import {store}from ‘../../store/store’
Page({
  onLoad(options) {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: [‘numA’, ‘numB’, ‘sum’],
      actions: [‘updateNumA’]
    })
  },
  btnHandler1 (e) {
    this.updateNumA(e.target.dataset.step)
  },
  goPa()
  {
    wx.navigateTo({
      url: ‘/pages/storey/storey’
    })
  },
  onUnload() {
    this.storeBindings.destroyStoreBingds()
  }
})
```
组件
```html
{{numA}}
```
组件js
```javascript
import { storeBindingsBehavior } from ‘mobx-miniprogram-bindings’
import { store } from ‘../../store/store’
Component({
    // 通过 storeBindingsBehavior 来实现自动绑定
    behaviors: [storeBindingsBehavior],
    storeBindings: {
      store, // 指定要绑定的 Store
      // 指定要绑定的字段数据
      fields: {
        numA:’numA’,
        //numA: () => store.numA, // 绑定字段的第 1 种方式
        numB: (store) => store.numB, // 绑定数据的第 2 个方式
        sum: ‘sum’ // 绑定数据的第 3 个方式
      },
      // 指定要绑定的方法
      actions: {
        updateNumA: ‘updateNumA’
      }
    }
})
```

添加新评论

关于博主

文章分类

最受欢迎的文章

最近回复

其它