小程序-全局数据共享

目录

1.什么是全局数据共享

[2. 小程序中的全局数据共享方案](#2. 小程序中的全局数据共享方案)

MboX

[1. 安装 MobX 相关的包](#1. 安装 MobX 相关的包)

[2. 创建 MobX 的 Store 实例](#2. 创建 MobX 的 Store 实例)

[3. 将 Store 中的成员绑定到页面中](#3. 将 Store 中的成员绑定到页面中)

[4. 在页面上使用 Store 中的成员](#4. 在页面上使用 Store 中的成员)

[5. 将 Store 中的成员绑定到组件中](#5. 将 Store 中的成员绑定到组件中)

[6. 在组件中使用 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 [email protected] [email protected]

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

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

2. 创建 MobX 的 Store 实例

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

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

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

调试器输出:

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

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

示例代码如下:

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

效果如下:

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

相关推荐
周圣贤2 小时前
九尾狐编程语言新算法“超维时空演算体”
开发语言·算法
睡觉z2 小时前
Haproxy搭建web群集
前端
CaracalTiger3 小时前
HTTP 协议的基本概念(请求/响应流程、状态码、Header、方法)问题解决方案大全
开发语言·网络·python·深度学习·网络协议·http·pip
随缘而动,随遇而安3 小时前
第八十二篇 大数据开发基础:树形数据结构深度解析与实战指南(附创新生活案例)
大数据·开发语言·数据结构
codingandsleeping3 小时前
重读《你不知道的JavaScript》(上)- this
前端·javascript
西猫雷婶3 小时前
python学智能算法(十三)|机器学习朴素贝叶斯方法进阶-简单二元分类
开发语言·人工智能·python·深度学习·机器学习·矩阵·分类
武子康4 小时前
Java-49 深入浅出 Tomcat 手写 Tomcat 实现【02】HttpServlet Request RequestProcessor
java·开发语言·后端·学习·spring cloud·tomcat
张朝阳的博客4 小时前
哈夫曼树Python实现
开发语言·python
阑梦清川4 小时前
C#建立与数据库连接(版本问题的解决方案)踩坑总结
开发语言·数据库·c#
孩子 你要相信光5 小时前
前端如何通过 Blob 下载 Excel 文件
前端·javascript