微信小程序 --- mobx-miniprogram miniprogram-computed

1.1 mobx-miniprogram 介绍

目前已经学习了 6 种小程序页面、组件间的数据通信方案，分别是：

  1. 数据绑定：properties
  2. 获取组件实例：this.selectComponent()
  3. 事件绑定：this.triggerEvent()
  4. 获取应用实例：getApp()
  5. 页面间通信：EventChannel
  6. 事件总线：pubsub-js

在中小型项目中，使用这些数据通信方式已经能够满足我们项目的需求。

但是随着项目的业务逻辑越来越复杂，组件和页面间通信就会变的非常复杂。例如：有些状态需要在多个页面间进行同步使用，一个地方发生变更，所有使用的地方都需要发生改变，这时候如果使用前面的数据通信方案进行传递数据，给管理和维护将存在很大的问题。

为了方便进行页面、组件之间数据的传递，小程序官方提供了一个扩展工具库： mobx-miniprogram

mobx-miniprogram 是针对微信小程序开发的一个简单、高效、轻量级状态管理库，它基于Mobx状态管理框架实现。

使用 mobx-miniprogram 定义管理的状态是响应式的，当状态一旦它改变，所有关联组件都会自动更新相对应的数据

通过该扩展工具库，开发者可以很方便地在小程序中全局共享的状态，并自动更新视图组件，从而提升小程序的开发效率

需要注意：在使用 mobx-miniprogram 需要安装两个包：mobx-miniprogram 和 mobx-miniprogram-bindings

  1. mobx-miniprogram 的作用：创建 Store 对象，用于存储应用的数据
  2. mobx-miniprogram-bindings 的作用：将状态和组件、页面进行绑定关联，从而在组件和页面中操作数据
npm install mobx-miniprogram mobx-miniprogram-bindings

官方文档：

  1. mobx-miniprogram 官方文档

  2. mobx-miniprogram-bindings 官方文档

1.2 创建 Store 对象

如果需要创建 Store 对象需要使用 mobx-miniprogram ，因此需要先熟悉 mobx-miniprogram 三个核心概念:

  1. observable：用于创建一个被监测的对象，对象的属性就是应用的状态(state)，这些状态会被转换成响应式数据。
  2. action：用于修改状态(state)的方法，需要使用 action 函数显式的声明创建。
  3. computed：根据已有状态(state)生成的新值。计算属性是一个方法，在方法前面必须加上 get 修饰符

mobx-miniprogram 详细的使用步骤如下：

  1. 在项目的根目录下创建 store 文件夹，然后在该文件夹下新建 index.js

  2. 在 /store/index.js 导入 observable 、action 方法

    import { observable, action } from 'mobx-miniprogram'

  3. 使用 observable 方法需要接受一个 store 对象，存储应用的状态

    // observable：用于创建一个被监测的对象，对象的属性就是应用的状态(state)，这些状态会被转换成响应式数据。
