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

最新推荐文章于 2025-09-01 22:00:54 发布

原创最新推荐文章于 2025-09-01 22:00:54 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

本文详细介绍了如何在微信小程序中使用Mobx进行全局状态管理，包括安装、配置store、在页面和组件中应用store的observable、action和bindings。

简要

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

安装

pnpm i mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
或
npm i mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
或
yarn add mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

配置

根目录下新建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'
    }
  }
})