【小程序】全局数据共享

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

全局数据共享

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



相关文章
|
1月前
|
存储 小程序 JavaScript
【微信小程序】-- 全局数据共享 - MobX(四十三)
【微信小程序】-- 全局数据共享 - MobX(四十三)
|
JSON 小程序 JavaScript
【微信小程序】——Mobx全局数据共享和分包
【微信小程序】——Mobx全局数据共享和分包
【微信小程序】——Mobx全局数据共享和分包
|
小程序 前端开发 JavaScript
微信小程序--》小程序—全局数据共享和分包
⚓经过web前端开发的学习,相信大家对于前端开发有了一定深入的了解,今天我开设了微信小程序,主要想从移动端开发方向进一步发展,而对于我来说写移动端博文的第一站就是小程序开发,希望看到我文章的朋友能对你有所帮助。
272 0
微信小程序--》小程序—全局数据共享和分包
|
8天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的小程序疫苗预约网站系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的小程序疫苗预约网站系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
3天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的智慧农业小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的智慧农业小程序的详细设计和实现(源码+lw+部署文档+讲解等)
19 6
|
3天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的在线答题微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线答题微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
18 3
|
3天前
|
小程序 定位技术
uniapp微信小程序地图全屏显示配送范围
uniapp微信小程序地图全屏显示配送范围
10 1
|
6天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的校园导航微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的校园导航微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
24 4
|
8天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的课堂考勤微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的课堂考勤微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
8天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的答题小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的答题小程序的详细设计和实现(源码+lw+部署文档+讲解等)