// action：用于显式的声明创建更新 state 状态的方法
import { observable, action } from 'mobx-miniprogram'// 使用 observable 创建一个被监测的对象
export const numStore = observable({// 创建应用状态numA: 1,numB: 2,// 使用 action 更新 numA 以及 numBupdate: action(function () {this.numA+=1this.numB+=1}),// 计算属性，使用 get 修饰符，get sum() {return this.numA + this.numB;}})
1.3 在组件中使用数据

如果需要 Page 或者Component中对共享的数据进行读取、更新操作，需要使用 mobx-miniprogram-bindings

mobx-miniprogram-bindings 的作用就是将 Store 和 页面或组件进行绑定关联

如果需要在组件中使用状态，需要 mobx-miniprogram-bindings 库中导入 ComponentWithStore 方法

在使用时：需要将 Component 方法替换成 ComponentWithStore 方法 ，原本组件配置项也需要写到该方法中

在替换以后，就会新增一个 storeBindings 配置项，配置项常用的属性有以下三个：

  1. store: 指定要绑定的 Store 对象
  2. fields: 指定需要绑定的 data 字段
  3. actions: 指定需要映射的 actions 方法

📌 注意事项：

导入的数据会同步到组件的 data 中

导入的方法会同步到组件的 methods 中

// components/custom01/custom01.js
import { ComponentWithStore } from 'mobx-miniprogram-bindings'
import { numStore } from '../../stores/numstore'ComponentWithStore({data: {someData: '...'},storeBindings: {store: numStore,fields: ['numA', 'numB', 'sum'],actions: ['update']}
})
1.4 在页面中使用数据-方式1

Component 方法用于创建自定义组件。

小程序的页面也可以视为自定义组件，因此页面也可以使用 Component 方法进行构建，从而实现复杂的页面逻辑开发。

如果我们使用了 Component 方法来构建页面，那么页面中如果想使用 Store 中的数据，使用方式和组件的使用方式是一样的

  1. 从 mobx-miniprogram-bindings 库中导入 ComponentWithStore 方法
  2. 将 Component 方法替换成 ComponentWithStore 方法
  3. 然后配置 storeBindings 从 Store 中映射数据和方法即可
// index/index.js
import { ComponentWithStore } from 'mobx-miniprogram-bindings'
import { numStore } from '../../stores/numstore'ComponentWithStore({data: {someData: '...'},storeBindings: {store: numStore,fields: ['numA', 'numB', 'sum'],actions: ['update']}
})
1.5 在页面中使用数据-方式2

在上一节，我们使用了 Component 方法构建页面，然后使用 ComponentWithStore 方法让页面和 Store 建立了关联

如果不想使用 Component 方法构建页面。这时候需要使用 mobx-miniprogram-bindings 提供的 BehaviorWithStore 方法来和 Store 建立关联。

小程序的 behavior 方法是一种代码复用的方式，可以将一些通用的逻辑和方法提取出来，然后在多个组件中复用，从而减少代码冗余，提高代码的可维护性。在页面中也可以使用 behaviors 配置项

使用方式如下：

  1. 新建 behavior 文件，从 mobx-miniprogram-bindings 库中导入 BehaviorWithStore 方法
  2. 在 BehaviorWithStore 方法中配置 storeBindings 配置项从 Store 中映射数据和方法
  3. 在 Page 方法中导入创建的 behavior ，然后配置 behavior 属性，并使用导入的 behavior
// behavior.jsimport { BehaviorWithStore } from 'mobx-miniprogram-bindings'
import { numStore } from '../../stores/numstore'export const indexBehavior = BehaviorWithStore({storeBindings: {store: numStore,fields: ['numA', 'numB', 'sum'],actions: ['update'],}
})
// index.jsimport { indexBehavior } from './behavior'Page({behaviors: [indexBehavior]// 其他配置项
})
1.6 fields、actions 对象写法

fields、actions 有两种写法：数组 或者 对象。

如果 fields 写成对象方式，有两种写法：

  1. 映射形式：指定 data 中哪些字段来源于 store 以及它们在 store 中对应的名字。

    • 例如 { a: 'numA', b: 'numB' }

  2. 函数形式：指定 data 中每个字段的计算方法

    • 例如 { a: () => store.numA, b: () => anotherStore.numB }

如果 actions 写成对象方式，只有两种写法：

  1. 映射形式：指定模板中调用的哪些方法来源于 store 以及它们在 store 中对应的名字。
    • 例如 { buttonTap: 'update' }
