小程序-全局数据共享

目录

1.什么是全局数据共享

2. 小程序中的全局数据共享方案

MboX

1. 安装 MobX 相关的包

2. 创建 MobX 的 Store 实例

3. 将 Store 中的成员绑定到页面中

4. 在页面上使用 Store 中的成员

5. 将 Store 中的成员绑定到组件中

6. 在组件中使用 Store 中的成员


1.什么是全局数据共享

全局数据共享(又叫做:状态管理)是为了解决组件之间数据共享的问题。

开发中常用的全局数据共享方案有:Vuex、Redux、MobX 等。

2. 小程序中的全局数据共享方案

在小程序中,可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。其中:

mobx-miniprogram 用来创建 Store 实例对象

mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法,绑定到组件或页面中使用(相当于是桥梁,连接了store和每个包的关系)

MboX

1. 安装 MobX 相关的包

在项目中运行如下的命令,安装 MobX 相关的包:

npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

注意:MobX 相关的包安装完毕之后,记得删除 miniprogram_npm 目录后重新构建 npm

若miniprogram_npm目录小出现如下包,即构建成功:

2. 创建 MobX 的 Store 实例

3. 将 Store 中的成员绑定到页面

4. 在页面上使用 Store 中的成员

通过data-step决定加一还是减一

调试器输出:

调用updateNum1()方法实现numA自增加一和自增减一

5. 将 Store 中的成员绑定到组件

示例代码如下:

6. 在组件中使用 Store 中的成员

效果如下:

按下按钮则可同时实现自增加一或自增减一

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

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

相关文章

Python 语言学习——应用1.2 数字图像处理(第二节,变换)

目录 1.基础知识 1.图像几何变换概念 2.图像几何变换方式 3.插值运算 4.几何变换步骤 2.各类变换 1.位置变换 2.形状变换 3.代数运算 3.实战演练 1.基础知识 1.图像几何变换概念 在图像处理过程中,为了观测需要,常常需要对 图像进行几何变换&am…

Kali或Debian系统安装JDK1.8保姆级教程

一、下载JDK1.8 先到Oracle的官网下载JDK1.8 Java Archive | Oraclehttps://www.oracle.com/java/technologies/downloads/archive/Java Archive Downloads - Java SE 8

【springboot】整合沙箱支付

目录 1. 配置沙箱应用环境2. 配置springboot项目1. 引入依赖2. 配置文件注册下载ngrok 3. 创建支付宝支付服务类4. 支付界面模板5. 控制类实现支付6. 测试 1. 配置沙箱应用环境 使用支付宝账号登录到开放平台控制台。 使用支付宝登录后,看到以下页面,下…

云计算身份认证与访问控制(Cloud Computing Identity Authentication and Access Control)

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:Linux运维老纪的首页…

AHT10原理讲解(I2C驱动)-基于江科大源码开发

一、原理图 根据数据手册中的要求(以上两图),可以看出SDA和SCL接主芯片的引脚就可以,但是注意我们在接的过程中,给了两个上拉电阻。 上拉电阻的作用: 提高抗干扰能力:适当的上拉电阻值可以帮助…

论文阅读笔记-LogME: Practical Assessment of Pre-trained Models for Transfer Learning

前言 在NLP领域,预训练模型(准确的说应该是预训练语言模型)似乎已经成为各大任务必备的模块了,经常有看到文章称后BERT时代或后XXX时代,分析对比了许多主流模型的优缺点,这些相对而言有些停留在理论层面,可是有时候对于手上正在解决的任务,要用到预训练语言模型时,面…

数据库三大范式

第一范式(1NF) 确保每个列中的数据是不可再分的。即,每个列只能包含一个值,而不是一个列表或数组。 每个列有多个数据的要拆成多个表。 错误: 正确: 第二范式 (2NF) 在第一范式的基…

探索Spring Boot:实现“衣依”服装电商平台

