小程序-全局数据共享

目录

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 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 中的成员

效果如下:

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

相关推荐
peak_chan几秒前
通过vue-virtual-scroller封装虚拟滚动el-select
前端·javascript·vue.js
小李子呢02119 分钟前
前端八股Vue(7)---computed计算属性和watch侦听器
前端·javascript·vue.js
CCIE-Yasuo16 分钟前
Win11-Microsoft Edge使用起来CPU飙升以及卡顿问题解决
前端·microsoft·edge·排故
吴声子夜歌18 分钟前
ES6——对象的扩展详解
开发语言·javascript·es6
aq553560025 分钟前
编程语言对比:从汇编到PHP的四大层级解析
开发语言·汇编·php
kyle~30 分钟前
工程数学---Eigen库(C++唯一标配线性代数库)
开发语言·c++·线性代数
CoderCodingNo32 分钟前
【GESP】C++五、六级练习题 luogu-P1886 【模板】单调队列 / 滑动窗口
开发语言·c++·算法
好家伙VCC39 分钟前
**发散创新:基于Rust的轻量级权限管理库设计与开源许可证实践**在现代分布式系统中,**权限控制(RBAC
java·开发语言·python·rust·开源
xiaoshuaishuai844 分钟前
C# 方言识别
开发语言·windows·c#
John.Lewis1 小时前
C++进阶(6)C++11(2)
开发语言·c++·笔记