来源：使用 MobX 来管理小程序的跨页面数据 | 微信开放社区 (qq.com)
```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’
}
}
})
```
评论