Question

我想使用 MobX 在 Flutter 应用程序中实现用户编辑表单。我有用户存储，它是中央共享存储 (_userStore)。我不想放置仅在用户编辑页面中使用的验证器。我想为用户编辑页面 (_editPageStore) 设置有错误的专用商店。但是我找不到如何对用户存储更改进行反应的方法。我的代码看起来像这样：

编辑用户页面表单域：

 Observer(builder: (_) => TextFormField(
                initialValue: _userStore.user.name,
                decoration: InputDecoration(
                    labelText: 'Name',
                    errorText: _editPageStore.nameError)
                onChanged: (value) => _userStore.user.name = value,
              )),

编辑用户页面存储：抽象类 _UserDetailsEditFormController 与 Store { 最终_userConroller = GetIt.instance();

List<ReactionDisposer> _disposers;

void setupValidations() {
    var name = Observable(_userConroller.user.name); <------ question is here
    _disposers = [
      reaction((_) => name.value, validateName),
    ];
  }

  @observable
  String nameError;

  @action
  validateName(String value) {
    if (value.isEmpty) {
      nameError = AppLocalizations.translate(
          RootRoutes.userDetailsEdit, 'form_displayName_validation_empty_text');
      return;
    }
    nameError = null;
  }

  void dispose() {
    for (final d in _disposers) {
      d();
    }
  }
}

如您所见，我正在尝试将用户名包装为 observable，但它创建了新的 observable，该新 observable 不会对用户存储更改做出反应，而且我不包装它根本无法观察。

所以问题是：我如何观察父存储变量。

我也尝试直接观察 name 和 object - 没有任何触发反应：

final _userConroller = GetIt.instance<UserController>();
List<ReactionDisposer> _disposers;

void setupValidations() {
    _disposers = [
         reaction((_) => _userConroller.user, validateName2),
         reaction((_) => _userConroller.user.name, validateName),
    ];
 }

谢谢

如何在 MobX 和 Flutter 中观察子商店中的父商店属性

0 个答案: