我更新mobX状态并使用Observer更新视图时抛出“ MobXException”

时间:2019-05-06 17:30:22

标签: dart flutter mobx

我正在尝试使mobX状态管理变得扑朔迷离。但是,每当我直接更新我的 @observable状态而不是调用 @action装饰的方法时,它都会抛出'MobXException'

下面的代码将为您提供一个正确的想法。

counter.dart

import 'package:mobx/mobx.dart';

part 'counter.g.dart';

class Counter = CounterBase with _$Counter;

abstract class CounterBase implements Store {
  @observable
  int value = 0;

  @action
  void increment() {
    value++;
  }
}

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import './counter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Counter",
      home: CounterExample(),
    );
  }
}

class CounterExample extends StatelessWidget {
  final _counter = Counter();

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: const Text('Counter'),
        ),
        body: Center(
          child: Observer(
              builder: (_) => Text(
                    '${_counter.value}',
                    style: const TextStyle(fontSize: 50),
                  )),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // _counter.increment(); // WORKING !!
            _counter.value = _counter.value+1; // NOT WORKING !!
          },
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ),
      );
}

使用增量方法是可行的,但是为什么即使对于一些简单的状态更改,我也需要使用另一种方法?为什么生成的二传手不够用?

1 个答案:

答案 0 :(得分:2)

  

但是,每当我直接更新我的@observable状态而不是调用@action装饰的方法时,它都会抛出'MobXException'

这是一个功能。 MobX故意防止您在 action 之外对可观察对象进行变异。

改为在商店的方法中移动该逻辑。