Flutter中不使用FutureBuilder正确初始化MobX异步Store的方法

核心思路是把异步逻辑完全封装在Store内部，页面只负责监听Store的状态（加载中、数据就绪、错误）来渲染UI，既保证视图与逻辑分离，又能优雅处理异步初始化。以下是几种简洁的实现方案：

方案1：Store封装异步初始化方法，结合页面生命周期触发 #

在MobX Store里定义带状态控制的异步初始化方法，页面通过合适的生命周期钩子触发执行，UI根据Store的状态更新。

Store示例代码 #

class HomeStore extends _HomeStore with _$HomeStore {}

abstract class _HomeStore with Store {
  @observable
  bool isLoading = false;
  
  @observable
  UserInfo? userInfo;
  
  @observable
  List<Notification>? notifications;
  
  @observable
  List<FavoriteItem>? favorites;

  @action
  Future<void> initialize() async {
    if (isLoading) return; // 防止重复触发
    isLoading = true;
    try {
      // 并行调用三个异步API，提升初始化效率
      final [userRes, notifyRes, favRes] = await Future.wait([
        ApiService.getUserInfo(), // 需认证的API，登录后可调用
        ApiService.getNotifications(),
        ApiService.getFavorites(),
      ]);
      // 更新Observable状态
      userInfo = userRes.data;
      notifications = notifyRes.data;
      favorites = favRes.data;
    } catch (e) {
      // 错误处理：日志记录、用户提示等
      print('首页数据初始化失败: $e');
    } finally {
      isLoading = false;
    }
  }
}

页面示例代码 #

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final HomeStore _homeStore = HomeStore();

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 首次进入页面且未初始化时触发
    if (!_homeStore.isLoading && _homeStore.userInfo == null) {
      _homeStore.initialize();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Observer(
      builder: (_) {
        // 根据Store的加载状态渲染不同UI
        if (_homeStore.isLoading) {
          return const Center(child: CircularProgressIndicator());
        }
        return Scaffold(
          body: SingleChildScrollView(
            child: Column(
              children: [
                UserInfoWidget(info: _homeStore.userInfo),
                NotificationList(notifications: _homeStore.notifications),
                FavoriteList(favorites: _homeStore.favorites),
              ],
            ),
          ),
        );
      },
    );
  }
}

方案2：路由跳转回调触发初始化 #

如果登录后才进入首页，可以在登录页面的跳转逻辑中，通过路由回调触发首页Store的初始化，适合全局共享的Store。

// 登录页面的登录成功逻辑
onLoginSuccess() {
  Navigator.push(context, MaterialPageRoute(builder: (_) => const HomePage()))
      .then((_) {
    // 从依赖注入中获取全局HomeStore并初始化
    final homeStore = Provider.of<HomeStore>(context, listen: false);
    homeStore.initialize();
  });
}

方案3：结合依赖注入的生命周期触发 #

如果用Provider等依赖注入工具管理Store，可以在创建Store实例后，延迟触发初始化，避免阻塞UI渲染。

// 在路由或父Widget中提供Store
ChangeNotifierProvider(
  create: (context) {
    final homeStore = HomeStore();
    // 页面首次渲染完成后执行初始化
    WidgetsBinding.instance.addPostFrameCallback((_) {
      homeStore.initialize();
    });
    return homeStore;
  },
  child: const HomePage(),
)

不管用哪种方案，核心都是让Store自己管理异步逻辑和状态，页面只做状态监听和UI渲染，完全符合视图与逻辑分离的设计原则，这种思路也适用于Bloc、Riverpod等其他状态管理方案。

内容的提问来源于stack exchange，提问作者farfly