创意网站建设公司,建设网站的需求分析,网站注册登录页面设计,建筑网站叫什么盘简要 微信小程序中有时需要进行全局状态管理#xff0c;这个时候就需要用到Mobx.下面我们来看一下在小程序中是如何使用Mobx的 安装
pnpm i mobx-miniprogram4.13.2 mobx-miniprogram-bindings1.2.1
或
npm i mobx-miniprogram4.13.2 mobx-miniprogram-bindings1.2.1
或
yarn…简要 微信小程序中有时需要进行全局状态管理这个时候就需要用到Mobx.下面我们来看一下在小程序中是如何使用Mobx的 安装
pnpm i mobx-miniprogram4.13.2 mobx-miniprogram-bindings1.2.1
或
npm i mobx-miniprogram4.13.2 mobx-miniprogram-bindings1.2.1
或
yarn add mobx-miniprogram4.13.2 mobx-miniprogram-bindings1.2.1配置
根目录下新建store文件夹新建store.js文件
import { observable, action } from mobx-miniprogramexport 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/storePage({//点击页面按钮触发的函数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}}
})
