当前位置: 首页 > article >正文

小程序-全局数据共享

目录

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.kler.cn/news/330873.html

相关文章:

  • 【Linux系统编程】权限
  • 广联达 Linkworks办公OA Service.asmx接口存在信息泄露漏洞
  • LeetCode 704. 二分查找
  • 2024年09月CCF-GESP编程能力等级认证C++编程一级真题解析
  • @antv/x6 嵌入结点到父节点中时,进行检测,查看当前节点是否是父结点,如果是父结点,不可以嵌入到父结点中,实现方法一。
  • 【AIGC】内容创作——AI文字、图像、音频和视频的创作流程
  • PHP反序列化7(字符串逃逸)
  • 《OpenCV 计算机视觉》—— Harris角点检测、SIFT特征检测
  • 用systemd 来控制 qt 程序的启动, 停止 . 解决 qt.qpa.xcb: could not connect to display 问题
  • 工程师 - 如何配置DNS服务器
  • 基于yolov8调用本地摄像头并将读取的信息传入jsonl中
  • SpringBoot框架下的社区医院信息系统开发
  • Stream流的终结方法(二)——collect
  • 2024大二上js高级+ES6学习9.29(深/浅拷贝,正则表达式,let/const,解构赋值,箭头函数,剩余参数)
  • 并集运算的线段树维护方式
  • c++就业磁盘链式b树与b+树
  • 3. 将GitHub上的开源项目导入(clone)到本地pycharm上——深度学习·科研实践·从0到1
  • 滚雪球学MySQL[7.1讲]:安全管理
  • 【笔记】数据结构12
  • Dubbo和Http的调用有什么区别