8.微信小程序-Mobx数据共享（类似vuex)_微信小程序有没有类似vuex-优快云博客

本文链接：https://blog.youkuaiyun.com/zxc472504515/article/details/123401596

本文详细介绍了如何在微信小程序中集成并使用MobX进行状态管理，包括安装MobX库，创建MobX Store，以及在页面和自定义组件中如何使用Store的数据和方法。通过示例代码展示了数据绑定和事件处理，帮助开发者理解如何提升小程序的状态管理效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//1.安装 mobx-miniprogram 和 mobx-miniprogram-bindings
npm install --save mobx-miniprogram mobx-miniprogram-bindings

//2.创建Mobx Store
根目中创建store文件夹->创建store.js
//在这个JS文件中，专门用来创建Store的实例对象
import {observable,action} from 'mobx-miniprogram'
export const store = observable({
  //数据字段
  numA: 1,
  numB: 2,
  //计算属性(需要加get)
  get sum() {
    return this.numA + this.numB
  },
  //actions 方法，用来修改store中的数据
  updateNum1: action(function (step) {
    this.numA += step
  }),
})

  //3.1页面使用
 //页面的.wxml结构
    <view>{{numA}}+{{numB}}={{sum}}</view>
                                   //data-参数="{{值}}"   传参
    <button bindtap="bindHandler" data-step="{{1}}">numA +1</button>
    <button bindtap="bindHandler" data-step="-{{1}}">numA -1</button>
        
  //页面的.js中
   import {createStoreBindings} from 'mobx-miniprogram-bindings'
   import {store} from '../../store/store'
   Page({
       //页面
       bindHandler(e){
          this.updateNum1(Number(e.target.step))//调用actions方法  
       },
       onLoad:function(){ //生命周期-监听页面加载
           this.storeBindings=createStoreBindings(this,{
               store,
               fields:['numA','numB','sum'],//按需取需要的字段
               actions:['updateNum1']//按需取actions方法
           }) 
       }，
        onUnload: function () {//生命周期-监听页面写在
           this.storeBindings.destroyStoreBindings() //调用方法卸载
      },

   })

//3.2自定义组件调用

//组件的.wxml中
<view>{{numA}}+{{numB}}={{sum}}</view>
//data-参数="{{值}}"  传参
<button bindtap="bindHandler" data-step="{{1}}">numB +1</button>
<button bindtap="bindHandler" data-step="-{{1}}">numB -1</button>




//组件的.js中
import {storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import{store} from '../../store/store'
Component({
  behaviors:[storeBindingsBehavior],//通过storeBindingsBehavior实现自动绑定
  storeBindings:{
      store,  //指定要绑定的store
      fileds:{//指定要绑定的字段数据
          numA:()=>store.numA, //绑定字段的第1种方式
          numB:(store)=>store.numB, //绑定字段的第2种方式
          sum:'sum', //绑定字段的第3种方式
      },
      actions:{//指定要绑定的方法
          updateNum2:'updateNum2'
      }
  },
  methods: {
      //调用方法
    bindHandler(e){
      this.updateNum2(Number(e.target.dataset.step))
     }
  }
})