mox与Computed有两种写法

1.使用Componentwithstore 方法构建组件

2.要么使用 ComponentwithComputed 方法构建组。

page

<custom/>
<view class="line"></view>
<custom01/>

以下为自定义组件,位于components下 注意要在app.json引入

第一种

使用了Componentwithstore 方法构建组件，计算属性写法使用旧日版API

<view>{{ a }} + {{ b }} = {{ total }}</view>
<button type="warn" plain bind:tap="updateData">更新数据</button>

import { ComponentWithStore } from 'mobx-miniprogram-bindings'
//导入计算属性 behavior
const computedBehavior = require('miniprogram-computed').behavior
//用ComponentWithStore替换原来的Component
ComponentWithStore({
    behaviors:[computedBehavior],
    computed:{
        total(data){
            return data.a + data.b
        }
    },
    watch:{
        'a,b':function(a,b){
            console.log(a,b);
        }
    },
    data:{
        a:1,
        b:2
    },
    methods:{
        updateData(){
            this.setData({a:this.data.a+1,b:this.data.b + 1})
        }
    }
    }
})

第二种

使用了ComponentwithComputed 方法构建组件，Mobx写法使用旧版API

<view>{{ a }} + {{ b }} = {{ total }}</view>
<button type="warn" plain bind:tap="updateData">更新数据</button>

import { ComponentWithComputed } from 'miniprogram-computed'
import { storeBindingsBehavior } from'mobx-miniprogram-bindings'
// 需要使用导入的 Componentwithcomputed 替换Component 方法
ComponentWithComputed({
    behaviors:[storeBindingsBehavior],
    computed:{
        total(data){
            return data.a + data.b
        }
    },
    watch:{
        'a,b':function(a,b){
            console.log(a,b);
        }
    },
    data:{
        a:1,
        b:2
    },
    methods:{
        updateData(){
            this.setData({a:this.data.a+1,b:this.data.b + 1})
        }
    }
    }
})