从零开始学 MobX Store：简化 React 数据管理

学习如何使用 MobX Store 在 React 应用中实现全局状态管理。本文通过简单的购物车功能示例，帮助你理解 MobX Store 的基本概念、使用方法以及如何高效共享和管理数据，解决多组件间的数据同步问题。适合所有想提升 React 开发效率的开发者。

文章目录 

• 什么是 MobX Store？

  • 先理解问题
  • MobX Store 提供哪些功能？

• MobX 的两种写法

  • 1. 装饰器写法（旧版本常见）
  • 2. makeObservable 写法（新版本推荐）

• 一个简单的例子

  • 1. 首先安装必要的包
  • 2. 创建一个 Store
  • 3. 在 React 应用中使用 Store
  • 4. 创建计数器组件
• 工作原理解释
• 实际应用举例
• 最佳实践
• 总结

你是否遇到过这样的业务需求：在开发网页时，需要在多个不同的地方共享和修改同一个数据？比如用户的登录状态、购物车商品数量，或者一个弹窗的显示/隐藏状态？这种场景使用 MobX Store 也许会是一个不错的解决方案。

本文用最简单的方式，一步步理解什么是 MobX Store，以及如何使用它。

什么是 MobX Store？

先理解问题

假设正在开发一个简单的购物网站。网站上有这些元素：

• 顶部导航栏显示购物车商品数量
• 商品列表页面可以添加商品到购物车
• 购物车页面显示所有已添加的商品

如果不使用任何状态管理工具，你可能会这样做：

// 在全局变量中存储购物车数据
let cartItems = [];

// 在添加商品按钮的点击事件中
function addToCart(product) {
  cartItems.push(product);
  // 然后手动更新所有需要显示购物车数据的地方
  updateNavBar();
  updateCartPage();
}

// 在每个需要显示数据的地方都写更新函数
function updateNavBar() {
  document.getElementById("cart-count").textContent = cartItems.length;
}

function updateCartPage() {
  const cartList = document.getElementById("cart-list");
  cartList.innerHTML = cartItems
    .map((item) => `
${item.name}
`)
    .join("");
}

这种方式有几个明显的问题：

1. 代码分散，难以维护
2. 每次数据变化都需要手动更新所有相关的显示
3. 容易遗漏某些地方的更新

MobX Store 提供哪些功能？

MobX Store 就是为了解决这些问题而生的。它就像一个集中的数据仓库，具有以下特点：

1. 统一管理数据
2. 自动追踪数据变化
3. 自动更新界面

MobX 的两种写法

在开始之前，需要说明 MobX 有两种常见的写法：装饰器写法和 makeObservable 写法。

阅读全文：什么是MobX Store？有何用途？前端数据状态管理从入门到实践 - 阿小信的博客