微信小程序MoxB实现全局状态管理流程详解
github 地址：https://github.com/wechat-miniprogram/mobx-miniprogram-bindings。
安装 MobX
- 在小程序根目录下执行
npm install --save mobx-miniprogram mobx-miniprogram-bindings安装mobx-miniprogram和mobx-miniprogram-bindings。 - 点击开发者工具中的菜单栏：工具 --> 构建 npm 完成构建。
创建 MobX Store
在小程序根目录下新建 store.js文件，创建 MobX 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 () {
this.numA = 3;
}),
});
使用 MobX Store
将页面、自定义组件和 store 绑定有两种方式： behavior 绑定和手工绑定 。
behavior 绑定：使用 storeBindingsBehavior 这个 behavior 和 storeBindings 定义段。
import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
Component({
behaviors: [storeBindingsBehavior],
storeBindings: {
// 绑定配置
},
// 也可以把 storeBindings 设置为一个数组，可以同时绑定多个 store
storeBindings: [
{
// 绑定配置 1
},
{
// 绑定配置 2
},
],
})
手工绑定： 使用 createStoreBindings 创建绑定，它会返回一个包含清理函数的对象用于取消绑定。
在页面 onUnload 或自定义组件 detached 时一定要调用清理函数，否则将导致内存泄漏。
import { createStoreBindings } from "mobx-miniprogram-bindings";Page({ onLoad() { this.storeBindings = createStoreBindings(this, { // 绑定配置 }); }, onUnload() { this.storeBindings.destroyStoreBindings(); },});import { createStoreBindings } from "mobx-miniprogram-bindings";
Page({
onLoad() {
this.storeBindings = createStoreBindings(this, {
// 绑定配置
});
},
onUnload() {
this.storeBindings.destroyStoreBindings();
},
});
无论使用哪种绑定方式，都必须提供一个绑定配置对象。这个对象包含以下字段：
store：一个 MobX observable。用于指定默认的 MobX store。
fields：数组或对象。用于指定需要绑定的 data 字段。
fields 有三种形式：
- 数组形式：指定 data 中哪些字段来源于 store 。例如
['numA', 'numB']。 - 映射形式：指定 data 中哪些字段来源于 store 以及它们在 store 中对应的名字。例如
{ a: 'numA', b: 'numB' }，此时this.data.a === store.numA，this.data.b === store.numB。 - 函数形式：指定 data 中每个字段的计算方法。例如
{ a: () => store.numA, b: () => anotherStore.numB }，此时this.data.a === store.numA，this.data.b === anotherStore.numB。
actions：数组或对象。用于指定需要映射的 actions，将 store 中的一些 actions 放入页面或自定义组件的 this 下。
actions 有两种形式：
- 数组形式：例如
['update']，此时this.update === store.update。 - 映射形式：例如
{ buttonTap: 'update' }，此时this.buttonTap === store.update。
为了提升性能，在 store 中的字段被更新后，并不会立刻同步更新到 this.data 上，而是等到下个 wx.nextTick 调用时才更新，这样可以显著减少 setData 的调用次数。
如果需要立刻更新，可以在 behavior 绑定中调用 this.updateStoreBindings()，或者在手工绑定中调用 this.storeBindings.updateStoreBindings()。
如果只是更新对象中的一部分，是不会引发界面变化的。
例如：this.someObject.someField = "xxx"; 是不会触发界面更新的，可以改成this.someObject = Object.assign({}, this.someObject, { someField: "xxx" });。
在 Component 构造器中使用
import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
import { store } from "../../store/store";
Component({
behaviors: [storeBindingsBehavior],
storeBindings: {
store,
fields: {
numA: "numA",
numB: "numB",
sum: "sum",
},
actions: {
updateNumA: "updateNumA",
},
},
methods: {
myMethod() {
this.updateNumA()
wx.nextTick(() => {
const A = this.data.numA; // 3
const B = this.data.numB; // 2
const C = this.data.sum; // 5
})
},
},
});
在 Page 页面中使用
小程序基础库版本 2.9.2 以上，可以直接像 Component 构造器那样引入 behaviors 。
import { createStoreBindings } from "mobx-miniprogram-bindings";
import { store } from "../../store/store";
Page({
onLoad() {
this.storeBindings = createStoreBindings(this, {
store,
fields: ["numA", "numB", "sum"],
actions: ["updateNumA"],
});
wx.nextTick(() => {
const A = this.data.numA; // 1
const B = this.data.numB; // 2
const C = this.data.sum; // 3
})
},
onUnload() {
this.storeBindings.destroyStoreBindings();
},
myMethod() {
this.updateNumA()
wx.nextTick(() => {
const A = this.data.numA; // 3
const B = this.data.numB; // 2
const C = this.data.sum; // 5
})
},
})
到此这篇关于微信小程序MoxB实现全局状态管理流程详解的文章就介绍到这了,更多相关小程序MoxB全局状态管理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了送你43道JS面试题,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
返回顶部组件是一种极其常见的网页功能，需求简单：页面滚动一定距离后，显示返回顶部的按钮，点击该按钮可以将滚动条滚回至页面开始的位置,接下来通过本文给大家介绍原生JS实现平滑回到顶部组件，需要的朋友参考下吧2016-03-03
ES6中为我们提供了很多好用的新特性,其中包括let,箭头函数以及扩展运算符…等，以下就是总结的常用基础知识2019-02-02
闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。2010-07-07
这篇文章主要介绍了JS数字千分位格式化实现方法,结合实例形式总结分析了JS实现数字千分位格式化的常用技巧,包括字符串的分割、拼接、遍历及正则操作等相关实现技巧,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了Bootstrap3 多个模态对话框无法显示的解决方案,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
这篇文章主要介绍了ES6中Symbol、Set和Map用法,结合实例形式详细分析了ES6中Symbol、Set和Map的功能、使用方法及相关操作注意事项,需要的朋友可以参考下2019-08-08
有时因某种特殊需要，会获取span里面的值，下面有个不错的示例，大家可以参考下2014-05-05
这篇文章主要为大家详细介绍了js实现旋转的星空效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
JavaScript之通过年月获取月份的天数、日期格式化、时间、补零、Date、toLocaleString、Intl、
这篇文章主要介绍了JavaScript之通过年月获取月份的天数、日期格式化、时间、补零、Date、toLocaleString、Intl、DateTimeFormat、format的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
最新评论