微信小程序使用 mobx-miniprogram 实现全局状态管理教程

前言

在深入探讨具体方案之前，我们先思考一个问题：在微信小程序开发中，实现全局状态共享有哪些可行的途径？

目前业界已知且常用的实现方式主要包括以下几种：

globalData

本地缓存

mobx-miniprogram

westore

globalData 和缓存方案虽然广为人知，但随着项目规模扩大和迭代深入，往往会导致代码结构混乱，维护成本显著增加。

针对上述痛点，mobx-miniprogram 和 westore 等状态管理库应运而生。鉴于近期公司项目实际采用了 mobx-miniprogram，本文将结合具体业务场景，深入解析 mobx-miniprogram 的实现原理，探讨 mobx-miniprogram 如何高效解决小程序全局状态管理问题。

若文中存在理解偏差，欢迎在评论区指正交流。

使用指南

mobx-miniprogram 的核心功能简洁明确，即创建 Store。然而，要将 Store 中的数据映射到页面或组件中，必须借助 mobx-miniprogram-bindings 库。该库的作用类似于 React-Redux，作为连接 Store 与页面/组件的桥梁。

官方提供了示例代码片段供参考。

第一步：安装依赖包

npm install --save mobx-miniprogram mobx-miniprogram-bindings
yarn add mobx-miniprogram mobx-miniprogram-bindings

第二步：构建 npm 包

在微信开发者工具中，依次点击“工具”菜单下的“构建 npm”选项。

第三步：创建 MobX Store

新建一个 JavaScript 文件，此处以购物车功能为例进行演示。

我们需要实现购物车内商品状态与数量的全局共享，确保一处修改，全局同步更新。

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

从 mobx-miniprogram 包中导入 observable 和 action 两个核心方法。

observable：用于创建 Store 的实例对象，定义响应式数据。
action：用于包裹修改 Store 数据的函数，确保数据变更受控。

// 创建实例对象
export const chat = observable({
    // 定义两个全局参数
    chatList: [], // 购物车商品
    totalPrice: 0, // 购物车商品总价
    // 初始化购物车
    initChat: action(function (list) {
        this.chatList = list
    }),
    // 修改价格
    setPrice: action(function (price) {
        this.totalPrice = price
    }),
})

第四步：使用与更新 Store

Store 在 Page 和 Component 中的应用方式存在差异，需分别处理。

在 Page 中使用

在 Page 页面中，我们需要使用 mobx-miniprogram-bindings 来建立 Store 与页面之间的连接。

// 从 mobx-miniprogram-bindings 包中导入 `createStoreBindings` 方法
import { createStoreBindings } from "mobx-miniprogram-bindings"
import chat from "../../models/chat"
Page({
   // onLoad 生命周期钩子中使用createStoreBindings，把指定 store 中的数据字段和更新函数映射到当前页面
    onLoad() {
        this.chatStore = createStoreBindings(this, {
          store: chat,
          fields: ['chatList', 'totalPrice'],
          actions: ['initChat']
        })
      },
      // 
      fu() {
        let chat = [
            {
                name: 'XXXX',
                price: '111'
            },
            {
                name: 'XXXX',
                price: '111'
            }
        ]
        this.initChat(chat)
      },
      // 页面卸载时,销毁当前页面的 store 绑定
      onUnload() {
        this.chatStore.destroyStoreBindings();
      }
    })

调用 createStoreBindings 方法会返回一个包含 updateStoreBindings 和 destroyStoreBindings 两个函数的对象，并将其赋值给当前页面实例的 storeBindings 属性。

因此，当页面卸载（onUnload）时，必须调用 destroyStoreBindings 来销毁当前页面的 Store 绑定，从而避免内存泄露。

在 Component 中使用与更新 Store

与 Page 不同，在组件中使用 Store 需结合 behaviors（类似于 Vue 中的混入机制）方式。

从 mobx-miniprogram-bindings 包中导入 storeBindingsBehavior 方法，并在组件选项定义中指定 storeBindings 字段。

import { storeBindingsBehavior } from "mobx-miniprogram-bindings"
import chat from "../../models/chat"
Component({
   behaviors: [storeBindingsBehavior],
   storeBindings: {
      store: chat,
      fields: ['totalPrice'],
      actions: ['setPrice']
   }，
   methods: {
     fn() {
       this.setPrice(666)
     }
   }
})

此外，storeBindings 也可以设置为数组形式，从而支持同时绑定多个 store。

import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: [
    {
      /* 绑定配置 1 */
    },
    {
      /* 绑定配置 2 */
    },
  ],
});

延迟更新与立即更新机制

为了优化性能，Store 中的字段被更新后，并不会立即同步到 this.data 上，而是推迟到下一个 wx.nextTick 调用时才执行更新。这种机制能显著减少 setData 的调用频率，提升渲染效率。

若需强制立即更新，可调用以下方法：

在组件中调用：this.updateStoreBindings()
在页面中调用：this.storeBindings.updateStoreBindings()

this.setPrice(666)
this.storeBindings.updateStoreBindings()
console.log(this.data.totalPrice)

Store 模块化划分

随着项目规模增长和功能丰富，状态管理模块也会增多。为防止单一 Store 臃肿，建议根据功能模块或职责划分多个独立的 Store。

例如，在 store 目录下可划分以下模块：

userStore.js
cartStore.js
orderStore.js

在页面或组件中，只需导入并使用特定的 Store 模块，将其作为 store 字段传递给 createStoreBindings 或 storeBindingsBehavior 即可。

    createStoreBindings(this, {store: xxx})
    storeBindings: {
      store: xxx,
    }

以上内容即为微信小程序实现全局状态管理的详细整理，更多关于小程序全局状态管理的资料，敬请关注本站其他相关文章。

微信小程序全局状态管理：mobx-miniprogram 实战指南

前言