簡要

微信小程序中有時需要進行全局狀態管理，這個時候就需要用到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'}}
})