Miniprogram-composition NPM

miniprogram-composition

小程序 mobx composition api

Usage

TODO

Options

TODO

Development

<!--index.wxml-->
<view style="padding: 60px;">
  <viw bintap="increment">{{count}}</viw>
  <viw>{{countPlus}}</viw>
</view>

//使用包装过的函数 支持ts类型提示
import { ComponentWithComposition, onDetached } from 'miniprogram-composition';
import { computed, observable } from 'mobx-miniprogram';

ComponentWithComposition({
  properties: {},
  setup() {
    onDetached(() => {
      //组件卸载了
    });
    const count = observable.box(0);
    const countPlus = computed(() => {
      return count.get() + 1;
    });
    const increment = () => {
      count.set(count.get() + 1);
    };
    count.observe(({ oldValue, newValue }) => {
      console.log('count变化了新值是', newValue, '之前的值是', oldValue);
    });
    const decrement = () => {
      count.set(count.get() - 1);
    };

    //方法添加到this 状态添加到this.data
    return {
      countPlus,
      count,
      increment,
    };
  },
  methods: {
    click() {
      this.increment();
      console.log(this.data.count);
    },
  },
});