小程序-全局数据共享

目录

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

效果如下:

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

相关推荐
WangMing_X15 分钟前
C# XML操作演示示例项目(附源码完整)
开发语言·microsoft·php
xw517 分钟前
前端跨标签页通信方案(下)
前端·javascript
普通网友24 分钟前
C++模块化设计原则
开发语言·c++·算法
864记忆26 分钟前
Qt c++的基础语法有哪些?
开发语言·c++·qt
江公望27 分钟前
Qt QHostInfo::lookupHost()函数,10分钟讲清楚
开发语言·qt·qml
没有bug.的程序员1 小时前
Spring 全家桶在大型项目的最佳实践总结
java·开发语言·spring boot·分布式·后端·spring
zzlyx991 小时前
IoTSharp前端VUE采用npm run build编译提示require() of ES Module 出错
前端·vue.js·npm
在坚持一下我可没意见1 小时前
Spring IoC 入门详解:Bean 注册、注解使用与 @ComponentScan 配置
java·开发语言·后端·spring·rpc·java-ee
全栈技术负责人1 小时前
拒绝“无法复现”:前端全链路日志排查实战手册
前端·全链路·问题排查思路
加洛斯1 小时前
前端小知识003:JS中 == 与 === 的区别
开发语言·前端·javascript