小程序学习笔记：使用 MobX 实现全局数据共享，实例创建、计算属性与 Actions 方法

在小程序开发过程中，组件间的数据共享是一个常见且关键的问题。今天，我们就来深入探讨一下如何在小程序中实现全局数据共享，借助 MobX 相关的包，让数据管理变得更加高效便捷。

什么是全局数据共享

全局数据共享，也被称为状态管理，主要用于解决组件或页面之间的数据共享难题。在实际开发场景里，如果不使用全局数据共享机制，当我们需要在不同组件或页面间传递数据时，操作会非常繁琐。例如，从一个子组件向多层上级组件传递数据，需要逐层传递，这不仅增加了代码的复杂性，还容易出错。

而引入全局数据共享后，一切都变得简单起来。我们可以借助一个 "store"（数据仓库）来存储所有需要共享的数据。无论哪个组件或页面需要使用这些数据，直接从 store 中获取即可；如果要共享新的数据，直接在组件或页面中往 store 里挂载就行，无需再在各个组件或页面之间层层传递数据。

在众多开发框架中，不同框架有各自推荐的数据共享方案。比如在 Vue 项目里，通常推荐使用 Vuex 进行全局数据共享；在 React 项目中，Redux、MobX 等都是常用的方案 。

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

在小程序开发中，我们可以利用mobx-mini-program和mobx-mini-program-bindings这两个包来实现全局数据共享。这两个包分工明确，相互配合，共同完成数据共享的功能。

• mobx-mini-program：它的主要职责是创建 store 实例对象。通过这个包，我们能够创建一个全局的数据共享池 ------store，在其中存储需要共享的数据，并且还可以定义一些方法，用于修改 store 里的数据。
• mobx-mini-program-bindings：这个包就像是一座桥梁，负责将 store 里面的共享数据和方法，绑定到组件或页面中，让组件或页面能够方便地使用这些数据和调用相关方法。

在小程序中安装 MobX 相关的包

接下来，我们详细介绍一下在小程序项目中安装这两个包的具体步骤。

1. 安装命令及版本指定：在项目目录中，运行以下命令进行安装：

   npm install mobx-mini-program@4.13.2 mobx-mini-program-bindings@1.2.1 --save

这里要特别注意，包名较长，输入时务必仔细，避免出错。同时，指定版本号可以确保项目的稳定性，避免因包的版本更新导致兼容性问题。

2. 安装后的构建操作：安装完成后，还不能直接在小程序中使用这两个包，因为还需要进行构建操作。首先，删除mini_program_npm目录。你可以在项目目录中找到该目录，右键点击选择 "删除" 并移动到回收站。

删除完成后，在微信开发者工具中，点击 "工具" 菜单里的 "构建 npm" 选项，重新进行构建。构建完成后，在项目根目录下会生成一个mini_program_npm文件夹，里面就包含了我们刚刚安装的mobx相关的两个包。

下面，我们通过一段简单的代码示例，来看看如何在小程序中使用这两个包进行数据共享。

示例代码

1. 创建 store 实例（使用mobx-mini-program） ：在项目的store文件夹下，创建一个index.js文件，代码如下：

   import { makeObservable, observable, action } from 'mobx-mini-program';

   class Store {
   constructor() {
   // 定义共享数据
   this.sharedData = 0;
   // 使数据可观察
   makeObservable(this, {
   sharedData: observable,
   // 定义修改数据的方法
   updateSharedData: action
   });
   }
   // 修改共享数据的方法
   updateSharedData = (newValue) => {
   this.sharedData = newValue;
   }
   }

   // 创建store实例
   const store = new Store();
   export default store;

2. 在页面中使用 store 数据和方法（使用mobx-mini-program-bindings） ：在页面的js文件中，引入并使用 store，代码如下：

收起

javascript

import { createPage } from'mobx-mini-program-bindings';
import store from '../../store/index';
 
createPage({
    // 映射store中的数据到页面
    mapStateToProps: (store) => ({
        sharedData: store.sharedData
    }),
    // 映射store中的方法到页面
    mapActionsToProps: (store) => ({
        updateSharedData: store.updateSharedData
    }),
    onLoad() {
        // 页面加载时，打印共享数据
        console.log(this.data.sharedData);
        // 修改共享数据
        this.updateSharedData(10);
        console.log(this.data.sharedData);
    }
});

