首页 > 解决方案 > Flutter Mobx 在 Dispose 时将 Store 重置为初始值

问题描述

如何在处置时重置 MobX 初始值?我的目标是在导航到其他屏幕时重置商店价值。这是我使用 MobX 和 Provider (Multi Provider) 作为依赖注入的代码:

first_route.dart

class FirstRoute extends StatefulWidget {
  FirstRoute({Key? key}) : super(key: key);

  @override
  _FirstRouteState createState() => _FirstRouteState();
}

class _FirstRouteState extends State<FirstRoute> {
  ReactionDisposer? disposers;
  
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    final myStore = Provider.of<MyStore>(context);
    disposers =  autorun((_) => myStore.myAutoRun());
  }

  @override
  void dispose() {
    super.dispose();
    disposers!();
    print('disposed');
  }

  @override
  Widget build(BuildContext context) {
    return Consumer<MyStore>(
      builder: (_, store, __) => Observer(
          builder: (_) => Scaffold(
                appBar: AppBar(),
                body: GestureDetector(
                  onTap: () {
                    Navigator.pushReplacement(
                      context,
                      MaterialPageRoute(builder: (context) => SecondRoute()),
                    );
                  },
                  child: Center(
                    child: Text(store.myString),
                  ),
                ),
                floatingActionButton: FloatingActionButton(
                  onPressed: () {
                    store.changeStringA();
                  },
                  child: Text('String A'),
                  backgroundColor: Colors.green,
                ),
              )),
    );
  }
}

second_route.dart

class SecondRoute extends StatelessWidget {
  const SecondRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final myStore = Provider.of<MyStore>(context);
    return Observer(
      builder: (_) => Scaffold(
        appBar: AppBar(title: Text('Second Screen')),
        body: Container(
          child: Center(
            child: Text(myStore.myString),
          ),
        ),
      ),
    );
  }
}

这是我的商店

import 'package:mobx/mobx.dart';
part 'myStore.g.dart';

class MyStore = _MyStoreBase with _$MyStore;

abstract class _MyStoreBase with Store {

  @observable
  String myString = 'Hello World';

  @action
  myAutoRun() {
    myString = 'Hello MobX';
    print('my autorun action');
  }
}

我尝试像上面那样处理商店,但即使在小部件被处理后商店值仍然存在,看起来像处理者!(); 不工作。所以我希望 myString 值在处理时重置回“Hello World”(并导航到第二个屏幕)。提前致谢!!

标签: flutterdartflutter-dependenciesmobx

解决方案


推荐阅读