1系统概述 1.1 研究背景 如今互联网高速发展,网络遍布全球,通过互联网发布的消息能快而方便的传播到世界每个角落,并且互联网上能传播的信息也很广,比如文字、图片、声音、视频等。从而,这种种好处使得互联网成了信息传…

数据结构与算法——Java实现 30.合并多个有序链表 小顶堆实现

后来我们都走了很久,远到提及往事时, 总会加上once upon a time —— 24.10.6 23. 合并 K 个升序链表 给你一个链表数组,每个链表都已经按升序排列。 请你将所有链表合并到一个升序链表中,返回合并后的链表。 示例 1&#xff1…

【EXCEL数据处理】000010 案列 EXCEL文本型和常规型转换。使用的软件是微软的Excel操作的。处理数据的目的是让数据更直观的显示出来,方便查看。

前言:哈喽,大家好,今天给大家分享一篇文章!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏关注哦 💕 目录 【EXCEL数据处理】000010 案列 EXCEL单元格格式。EXCEL文本型和常规型转…

推荐一个可以把PDF样本册转换为翻页电子书的网站

​随着互联网的普及,越来越多的企业和个人开始意识到线上展览的重要性。如何将实体样本册转化为线上版本,让更多人了解和欣赏自己的产品与服务? 一、网站简介 这款PDF样本册免费上传网站名为“FLBOOK”,致力于为广大用户提供便捷…

构建 10 万卡 GPU 集群的技术挑战

构建 10 万卡 GPU 集群的技术挑战 摘要 揭示AI训练集群关键基础设施挑战,探讨突破现有AI瓶颈的必要性与10万GPU集群(如OpenAI、Meta)建设所面临挑战与需求。 构建网络拓扑,需权衡多层交换机成本、带宽与维护。本文对比Ethernet与…

【IEEE PDF eXpress】格式不对

目录 一、问题二、解决方法 一、问题 word的文档,用IEEE PDF eXpress网站生成pdf后,提交论文出现错误: Document validation failed due to the following errors: Content exceeds IEEE template margins for its format (Page 1:Bottom).…

螺蛳壳里做道场:老破机搭建的私人数据中心---Centos下Docker学习04(环境准备)

4 创建docker容器 4.1创建网络 [rootlocalhost wutool]# docker network create -d macvlan --subnet192.168.137.0/24 --gateway192.168.137.2 --ip-range192.168.137.0/24 -o parentens33 nat 52af11381bfd655d175e4168265b2a507793e8fe48f119db846949ffd4dd27de [rootlocal…

【JavaWeb】javaweb目录结构简介【转】

以上图说明: bbs目录代表一个web应用bbs目录下的html,jsp文件可以直接被浏览器访问WEB-INF目录下的资源是不能直接被浏览器访问的web.xml文件是web程序的主要配置文件所有的classes文件都放在classes目录下jar文件放在lib目录下

Stream流的终结方法(二)——collect

1.Stream流的终结方法 2. collect方法 collect方法用于收集流中的数据放到集合中去,可以将流中的数据放到List,Set,Map集合中 2.1 将流中的数据收集到List集合中 package com.njau.d10_my_stream;import java.util.*; import java.util.f…

鸿蒙开发(NEXT/API 12)【管理应用与Wear Engine服务的连接状态】手机侧应用开发

监测应用与Wear Engine服务的连接状态 华为运动健康App在后台停止服务(如功耗过高),从而导致应用与Wear Engine服务的连接状态发生变化。对于类似这种不确定的断开情况,开发者可以通过本功能特性了解当前应用和Wear Engine的连接…

五子棋双人对战项目(3)——匹配模块

目录 一、分析需求 二、约定前后端交互接口 匹配请求: 匹配响应: 三、实现游戏大厅页面(前端代码) game_hall.html: common.css: game_hall.css: 四、实现后端代码 WebSocketConfig …

初识算法 · 双指针(2)

目录 前言: 盛最多水的容器 题目解析: 算法原理: 算法编写: 有效三角形的个数 题目解析: 算法原理: 算法编写: 前言: 本文介绍两个题目,盛最多水的容器和有效三…