微信小程序之mobx-miniprogram状态管理
目前已经学习了6种小程序页面、组件间的数据通信方案,分别是:
1. 数据绑定: properties
2.获取组件实例: this.selectComponent()
3.事件绑定: this.triggerEvent()
4. 获取应用实例:getApp()
5. 页面间通信: EventChannel
6.事件总线:pubsub-js
在中小型项目中,使用这些数据通信方式已经能够满足我们项目的需求。但是随着项目的业务逻辑越来越复杂,组件和页面间通信就会变的非常复杂。例如:有些状态需要在多个页面间进行同步使用,一个地方发生变更,所有使用的地方都需要发生改变,这时候如果使用前面的数据通信方案进行传递数据,给管理和维护将存在很大的问题。为了方便进行页面、组件之间数据的传递,小程序官方提供了一个扩展工具库:mobx-miniprogram
框架扩展: mobx-miniprogram:
mopx-miniprogram 是针对微信小程序开发的一个简单、高效、轻量级状态管理库,它基于 Mobx 状态管理框架实现。
使用 mobx-miniprogram 定义管理的状态是响应式的,当状态一旦它改变,所有关联组件都会自动更新相对应的数据通过该扩展工具库,开发者可以很方便地在小程序中全局共享的状态,并自动更新视图组件,从而提升小程序的开发效率
需要注意:在使用 mobx-miniprogram 需要安装两个包:
mobx-miniprogram 和 mobx-miniprogram-bindings
npm install mobx-miniprogram mobx-miniprogram-bindings
- mobx-miniprogram 的作用:创建 Store 对象,用于存储应用的数据
- mobx-miniprogram-bindings 的作用:将状态和组件、页面进行绑定关联,从而在组件和页面中操作数据
- 安装完毕后,不要忘了左上角---编辑---构建
创建Store:
需要使用 mobx-miniprogram ,因此需要先熟悉 mobx-miniprogram 三个核心概念:
1. observable: 用于创建一个被监测的对象,对象的属性就是应用的状态(state),这些状态会被转换成响应式数据。
2. action: 用于修改状态(state)的方法,需要使用 action 函数显式的声明创建。
3. computed: 根据已有状态(state)生成的新值。计算属性是一个方法,在方法前面必须加上 get 修饰符
- 在项目的根目录下创建 store 文件夹,然后在该文件夹下新建 numStore.js (名字任意)
- 在 /store/numStore.js 导入 observable、action 方法
import { observable, action } from 'mobx-miniprogram'export const numStore = observable({// 对象的属性就是应用的状态numA:1,numB:2,// 定义 action 方法,用来修改状态update: action(function(){// 在方法中如果需要获取状态,可以使用 this 进行获取this.numA += 1this.numB += 1 })// 计算属性 computed// 是根据已有状态产生新的状态// 计算属性前面需要使用 get 修饰符进行修饰get sum(){// 计算属性内部必须要有返回值retrun this.numA + this.numB}
})
通用方法:在组件中使用数据
使用 mobx-miniprogram-bindings 将 Store 和页面或组件进行绑定关联
如果需要在组件中使用状态,需要 mobx-miniprogram-bindings 库中导入 ComponentWithstore 方法
在使用时:需要将 Component 方法替换成 ComponentWithStore 方法,原本组件配置项也需要写到该方法中
在替换以后,就会新增一个 storeBindings 配置项,配置项常用的属性有以下三个:
1. store: 指定要绑定的 Store 对象
2. fields: 指定需要绑定的 data字段
3. actions: 指定需要映射的 actions 方法
// 如果需要在组件中使用 Store 中的数据以后方法
// 需要从 mobx-miniprogram-bindings 里面引入 Componentwithstore 方法
import { ComponentwithStore } from 'mobx-miniprogram-bindings'// 导入当前组件需要使用的 Store 对象
import{ numStore } from '../../stores/numstore'// 需要使用 ComponentwithStore 方法将 Component 方法进行替换
ComponentwithStore({// 用来配置当前组件需要与哪些Store进行关联storeBindings: {store: numStore, // 当前组件需要使用number store 这一个对象fields: ['numA', 'numB', 'sum'], // 当前组件需要使用这个sotre中的那些数据actions: ['update']}
})
注意: 在从 Stroe 对象中引入数据和方法以后
- 如果是数据,会被注入到data对象中
- 如果是方法,会被注入到methods对象中
<view> {{ numA}} + {{ numB }} = {{sum}} </view>
<button type="warn" plain bindtap="update">更新 Store 中的数据</button>
上面由于 update方法被注入到methods当中,所以可以在模版中直接调用
第一种:使用Component方法来构建页面组件中使用Store
方法和上面正常的使用方式是一样的
1.从 mobx-miniprogram-bindings 库中导入 ComponentWithStore 方法
2.将 Component 方法替换成 Componentwithstore 方法
3.然后配置 storeBindings 从Store 中映射数据和方法即可
第二种:不使用Component 方法构建页面组件中使用Store
- 这时候需要使用 mobx-miniprogram-bingings 提供的 Behaviorwithstore方法来和 Store 建立关联。
- Behaviorwithstore 定义在当前组件 or 页面根目录下 的 behavior.js中
- 我们去配置Behaviorwithstore 具体和哪些Store联系,供当前页面使用
小程序的behavior方法是一种代码复用的方式,可以将一些通用的逻辑和方法提取出来,然后在多个组件中复用,从而减少代码冗余,提高代码的可维护性。在页面中也可以使用 behaviors 配置项
使用方法:
1. 新建 behavior.js 文件,从 mobx-miniprogram-bindings 库中导入 BehaviorWithstore 方法
2.在BehaviorWithstore方法中配置 storeBindings 配置项从 Store 中映射数据和方法
3. 在 Page 方法中导入创建的 behavior ,然后配置 behavior 属性,并使用导入的 behavior
- 关联store初始化
- cart.js中注册(当前需要使用的页面注册)
- 注册完毕后会自动映射到data中,相当于已经取出了store中的内容放到data中了,可以直接调用
- 直接可以在页面中使用:
fields、actions 对象写法
fields、actions 有两种写法:数组 或者 对象。
我们之前使用的是 数组 的写法:
fileds: ['numA','numB','sum'],
actions: ['update']
下面介绍一下对象的写法:
-
filelds的对象写法
- 映射写法
- 函数写法
fields: {// 两种写法:// 映射形式: 需要指定 data 中哪些字段来源于 store,以及 在 store 中的名字是什么numA: 'numA',numB: 'numA',numC: 'numA'// 函数形式// key: data 中哪些字段来源于 store// value: 函数, 函数内部需要返回对应 store 数据的值numA: () => numStore.numA,numB: () => numStore.numB,numC: () => numStore.numC,// 自定义属性// 如果对属性进行了自定义,模板中需要使用自定义以后的属性a: 'numA',b: 'numB',total: 'sum'
}
在对象写法中可以通过自定义属性来重新命名,使用了自定义属性后,模版中的属性也必须对应自定义属性
-
action的对象写法:
- 映射写法
- 自定义属性
- 映射写法
actions:{// 如果将 actions 改成对象写法// actions 只有映射形式一种写法// 指定模板中使用的哪些方法来源于 store,并且在 store 中的名字是什么updateData: 'update
}
绑定多个组件以及命名空间
在实际开发中,一个页面或者组件可能会绑定多个 Store ,这时候我们可以将storeBindings 改造成数组。数组每一项就是一个个要绑定的 Store。
如果多个 Store 中存在相同的数据,显示会出现异常。还可以通过 namespace 属性给当前 Store 开启命名空间,在开启命名空间以后,访问数据的时候,需要加上 namespace 的名字才可以。
两者store中有变量或方法冲突了
有两种解决方式:
第一种: 将 fields 以及 actions 改成对象方式
第二种:添加命名空间
- 访问命名空间的数据
相关文章:
微信小程序之mobx-miniprogram状态管理
目前已经学习了6种小程序页面、组件间的数据通信方案,分别是: 1. 数据绑定: properties 2.获取组件实例: this.selectComponent() 3.事件绑定: this.triggerEvent() 4. 获取应用实例:getApp() 5. 页面间通信: EventChannel 6.事件总线:pubsub-js 在中小型项目…...
uniapp可视化-活动报名表单系统-代码生成器
活动报名表单系统小程序旨在为各类活动组织者提供一个便捷、高效的线上报名管理平台,同时为参与者提供简单易用的报名途径。 主要功能 活动发布:活动组织者可以发布活动的详细信息,包括活动名称、时间、地点、活动内容等。用户可以在小程序中…...
1.从零开始学会Vue--{{基础指令}}
全新专栏带你快速掌握Vue2Vue3 1.插值表达式{{}} 插值表达式是一种Vue的模板语法 我们可以用插值表达式渲染出Vue提供的数据 1.作用:利用表达式进行插值,渲染到页面中 表达式:是可以被求值的代码,JS引擎会将其计算出一个结果 …...
深入解析操作系统控制台:阿里云Alibaba Cloud Linux(Alinux)的运维利器
作为一位个人开发者兼产品经理,我的工作日常紧密围绕着云资源的运维和管理。在这个过程中,操作系统扮演了至关重要的角色,而操作系统控制台则成为了我们进行系统管理的得力助手。本文将详细介绍阿里云的Alibaba Cloud Linux操作系统控制台的功…...
CSS Grid 网格布局,以及 Flexbox 弹性盒布局模型,它们的适用场景是什么?
CSS Grid网格布局和Flexbox弹性盒布局模型都是现代CSS布局的重要工具,它们各自具有独特的优势和适用场景。 作为前端开发工程师,理解这些布局模型的差异和适用场景对于编写高效、可维护的代码至关重要。 CSS Grid网格布局 适用场景: 复杂…...
2025.2.16机器学习笔记:TimeGan文献阅读
2025.2.9周报 一、文献阅读题目信息摘要Abstract创新点网络架构一、嵌入函数二、恢复函数三、序列生成器四、序列判别器损失函数 实验结论后续展望 一、文献阅读 题目信息 题目: Time-series Generative Adversarial Networks会议: Neural Information…...
高通推出骁龙游戏超级分辨率™:充分释放移动游戏性能,带来更持久的续航
Snapdragon Elite Gaming 一直致力于为每位用户打造卓越游戏体验。骁龙支持众多端游级特性,包括144FPS游戏体验、True 10-bit HDR支持的最高视觉质量的超流畅图形,让玩家可以畅享超10亿色的游戏体验。骁龙将许多移动端首创特性引入备受玩家喜爱的游戏中&…...
golangAPI调用deepseek
目录 1.deepseek官方API调用文档1.访问格式2.curl组装 2.go代码1. config 配置2.模型相关3.错误处理4.deepseekAPI接口实现5. 调用使用 3.响应实例 1.deepseek官方API调用文档 1.访问格式 现在我们来解析这个curl 2.curl组装 // 这是请求头要加的参数-H "Content-Type:…...
SOC芯片前端设计对芯片电源完整性的影响
在进行芯片的电源完整性时,因为PI受影响的因素较多,出现问题debug也比较难,所以在进行芯片设计时,需要端到端从前到后进行考虑设计,本篇文章将从芯片前端设计的角度来看看哪些因素会影响到PI的设计。 芯片前端设计的主…...
【区块链】零知识证明基础概念详解
🌈个人主页: 鑫宝Code 🔥热门专栏: 闲话杂谈| 炫酷HTML | JavaScript基础 💫个人格言: "如无必要,勿增实体" 文章目录 零知识证明基础概念详解引言1. 零知识证明的定义与特性1.1 基本定义1.2 三个核心…...
面基Spring Boot项目中实用注解一
在Spring Boot项目中,实用注解根据功能可以分为多个类别。以下是常见的注解分类、示例说明及对比分析: 1. 核心配置注解 SpringBootApplication 作用:标记主启动类,组合了Configuration、EnableAutoConfiguration和ComponentScan…...
最新智能优化算法: 中华穿山甲优化( Chinese Pangolin Optimizer ,CPO)算法求解23个经典函数测试集,MATLAB代码
中华穿山甲优化( Chinese Pangolin Optimizer ,CPO)算法由GUO Zhiqing 等人提出,该算法的灵感来自中华穿山甲独特的狩猎行为,包括引诱和捕食行为。 算法流程如下: 1. 开始 设置算法参数和最大迭代次数&a…...
shell脚本备份MySQL数据库和库下表
目录 注意: 一.脚本内容 二.执行效果 三.创建定时任务 注意: 以下为对MySQL5.7.42版本数据库备份shell脚本参考运行备份的机器请确认mysqldump版本>5.7,否则备份参数--set-gtid-purgedOFF无效,考虑到一般数据库节点和备份…...
Unity Shader Graph 2D - Procedural程序化图形之渐变的正弦波形
前言 正弦波形也是一种常用、常见的程序化图形,合理的使用正弦波形会创作出一些有趣、美观和丰富的效果,本文将使用Unity Shader Graph来实现一个正弦波形效果,帮助理解和实践Unity Shader Graph以及正弦函数。 创建一个名为SineWave的Shader…...
【算法与数据结构】并查集详解+题目
目录 一,什么是并查集 二,并查集的结构 三,并查集的代码实现 1,并查集的大致结构和初始化 2,find操作 3,Union操作 4,优化 小结: 四,并查集的应用场景 省份…...
国家队出手!DeepSeek上线国家超算互联网平台!
目前,国家超算互联网平台已推出 DeepSeek – R1 模型的 1.5B、7B、8B、14B 版本,后续还会在近期更新 32B、70B 等版本。 DeepSeek太火爆了!在这个春节档,直接成了全民热议的话题。 DeepSeek也毫无悬念地干到了全球增速最快的AI应用。这几天,国内的云计算厂家都在支持Dee…...
H5接入支付宝手机网站支付并实现
小程序文档 - 支付宝文档中心 1.登录 支付宝开放平台 创建 网页/移动应用 2.填写创建应用信息 3.配置开发设置 4.网页/移动应用:需要手动上线。提交审核后,预计 1 个工作日的审核时间。详细步骤可点击查看 上线应用 。应用上线后,还需要完成…...
Win10环境借助DockerDesktop部署大数据时序数据库Apache Druid
Win10环境借助DockerDesktop部署最新版大数据时序数据库Apache Druid32.0.0 前言 大数据分析中,有一种常见的场景,那就是时序数据,简言之,数据一旦产生绝对不会修改,随着时间流逝,每个时间点都会有个新的…...
(三)Axure制作转动的唱片
效果图 属性: 图标库:iconfont-阿里巴巴矢量图标库 方形图片转为圆角图片,裁剪,然后加圆角, 唱片和底图是两个图片,点击播放,唱片在旋转。 主要是播放按钮和停止按钮,两个动态面板…...
[JVM篇]分代垃圾回收
分代垃圾回收 分代收集法是目前大部分 JVM 所采用的方法,其核心思想是根据对象存活的不同生命周期将内存划分为不同的域,一般情况下将 GC 堆划分为老生代(Tenured/Old Generation)和新生代(Young Generation)。老生代的特点是每次垃圾回收时只有少量对象…...
SpringBoot多数据源实践:基于场景的构建、实现和事务一体化研究
1. 多数据源应用场景剖析 1.1 业务驱动的多数据源需求 数据量与业务复杂度引发的分库分表:在现代企业级应用中,随着业务的不断拓展和用户量的持续增长,数据量呈爆炸式增长。例如,在大型电商平台中,用户数据、订单数据…...
鸿蒙应用开发者基础
目录 判断题 单选题 多选题 判断题 1、 在http模块中,多个请求可以使用同一个httpRequest对象,httpRequest对象可以复用。(错误) 2、订阅dataReceiverProgress响应事件是用来接收HTTP流式响应数据。(错误࿰…...
Java面试第二山!《计算机网络》!
在 Java 面试里,计算机网络知识是高频考点,今天就来盘点那些最容易被问到的计算机网络面试题,帮你轻松应对面试,也方便和朋友们一起探讨学习。 一、HTTP 和 HTTPS 的区别 1. 面试题呈现 HTTP 和 HTTPS 有什么区别?在…...
2025最新Java面试题大全(整理版)2000+ 面试题附答案详解
很多 Java 工程师的技术不错,但是一面试就头疼,10 次面试 9 次都是被刷,过的那次还是去了家不知名的小公司。 问题就在于:面试有技巧,而你不会把自己的能力表达给面试官。 应届生:你该如何准备简历&#…...
低空经济:开启未来空中生活的全新蓝海
引言 随着科技的进步,我们不再仅仅依赖地面交通和传统物流。你是否曾幻想过,未来的某一天,快递、外卖可以像魔法一样直接从空中送到你手中?或者,你能乘坐小型飞行器,快速穿梭于城市之间,告别拥堵…...
【机器学习】线性回归与一元线性回归
【机器学习系列】 KNN算法 KNN算法原理简介及要点 特征归一化的重要性及方式线性回归算法 线性回归与一元线性回归 线性回归模型的损失函数 多元线性回归 多项式线性回归 线性回归与一元线性回归 V1.1线性回归问题线性方程的最优解一元线性回归一元线性回归的方程一元线性回归…...
MongoDB 7 分片副本集升级方案详解(上)
#作者:任少近 文章目录 前言:Mongodb版本升级升级步骤环境1.1环境准备1.2standalone升级1.3分片、副本集升级 前言:Mongodb版本升级 在开始升级之前,请参阅 MongoDB下个版本中的兼容性变更文档,以确保您的应用程序和…...
Fiori APP配置中的Semantic object 小bug
在配置自开发程序的Fiori Tile时,需要填入Semantic Object。正常来说,是需要通过事务代码/N/UI2/SEMOBJ来提前新建的。 但是在S4 2022中,似乎存在一个bug,即无需新建也能输入自定义的Semantic Object。 如下,当我们任…...
坑多多之AC8257 i2c1 rtc-pcf8563
pcf85163 ordering information Ordering information Package Description Version Marking code PCF85163T/1 SO8 ① SOT96-1 PF85163 PCF85163TS/1 TSSOP8 ② SOT505-1 85163 ①plastic small outline package; 8 leads;body width 3.9 mm ②plastic thin…...
制作一个项目用于研究elementUI的源码
需求:修改el-tooltip的颜色,发现传递参数等方法都不太好用,也可以使用打断点的方式,但也有点麻烦,因此打算直接修改源码,把组件逻辑给修改了 第一步下载源码 源码地址 GitHub - ElemeFE/element: A Vue.j…...
Docker高级篇
1.Mysql主从复制Docker版本 mysql主从复制原理 binlog 1.新建主服务器容器实例 docker run -d -p 3307:3306 --privilegedtrue \ -v /opt/mysql8.4.3/log:/var/log/mysql \ -v /opt/mysql8.4.3/conf:/etc/mysql/conf.d \ -v /opt/mysql8.4.3/data:/var/lib/mysql \ -e MYSQL…...
OSI 参考模型和 TCP/IP 参考模型
数据通信是很复杂的,很难在一个协议中完成所有功能。因此在制定协议时经常采用的思路是将复杂的数据通信功能由若干协议分别完成,然后将这些协议按照一定的方式组织起来。最典型的是采用分层的方式来组织协议,每一层都有一套清晰明确的功能和…...
rocketmq-netty通信设计-request和response
1、NettyRemotingServer启动分析 org.apache.rocketmq.remoting.netty.NettyRemotingServer#start public void start() {this.defaultEventExecutorGroup new DefaultEventExecutorGroup(nettyServerConfig.getServerWorkerThreads(),new ThreadFactory() {private AtomicI…...
初识计算机网络
从此篇我将开始网络新篇章! 1. 网络发展史 最初的计算机之间相互独立存在,每个计算机只能持有自己的数据,数据无法共享。此时的计算机为独立模式 随着时代的发展,越来越需要计算机之间互相通信,共享软件和数据&#x…...
kamailio常见问题解答
常见问题解答 本页面接受贡献,你必须通过注册表单创建一个用户账户: https://www.kamailio.org/wiki/start?doregister 如果你有一个适合收录进常见问题解答的问题,并且你不知道答案,那就添加这个问题,并将答案设置…...
Flask框架入门完全指南
一、初识Flask:轻量级框架的魅力 1.1 Flask框架定位 Flask作为Python最受欢迎的轻量级Web框架,以"微核心可扩展"的设计哲学著称。其核心代码仅约2000行,却支持通过扩展实现完整Web开发功能。这种设计使得开发者可以: …...
用deepseek学大模型05逻辑回归
deepseek.com:逻辑回归的目标函数,损失函数,梯度下降 标量和矩阵形式的数学推导,pytorch真实能跑的代码案例以及模型,数据,预测结果的可视化展示, 模型应用场景和优缺点,及如何改进解决及改进方法数据推导。…...
为什么要选择3D机器视觉检测
选择3D机器视觉检测的原因主要包括以下几点: 高精度测量 复杂几何形状:能够精确测量复杂的三维几何形状。 微小细节:可捕捉微小细节,适用于高精度要求的行业。全面数据获取 深度信息:提供深度信息,弥补2D视…...
CentOS上安装WordPress
在CentOS上安装WordPress是一个相对直接的过程,可以通过多种方法完成,包括使用LAMP(Linux, Apache, MySQL, PHP)栈或使用更现代的LEMP(Linux, Nginx, MySQL, PHP)栈。 我选择的是(Linux, Nginx…...
webshell通信流量分析
环境安装 Apatche2 php sudo apt install apache2 -y sudo apt install php libapache2-mod-php php-mysql -y echo "<?php phpinfo(); ?>" | sudo tee /var/www/html/info.php sudo ufw allow Apache Full 如果成功访问info.php,则环境安…...
高效高并发调度架构
以下是从架构层面为你提供的适合多核CPU、多GPU环境下API客户端、服务端高级调度,以实现高效并发大规模与用户交互的技术栈: 通信协议 gRPC:基于HTTP/2协议,具有高性能、低延迟的特点,支持二进制序列化(通…...
MYSQL下载安装及使用
MYSQL官网下载地址:https://downloads.mysql.com/archives/community/ 也可以直接在服务器执行指令下载,但是下载速度比较慢。还是自己下载好拷贝过来比较快。 wget https://dev.mysql.com/get/Downloads/mysql-5.7.38-linux-glibc2.12-x86_64.tar.gz 1…...
Python elasticsearch客户端连接常见问题整理
python 访问 elasticsearch 在python语言中,我们一般使用 pip install elasticsearch 软件包,来访问es服务器。 正确用法 本地安装elasticsearch时,应指定与服务端相同的大版本号: pip install elasticsearch7.17.0然后就可以…...
相得益彰,Mendix AI connector 秒连DeepSeek ,实现研发制造域场景
在当今快速发展的科技领域,低代码一体化平台已成为企业数字化转型的关键工具,同时,大型语言模型(LLM)如 DeepSeek 在自动生成代码和提供智能建议方面表现出色。 Mendix 于近期发布的 GenAI 万能连接器,目前…...
Python PyCharm DeepSeek接入
Python PyCharm DeepSeek接入 创建API key 首先进入DeepSeek官网,https://www.deepseek.com/ 点击左侧“API Keys”,创建API key,输出名称为“AI” 点击“创建",将API key保存,复制在其它地方。 在PyCharm中下…...
pytest测试专题 - 2.1 一种推荐的测试目录结构
<< 返回目录 1 pytest测试专题 - 2.1 一种推荐的测试目录结构 2 pytest 项目目录结构及文件功能 以下是典型 pytest 项目中常见的文件和目录结构及其功能的概述: 2.1 文件/目录结构 文件/目录功能描述test_ 文件* 主测试文件,命名通常以 test_…...
Dify本地安装
目录 方式一docker安装: 方式二源码安装: Dify本地安装可以用docker方式,和源码编译方式。 先到云厂商平台申请一台Centos系统云主机,网络选择海外,需要公网IP,再按一下流程操作: 方式一doc…...
MySQL、MariaDB 和 TDSQL 的区别
MySQL、MariaDB 和 TDSQL 是三种不同的数据库管理系统,它们在设计理念、功能、性能和使用场景上有一些显著的区别。 以下是对这三者的详细比较和介绍。 1. MySQL 概述 类型:关系型数据库管理系统(RDBMS)。开发者:最…...
Java 设计模式之桥接模式
文章目录 Java 设计模式之桥接模式概述UML代码实现 Java 设计模式之桥接模式 概述 桥接模式(Bridge):将抽象部分与它的实现部分分离,使它们都可以独立地变化。通过桥接模式,可以避免类爆炸问题,并提高系统的可扩展性。 UML 核心…...
【Linux】网络基础
目录 一、协议分层 (一)计算机网络 (二)协议分层 (三)OSI模型 (四)TCP/IP协议 二、网络传输过程 三、IP地址和MAC地址 (一)IP地址 (二&a…...