微信小程序原生开发使用ts+mobx-miniprogram实现状态管理

前文提要：我在网上搜了很多文章都没有ts+状态管理去写原生小程序的，所以这里分享一下我的实践

废话不多说先上代码：

目录：

import {observable,action} from 'mobx-miniprogram'
import {BehaviorWithStore} from 'mobx-miniprogram-bindings'

const store = observable({
  numA:1,
  numB:2,
  get sum(){
    return this.numA + this.numB
  },

  update:action( ()=> {
    const sum = store.sum
    store.numA = store.numB
    store.numB = sum
  })
})

export const testStore = BehaviorWithStore({
  storeBindings: {
    store,
    fields: ["numA", "numB", "sum"],
    actions: ["update"],
  },
  pageLifetimes:{
    show:function () {
      console.log('页面被展示')
      // 操作数据
      store.numA = 100
    }
  }
});

目录：

import { testStore } from '../../store/test'

Component({
  behaviors: [testStore],
  options: {
    styleIsolation: "shared"
  },
  data: {
    someData: '...'
  },
  methods: {
  }
})

<!--pages/test/test.wxml-->
<text>numA：{{numA}}</text>
<text>numB：{{numB}}</text>
<text>sum：{{sum}}</text>
<button bindtap="update">点击</button>

看懂掌声