import { ComponentWithStore } from 'mobx-miniprogram-bindings'
import { numStore } from '../../stores/numstore'ComponentWithStore({data: {someData: '...'},storeBindings: {store: numStore,fields: {// 使用函数方式获取 Store 中的数据a: () => store.numA,b: () => store.numB,// 使用映射形式获取 Store 中的数据，值为数据在 store 中对应的名字total: 'sub'},// 使用映射形式获取 Store 中的 action 名字actions: {// key 自定义，为当前组件中调用的方法// 值为 store 中对应的 action 名字buttonTap: 'update'}}
})
1.7 绑定多个 store 以及命名空间

在实际开发中，一个页面或者组件可能会绑定多个 Store ，这时候我们可以将 storeBindings 改造成数组。数组每一项就是一个个要绑定的 Store。

如果多个 Store 中存在相同的数据，显示会出现异常。还可以通过 namespace 属性给当前 Store 开启命名空间，在开启命名空间以后，访问数据的时候，需要加上 namespace 的名字才可以。

// behavior.jsimport { BehaviorWithStore } from 'mobx-miniprogram-bindings'
import { numStore } from '../../stores/numstore'export const indexBehavior = BehaviorWithStore({storeBindings: [{namespace: 'numStore',store: numStore,fields: ['numA', 'numB', 'sum'],actions: ['update'],}]
})
// index/index.wxml<view>{{ numStore.numA }} + {{ numStore.numB }} = {{numStore.sum}}</view>

02. miniprogram-computed

小程序框架没有提供计算属性相关的 api ，但是官方为开发者提供了拓展工具库 miniprogram-computed。

该工具库提供了两个功能：

  1. 计算属性 computed
  2. 监听器 watch
2.1 计算属性 computed

知识点：

如果需要在组件中使用计算属性功能，需要 miniprogram-computed 库中导入 ComponentWithComputed 方法

在使用时：需要将 Component 方法替换成 ComponentWithComputed 方法 ，原本组件配置项也需要写到该方法中

在替换以后，就可以新增 computed 以及 watch 配置项。

安装 miniprogram-computed， 在安装以后，需要点击 构建 npm，进行本地构建

npm install miniprogram-computed

📌 注意事项：

​ computed 函数中不能访问 this ，但是提供了形参，代表 data 对象

​ 计算属性函数的返回值会被设置到 this.data.sum 字段中

官方文档：miniprogram-computed

落地代码：

计算属性 computed 的使用

// component.js// 引入 miniprogram-computed
import { ComponentWithComputed } from 'miniprogram-computed'ComponentWithComputed({data: {a: 1,b: 1},computed: {total(data) {// 注意： // computed 函数中不能访问 this ，只有 data 对象可供访问// 这个函数的返回值会被设置到 this.data.sum 字段中// 计算属性具有缓存，计算属性使用多次，但是计算属性方法只会执行一次console.log('~~~~~')return data.a + data.b}}
})
2.2 监听器 watch

在使用时：需要将 Component 方法替换成 ComponentWithComputed 方法 ，原本组件配置项也需要写到该方法中

在替换以后，就可以新增 computed 以及 watch 配置项。

// 引入 miniprogram-computed
import { ComponentWithComputed } from 'miniprogram-computed'ComponentWithComputed({data: {a: 1,b: 1},computed: {total(data) {// 注意： // computed 函数中不能访问 this ，只有 data 对象可供访问// 这个函数的返回值会被设置到 this.data.sum 字段中return data.a + data.b}}watch: {// 同时对 a 和 b 进行监听'a, b': function (a, b) {this.setData({total: a + b})}},methods: {updateData() {this.setData({a: this.data.a + 1,b: this.data.b + 1})}}
})

拓展：Mobx 与 Computed 结合使用

两个框架扩展提供的 ComponentWithStore 与 ComponentWithComputed 方法无法结合使用。

如果需要在一个组件中既想使用 mobx-miniprogram-bindings 又想使用 miniprogram-computed

解决方案是：

  1. 使用旧版 API

    • 自定义组件仍然使用 Component 方法构建组件，将两个扩展依赖包的使用全部改为旧版 API

    • mobx-miniprogram-bindings 官方文档

    • miniprogram-computed 官方文档

  2. 使用兼容写法

    • 即要么使用 ComponentWithStore 方法构建组件，要么使用 ComponentWithComputed 方法构建组件

    • 如果使用了 ComponentWithStore 方法构建组件，计算属性写法使用旧版 API

    • 如果使用了 ComponentWithComputed 方法构建组件，Mobx写法使用旧版 API

我们演示使用兼容写法：

  1. 如果使用了 ComponentWithStore 方法构建组件，计算属性写法使用旧版 API

    import { ComponentWithComputed } from 'miniprogram-computed'// component.js
const computedBehavior = require('miniprogram-computed').behaviorComponentWithStore({behaviors: [computedBehavior],data: {a: 1,b: 1,sum: 2},watch: {'a, b': function (a, b) {this.setData({total: a + b})}},computed: {total(data) {// 注意： computed 函数中不能访问 this ，只有 data 对象可供访问// 这个函数的返回值会被设置到 this.data.sum 字段中return data.a + data.b + data.sum // data.c 为自定义 behavior 数据段}},// 实现组件和 Store 的关联storeBindings: {store: numStore,// fields 和 actions 有两种写法：数组写法 和 对象写法// 数组写法fields: ['numA', 'numB', 'sum'],actions: ['update']}
})

  2. 使用了 ComponentWithComputed 方法构建组件，Mobx写法使用旧版 API

    import { ComponentWithComputed } from 'miniprogram-computed'// 导入 storeBindingsBehavior 方法实现组件和 Store 的关联
import { storeBindingsBehavior } from "mobx-miniprogram-bindings"
// 导入 Store 
import { numStore } from '../../stores/numstore'ComponentWithComputed({behaviors: [storeBindingsBehavior],data: {a: 1,b: 1,sum: 2},watch: {'a, b': function (a, b) {this.setData({total: a + b})}},computed: {total(data) {// 注意： computed 函数中不能访问 this ，只有 data 对象可供访问// 这个函数的返回值会被设置到 this.data.sum 字段中return data.a + data.b + data.sum // data.c 为自定义 behavior 数据段}},// 实现组件和 Store 的关联storeBindings: {store: numStore,// fields 和 actions 有两种写法：数组写法 和 对象写法// 数组写法fields: ['numA', 'numB', 'sum'],actions: ['update']}
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/707910.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

LeetCode 2120.执行所有后缀指令

LeetCode 2120.执行所有后缀指令

现有一个 n x n 大小的网格&#xff0c;左上角单元格坐标 (0, 0) &#xff0c;右下角单元格坐标 (n - 1, n - 1) 。给你整数 n 和一个整数数组 startPos &#xff0c;其中 startPos [startrow, startcol] 表示机器人最开始在坐标为 (startrow, startcol) 的单元格上。 另给你…
阅读更多...
动态给vue的data添加新属性页面不更新的原因分析以及解决方法

动态给vue的data添加新属性页面不更新的原因分析以及解决方法

直接添加属性的问题 我们从一个例子触发 定义一个p标签&#xff0c;通过v-for指令进行遍历&#xff0c;然后通过绑定事件&#xff0c;触发事件的时候&#xff0c;将动态添加哟个属性。 预期结果&#xff1a;动态增加的属性也被遍历显示在页面上 <p v-for"(value,ke…
阅读更多...
Android 15 第一个开发者预览版-Android15的新变化

Android 15 第一个开发者预览版-Android15的新变化

版本说明 发布日期2024 年 2 月 16 日buildAP31.240119.016模拟器支持x86&#xff08;64 位&#xff09;、ARM (v8-A)安全补丁级别2024 年 2 月Google Play 服务2015 年 2 月 24 日API diffAPI 34 → V DP1 Android 15 将继续致力于构建一个平台&#xff0c;在帮助提高效率的…
阅读更多...
后端程序员入门react笔记（六）- 讲透Promise与Fetch

后端程序员入门react笔记（六）- 讲透Promise与Fetch

js声明变量的三种方式 我们通常使用 var let 和const来声明js的变量&#xff0c;但是这三者有什么区别呢&#xff1f; var的变量可以是全局的或者函数作用域&#xff0c;而let和const只能是块级作用域var和let可以重新赋值&#xff0c;而const是不允许重新赋值的&#xff0c;…
阅读更多...
【王道数据结构】【chapter7查找】【P285t5】

【王道数据结构】【chapter7查找】【P285t5】

线性表中各节点的检索概率不等时&#xff0c;可用如下策略提高顺序检索的效率&#xff1b;若找到指定的结点&#xff0c;则将该结点和其前驱结点&#xff08;若存在&#xff09;交换&#xff0c;使得经常被访问的结点尽量位于表的前端。试设计在顺序结构和链式结构的线性表盘上…
阅读更多...
python中集合(Set)和列表(List)性能比较

python中集合(Set)和列表(List)性能比较

文章目录 引言1. Set和List2. 性能对比3. 总结 引言 在当今的软件开发过程中&#xff0c;Python 已经成为了一种极为流行的编程语言&#xff0c;得益于其简洁的语法和强大的库支持。在 Python 中&#xff0c;列表&#xff08;List&#xff09;和集合&#xff08;Set&#xff0…
阅读更多...
敏捷开发中如何写好用户故事？

敏捷开发中如何写好用户故事？

什么是用户故事&#xff1f; 用户故事&#xff08;user story&#xff09;是一个用来确认用户和用户需求的简短描述&#xff0c;作为什么用户&#xff0c;希望如何&#xff0c;这样做的目的或者价值何在。用户故事在软件研发中又被描述为需求。用户故事通常的格式为&#xff1…
阅读更多...
【一】【计算机网络】win基本命令

【一】【计算机网络】win基本命令

检查自己的信息 以太网IPv4 地址就是本地计算机。 以太网适配器 VMware Network Adapter VMnet1的IPv4 地址不是本地计算机。局域网内其他的计算机。 C:\Users\205>ipconfigWindows IP 配置以太网适配器 以太网:连接特定的 DNS 后缀 . . . . . . . :本地链接 IPv6 地址. .…
阅读更多...
【Android】切换系统全局语言设置

【Android】切换系统全局语言设置

前两种为应用内部处理&#xff0c;第三种为发送广播由系统服务进行处理 使用反射 这种会直接将安卓设置内的语言列表清空&#xff0c;然后将选择的语言设置为系统语言 该方法存在问题&#xff0c;在首次开机后设置会导致国外应用进不去(只对于here地图个别版本) /*** 设置语言…
阅读更多...
STL容器之list

STL容器之list

​ 1.封装除了对数据的保护、更好地管理数据之外&#xff0c;还有实现了对上层的统一&#xff1b; ​ 2.类模板参数的不同&#xff0c;一方面是为了实例化出来不同的类&#xff0c;另一方面是为了实现类的成员函数的不同&#xff1b; 一、认识list ​ 1.list是一种带头双向循…
阅读更多...
隐藏 IP 地址调用外部接口：探索与实践

隐藏 IP 地址调用外部接口：探索与实践

目录 探索隐藏自己的 IP 调用别人的接口1. 使用代理服务器代码示例实际场景 2. 使用 VPN实际场景 3. 使用 Tor 匿名网络实际场景 结语 引言&#xff1a; 在网络开发中&#xff0c;有时我们需要调用外部接口来获取数据或执行某些操作。然而&#xff0c;有些情况下&#xff0c;我…
阅读更多...
java高并发场景面试题，干货来袭

java高并发场景面试题，干货来袭

为什么阿里巴巴的持久层抛弃hibernate&#xff0c;采用MyBatis框架&#xff1f; 原因大概有以下4点&#xff1a; 尤其是需要处理大量数据或者大并发情况的网站服务&#xff0c;这也阿里选择MyBatis的原因。 MyBatis整体架构 不多讲&#xff0c;先看目录图 MyBatis源码笔记文档…
阅读更多...
捕获在野SMBGhost本地提权攻击样本

捕获在野SMBGhost本地提权攻击样本

前言 从Windows10 v1903/Windows Server v1903开始&#xff0c;微软在协议SMB3.1.1中开启了对数据压缩传输的支持&#xff0c;但是由于SMB没有正确处理压缩的数据包&#xff0c;在客户端/服务端解压数据的时候&#xff0c;没有对COMPRESSIN_TRANSFORM_HEADE结构进行安全校验&a…
阅读更多...
【mysql 数据库事务】开启事务操作数据库，写入失败后，不回滚，会有问题么？ 这里隐藏着大坑，复试，面试时可以镇住面试老师！！！！

【mysql 数据库事务】开启事务操作数据库，写入失败后，不回滚，会有问题么？ 这里隐藏着大坑，复试，面试时可以镇住面试老师！！！！

建表字段: CREATE TABLE user (id INT(11) NOT NULL AUTO_INCREMENT,nickname VARCHAR(32) NOT NULL COLLATE utf8mb4_general_ci,email VARCHAR(32) NOT NULL COLLATE utf8mb4_general_ci,status SMALLINT(6) UNSIGNED NULL DEFAULT NULL,password VARCHAR(256) NULL DEFAULT…
阅读更多...
QT两个类之间使用信号槽

QT两个类之间使用信号槽

在做一些东西的时候&#xff0c;习惯性的引入头文件并且调用&#xff0c;因此出现了很多bug,qt的信号槽机制便可以有效的避免一些问题。 A类 #ifndef A_H #define A_H#include <QObject> #include <QDebug> class A : public QObject {Q_OBJECT public:explicit A…
阅读更多...
Netty入门指南：从零开始的异步网络通信

Netty入门指南：从零开始的异步网络通信

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 Netty入门指南&#xff1a;从零开始的异步网络通信 前言Netty简介由来&#xff1a;发展历程&#xff1a;异步、事件驱动的编程模型&#xff1a; 核心组件解析通信协议高性能特性异步编程范式性能优化与…
阅读更多...
C++ stack queue详解以及模拟实现

C++ stack queue详解以及模拟实现

目录 1.stack的使用 1.1stack的定义 1.2stack的使用 1.3stack的构造 2.stack底层模拟实现 3.queue的使用 3.1queue的定义 3.2queue的使用 4.queue底层模拟实现 1.stack的使用 1.1stack的定义 1. stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环…
阅读更多...
vue3-(jeecgBoot) 本地图片展示，部署后加载失败解决

vue3-(jeecgBoot) 本地图片展示，部署后加载失败解决

开始使用的方法如下&#xff1a; <img class"alarm" :src"/assets/images/icon-alarm-default.png"/>结果是本地运行测试可以正常显示&#xff0c;部署发布后就不显示了 解决方案**&#xff1a; 图片地址配置为变量 import defImg from ‘//assets…
阅读更多...
关于 cocos creator 如何打包抖音字节小游戏步骤一

关于 cocos creator 如何打包抖音字节小游戏步骤一

1、cocos creator打开引擎&#xff0c;在顶部选择构建之后&#xff0c;在选择点击构建(ps:具体看项目组的大小&#xff0c;如果是一个简单的不多资源一般不到一分钟&#xff0c;如果项目很大&#xff0c;就至少半个小时以上)&#xff0c;之后 成功构建之后如下所示&#xff1a;…
阅读更多...
修改Qt生成iOS应用的原生底层,编译QtBase下的ios子模块

修改Qt生成iOS应用的原生底层,编译QtBase下的ios子模块

1.下载Qt源码 2.找到ios.pro子工程 3.使用QtCreaor12打开ios.pro工程 4.出现工程下只有一个.pro文件解决 复制修改好的toolchain.prf文件进行替换. 修改方法:
阅读更多...
最新文章

Copyright @ 2022~2023