【小程序】全局数据共享

左手的ㄟ右手 2024-03-30 12:10 69阅读 0赞

**目录**

全局数据共享

1. 什么是全局数据共享

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

全局数据共享 - MobX

1. 安装 MobX 相关的包

2. 创建 MobX 的 Store 实例

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

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

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

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

## 全局数据共享 ##

### 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][]

[2a6620f4b4834ab7b787aec1e6e9af2e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/1919ae06cf844465bcdf7fc19c1b4b0c.png
[9f8415beff264d1bbf50a96eac753d42.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e8b35e2096bf4537bf8d3344e9b4b722.png
[413e491fa03e4259846add1a0a58b56a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e20d7f970bef425984db57d4223aa99e.png
[9a1b5197f71f412c83ac7737e77cad35.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/ca443cdaa68b4278abca3b663d46cbca.png
[69fc41f98bff40298368281f3f1391ff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/7400661c43574a85b609356796bc49aa.png
[8fdf038fb901472890688125725ac2c4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/822b1bd7816142f49616366fe5c56195.png
[a8ccb8302d494a0f95669884861cfd0a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/0b762dae5edf4affbf4f4cc016230e1c.png
[655561b5fa594ab998f34b80792cce0b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/4225aac8294242229524b27d3b4cc70f.png