【小程序】全局数据共享

简介: 【小程序】全局数据共享

全局数据共享

1. 什么是全局数据共享

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

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

2a6620f4b4834ab7b787aec1e6e9af2e.png

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


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


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


mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法,绑定到组件或页面中使用


9f8415beff264d1bbf50a96eac753d42.png


全局数据共享 - MobX

1. 安装 MobX 相关的包

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


413e491fa03e4259846add1a0a58b56a.png

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

2. 创建 MobX 的 Store 实例

9a1b5197f71f412c83ac7737e77cad35.png

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

69fc41f98bff40298368281f3f1391ff.png


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


8fdf038fb901472890688125725ac2c4.png

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


a8ccb8302d494a0f95669884861cfd0a.png

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

655561b5fa594ab998f34b80792cce0b.png



相关文章
|
2月前
|
存储 安全 小程序
在微信小程序中使用 Vant 时如何确保数据的安全?
在微信小程序中使用 Vant 时如何确保数据的安全?
31 1
|
21天前
|
小程序 JavaScript 开发工具
|
4月前
|
小程序 API 数据库
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
77 0
|
25天前
|
缓存 小程序 UED
如何利用小程序的生命周期函数实现数据的加载和更新?
如何利用小程序的生命周期函数实现数据的加载和更新?
50 4
|
25天前
|
移动开发 小程序 数据可视化
微信小程序可视化开发工具之动态数据
微信小程序可视化开发工具之动态数据
34 3
|
3月前
|
缓存 小程序 数据库
小程序页面之间(传值)传递数据的方法
小程序页面之间(传值)传递数据的方法
179 63
|
2月前
|
小程序 开发者
微信小程序之网络数据请求 wx:request的简单使用
这篇文章介绍了微信小程序中如何使用wx.request进行网络数据请求,包括请求的配置、请求的格式以及如何在开发阶段关闭请求的合法检验。
微信小程序之网络数据请求 wx:request的简单使用
|
2月前
|
小程序 JavaScript 开发工具
微信小程序——全局数据共享
微信小程序——全局数据共享
|
3月前
|
小程序 JavaScript 前端开发
微信小程序开发时数据是否是双向数据绑定的
微信小程序开发时数据是否是双向数据绑定的
|
3月前
|
小程序 JavaScript Java
微信小程序+SpringBoot接入后台服务,接口数据来自后端
这篇文章介绍了如何将微信小程序与SpringBoot后端服务进行数据交互,包括后端接口的编写、小程序获取接口数据的方法,以及数据在小程序中的展示。同时,还涉及到了使用Vue搭建后台管理系统,方便数据的查看和管理。
微信小程序+SpringBoot接入后台服务,接口数据来自后端