微信小程序：Mobx的使用指南

简要

微信小程序中有时需要进行全局状态管理，这个时候就需要用到Mobx.下面我们来看一下在小程序中是如何使用Mobx的

安装

pnpm i [email protected] [email protected]
或
npm i [email protected] [email protected]
或
yarn add [email protected] [email protected]

配置

根目录下新建store文件夹，新建store.js文件

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

export const store = observable({
  //数据字段
  numA: 1,
  numB: 2,
  //计算属性
  get sum() {
    return this.numA + this.numB
  },
  //actions方法
  updateNumA: action(function (step) {
    this.numA += step
  }),
  updateNumB: action(function (step) {
    this.numB += step;
  })
})

页面中如何使用

// pages/notice/notice.js
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

Page({
  //点击页面按钮触发的函数
  handler() {
  	//获取numA的值
    console.log(this.data.numA);
    //修改numA的值
    this.updateNumA(this.data.numA + 1)
  },

  onLoad(options) {
    this.storeBindings = createStoreBindings(this, {
      store,//指定使用的仓库（此处使用es6语法）
      fields: ['numA', 'numB', 'sum'],//指定字段
      actions: ['updateNumA', 'updateNumB']//指定方法
    })
  },
  onUnload() {
	 //页面卸载时需要卸载仓库
    this.storeBindings.destroyStoreBindings()
  }
})

组件中如何使用

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: {
      numA: () => store.numA,//绑定字段的第一种方式
      numB: (store) => store.numB,//绑定字段的第二种方式
      sum: 'sum'//绑定字段的第三种方式
    },
    actions: {//指定要绑定的方法
      updateNumA: 'updateNumA'
    }
  }
})