在上述代码中，我们首先创建了一个Store类，定义了共享数据sharedData和修改数据的方法updateSharedData。然后在页面中，通过mobx-mini-program-bindings的createPage方法，将 store 中的数据和方法映射到页面中，方便在页面中使用。

============================================================

在微信小程序开发过程中，状态管理是一个至关重要的环节。MobX 作为一种状态管理库，为小程序开发提供了便捷高效的状态管理方案。今天，就让我们一起深入学习在微信小程序项目中，如何创建 MobX 的 store 实例，定义计算属性以及使用 Actions 方法修改 store 中的数据。

创建 MobX Store 实例

项目结构搭建

首先，我们需要在项目根目录下创建一个名为store的文件夹，这个文件夹专门用于存放所有与 MobX 相关的 js 文件。接着，在store文件夹中新建一个store.js文件，这个文件将承担创建 store 实例对象的重任。

代码实现

在store.js文件中，我们通过以下步骤来创建 store 实例：

1. 导入必要的包 ：使用 ES6 的按需导入语法，从mobx-miniprogram包中导入observable方法。这个方法是创建 store 实例的关键工具。

   import { observable } from 'mobx-miniprogram';

2. 创建 store 实例并导出 ：调用observable方法，并传入一个配置对象。该方法的返回值就是我们需要的 store 实例对象。然后，使用 ES6 的导出语法将其导出，方便其他模块使用。

   const store = observable({
   // 这里可以初始化共享数据
   numberA: 1,
   numberB: 2
   });

   export default store;

在上述代码中，我们不仅创建了 store 实例，还初始化了两个共享数据numberA和numberB，分别赋值为 1 和 2。这样，其他模块在导入这个 store 实例后，就可以直接使用这些共享数据了。

定义计算属性

在小程序的 store 中，计算属性是一种非常实用的功能。它的值依赖于其他数据的变化，当依赖的数据发生改变时，计算属性会自动重新计算。

计算属性的概念与应用场景

假设我们有两个共享数据numberA和numberB，现在我们希望得到这两个数字的和。这种情况下，定义一个计算属性sum就非常合适。sum的值会随着numberA或numberB的变化而自动更新。

代码实现

在store.js文件中，我们按照以下方式定义计算属性：

1. 定义计算属性方法 ：定义一个方法，方法名即为计算属性的名字。在这个方法前加上get修饰符，表明这个计算属性是只读的，其值会根据依赖数据自动计算，无需手动赋值。

   const store = observable({
   numberA: 1,
   numberB: 2,
   get sum() {
   return this.numberA + this.numberB;
   }
   });

在上述代码中，sum就是我们定义的计算属性。在其方法内部，通过return返回numberA和numberB相加的结果。这样，当其他模块访问store.sum时，就能得到最新的计算结果。

定义 Actions 方法修改 Store 数据

为了保证数据的安全性和可维护性，我们不允许外界直接修改 store 中的数据，而是通过定义 Actions 方法来实现数据的修改。

Actions 方法的作用与原理

Actions 方法就像是 store 的 "守护者"，外界只能通过调用这些方法来间接修改 store 中的数据。例如，我们可以定义updateNumber1方法专门用来修改numberA字段的值，updateNumber2方法专门用来修改numberB字段的值。

代码实现

在store.js文件中，定义 Actions 方法的步骤如下：

1. 导入 action 方法 ：从mobx-miniprogram包中按需导出action方法。

   import { observable, action } from'mobx-miniprogram';

2. 定义 Actions 函数 ：与数据字段同级声明 Actions 方法，并使用action方法包裹具体的修改函数。在函数内部，根据传入的参数来修改 store 中的数据。

   const store = observable({
   numberA: 1,
   numberB: 2,
   get sum() {
   return this.numberA + this.numberB;
   },
   updateNumber1: action((step) => {
   this.numberA += step;
   }),
   updateNumber2: action((step) => {
   this.numberB += step;
   })
   });

在上述代码中，updateNumber1和updateNumber2就是我们定义的 Actions 方法。当外界调用store.updateNumber1(step)时，numberA的值就会根据传入的step值进行自增；同理，调用store.updateNumber2(step)时，numberB的值也会相应地进行修改。