MobX 的多组件状态共享之道

Android

2023-09-26 21:48:05

在 Flutter 开发中，MobX 是一个广泛使用的状态管理库，它允许开发者轻松地在多个组件之间共享状态。然而，MobX 无法直接让上级组件与下级组件共享状态，因此我们需要借助其他方式来实现状态共享。

本文将深入探讨 3 种可用于 MobX 状态共享的方法：

使用 Provider
使用 GetX
使用 Riverpod

1. 使用 Provider

Provider 是一个流行的状态管理库，它提供了类似于 React 中 Context API 的功能。我们可以使用 Provider 来创建共享状态对象，并在整个组件树中访问和修改它。

以下是使用 Provider 实现 MobX 状态共享的步骤：

创建一个 MobX 存储类来管理共享状态。
使用 Provider.value 创建一个新的 Provider，并将 MobX 存储类作为参数传递。
在需要共享状态的组件中，使用 Consumer 组件来获取共享状态。

示例代码：

class SharedState extends MobxStore {
  // 定义共享状态变量
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Provider<SharedState>(
      create: (_) => SharedState(),
      child: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage();

  @override
  Widget build(BuildContext context) {
    final sharedState = Provider.of<SharedState>(context);

    return Scaffold(
      // 使用共享状态
    );
  }
}

2. 使用 GetX

GetX 是另一个流行的状态管理库，它提供了一种更简单的状态共享方式。它允许我们直接在组件中访问和修改共享状态，而无需使用额外的 Provider 组件。

以下是使用 GetX 实现 MobX 状态共享的步骤：

创建一个 MobX 存储类来管理共享状态。
使用 Get.put() 方法将 MobX 存储类添加到 GetX 依赖注入系统中。
在需要共享状态的组件中，使用 Get.find() 方法获取共享状态。

示例代码：

class SharedState extends MobxStore {
  // 定义共享状态变量
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Get.put(SharedState());
    return const MyHomePage();
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage();

  @override
  Widget build(BuildContext context) {
    final sharedState = Get.find<SharedState>();

    return Scaffold(
      // 使用共享状态
    );
  }
}

3. 使用 Riverpod

Riverpod 是一个轻量级状态管理库，它提供了类似于 Provider 的功能，但语法更简洁。它使用 Provider Scoped 来管理状态，从而使代码更加模块化和可测试。

以下是使用 Riverpod 实现 MobX 状态共享的步骤：

创建一个 MobX 存储类来管理共享状态。
使用 Provider.family 创建一个新的 Provider，并将 MobX 存储类作为参数传递。
在需要共享状态的组件中，使用 useProvider 钩子来获取共享状态。

示例代码：

class SharedState extends MobxStore {
  // 定义共享状态变量
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final sharedStateProvider = Provider.family<SharedState, int>((ref, scope) => SharedState());
    return ProviderScope(
      child: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage();

  @override
  Widget build(BuildContext context) {
    final sharedState = useProvider<SharedState>(context);

    return Scaffold(
      // 使用共享状态
    );
  }
}