微信小程序 框架扩展MobX绑定辅助库

2023-04-04 09:39:51 作者:admin

本文整理自网络,侵删。

小程序的 MobX 绑定辅助库

小程序的 MobX 绑定辅助库。

此 behavior 依赖开发者工具的 npm 构建。具体详情可查阅 官方 npm 文档 。可配合 MobX 的小程序构建版 npm 模块 mobx-miniprogram 使用。

使用方法

需要小程序基础库版本 >= 2.2.3 的环境。

也可以直接参考这个代码片段(在微信开发者工具中打开): https://developers.weixin.qq.com/s/36j8NZmC74ac 。

  1. 安装 mobx-miniprogram 和 mobx-miniprogram-bindings :
npm install --save mobx-miniprogram mobx-miniprogram-bindings
  1. 创建 MobX Store。
// store.jsimport { observable, action } from 'mobx-miniprogram'export const store = observable({  // 数据字段  numA: 1,  numB: 2,  // 计算属性  get sum() {    return this.numA + this.numB  },  // actions  update: action(function () {    const sum = this.sum    this.numA = this.numB    this.numB = sum  })})
  1. 在 Component 构造器中使用:
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'import { store } from './store'Component({  behaviors: [storeBindingsBehavior],  data: {    someData: '...'  },  storeBindings: {    store,    fields: {      numA: () => store.numA,      numB: (store) => store.numB,      sum: 'sum'    },    actions: {      buttonTap: 'update'    },  },  methods: {    myMethod() {      this.data.sum // 来自于 MobX store 的字段    }  }})
  1. 在 Page 构造器中使用:
import { createStoreBindings } from 'mobx-miniprogram-bindings'import { store } from './store'Page({  data: {    someData: '...'  },  onLoad() {    this.storeBindings = createStoreBindings(this, {      store,      fields: ['numA', 'numB', 'sum'],      actions: ['update'],    })  },  onUnload() {    this.storeBindings.destroyStoreBindings()  },  myMethod() {    this.data.sum // 来自于 MobX store 的字段  }})

接口

将页面、自定义组件和 store 绑定有两种方式: behavior 绑定 和 手工绑定 。

behavior 绑定

behavior 绑定 适用于 Component 构造器。做法:使用 storeBindingsBehavior 这个 behavior 和 storeBindings 定义段。

阅读剩余部分

相关阅读 >>

微信小程序云开发api 更新多条记录

微信小程序 applyplugin

微信小程序 ocrprintedtext

微信小程序 开始

微信小程序api 转发消息

微信小程序云开发api 获取集合数据

微信小程序云开发 api数据库删除集合

微信小程序api 视频-压缩接口

兼容

微信小程序api 收货地址

更多相关阅读请进入《微信小程序》频道 >>


Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
书籍

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节

人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者



在线咨询 拨打电话