标签: mobx

我正在将react-native 0.51.1 迁移到0.59.8。我正面临 Mobx 的问题。

如果 @observable 装饰成员已分配像这样的 init 值

@observable cnt = 0;

然后就可以了。

但如果它是未定义的，

@observable cnt;

那么它就不起作用了。

我有许多未定义的可观察商店，它们在 0.51.0 中工作。
我想让它以未定义的方式工作。

Babel 装饰选项在迁移过程中已更改。

// babel.config.js
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['@babel/plugin-transform-flow-strip-types'],
    ['@babel/plugin-proposal-decorators', { 'legacy': true}],
    ['@babel/plugin-proposal-class-properties', { 'loose': true}],
  ],
}

//This doesn't work but worked in react-native 0.51.0
import { observable } from 'mobx';

export class Count {
  @observable cnt;

  constructor(initValue = 0) {
    this.cnt = initValue;
  }

  add(){
    this.cnt++;
  }
}

//This works
import …

我已经没有想法了。

我使用 Mobx 进行非常简单的状态管理。

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:jw_helper/state/globalState.dart';

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

  @override
  Widget build(BuildContext context) {
    final _globalState = GlobalState();
    return Column(
      children: <Widget>[
        Container(
          child: Observer(
            builder: (_) => Text(_globalState?.currentIndex?.toString()),
          ),
        ),
        MaterialButton(
          onPressed: () {
            _globalState.setCurrentIndex(1);
          },
          child: Text("Press me"),
        ),
      ],
    );
  }
}

当我改变这个小部件中的状态时，值会更新。当我在另一个小部件中改变相同的 Observable 时，观察者不会重建。

只有状态发生变化的同一个 Widget 中的观察者才会被更新。

我的 Mobx 代码：

import 'package:mobx/mobx.dart';

// Include generated file
part 'globalState.g.dart';

// This is the class used …

我对 ant design Table 组件中单击一行的行为进行了编程。这应该更改表上的 rowClassName。这是 CodeSendBox 上的示例。当您单击表行时，Store.selectedRowKey 中的值会发生变化，但表不会重新呈现。如果将分隔滑块移动到沙箱并且表大小发生变化，则会发生渲染并应用新的行选择

这是另一个例子，其中 mobx 不能与 ant-design Table 一起使用

具有模态形式 CRUD 的 Ant 设计表

我是 Mobx 的新手，我真的很想了解我做错了什么

我是一名 Android 开发者，也是 Flutter 新手。我真的很喜欢 Mobx 的工作方式，因为它记住了 Android 的 ViewModel。顺便说一句，当我创建 ViewModel 时，我喜欢将存储库作为参数来创建它，这样我就可以使用不同的数据源（即本地或云）来测试它。

所以，这就是我现在的课。

import 'package:mobx/mobx.dart';

part 'create_bill_controller.g.dart';

class CreateBillController = _CreateBillControllerBase
    with _$CreateBillController;

abstract class _CreateBillControllerBase with Store {
  final appBarTitle = 'Criar Conta';
  final criarConta = 'Criar conta';
  final nomeDaConta = 'Nome da conta';
  final seuNome = 'Seu nome';

  @action
  createBill(String billname, String userName) {
    // here, dataSource should be given in a constructor
    datasource.createBill(billName, userName);
  }
}

如何将数据源（存储库）作为参数传递给此类？

在 mobx 中，如果我想使用继承，我需要使用 makeObservable 而不是 makeAutoObservable。但是使用 makeObservable 需要我命名改变状态的操作，那么如何将 setter 声明为操作，因为它与 getter 具有相同的名称？

换句话说，我写的 SETTER_FOR_MYVAR 的位置是什么，或者达到相同效果的另一种方法是什么？

class BaseClass {
  _myvar = null

  set myvar(val) {
    this._myvar = val;
  }

  get myvar() {
    return this._myvar;
  }

  other_action() {
    this._myvar = 5;
  }

  constructor() {
    makeObservable(this, {
      _myvar: observable,
      other_action: action,
      SETTER_FOR_MYVAR: action
    });
  }
}

是的，我知道我可以将其外包给另一个辅助函数 _myvar_setter 并声明一个操作，但这看起来很难看，我希望有更好的方法。

我最近开始学习如何使用 Mobx 来管理我的应用程序的状态，最近我遇到了以下错误：

Object literal may only specify known properties, and "data" does not exist in type "AnnotatiosMap<this, never>".

每当我想将我的班级的财产设为私有时，就会发生这种情况。但是，如果它是公共的或受保护的，则不会出现该问题。

这是我的代码的一小段：

Object literal may only specify known properties, and "data" does not exist in type "AnnotatiosMap<this, never>".

我应该怎么做才能将我的财产设为私有但仍受到监视？

祝你有美好的一天！

我正试图让Mobx的自动运行正常工作.

我的用例是我有一个模型,我喜欢在更改时序列化(或脱水)并将该信息添加到另一个模型的数据中.这给我带来了模范国家的基本时间旅行.两者都是可观察的.

编辑:模型分离的想法是,一个是应用程序的数据模型,其他应该是我可以从应用程序使用的完全独立的库.我需要定期跟踪应用程序中的更改,但在同一页面上显示状态工具的UI.

现在,autorun似乎对我实际跟踪的内容做出了自己的推论.当我在观察模型的实例化中移动模型实例时,在发生更改时不再调用自动运行.在模块顶层创建模型实例时,它按预期工作.这是我只更改了观察模型的一个属性(每个自动运行调用都会改变的属性).当我在观察模型中尝试同时更改两件事时,现在也要求自动运行这些更改,从而导致无休止的循环(Mobx捕获).

我想知道如何用更清晰的方式来表达我正在跟踪的自动运行功能,或者还有其他方法可以跟踪模型更改并在发生任何事情时更新其他模型.

用代码示例编辑.

这就是我所做的(大大简化):

class DataModel {
    @observable one_state = null;
}

class StateStore {
    @observable states = [];
}

let data = new DataModel();
let store = new StateStore();

autorun(() => {
   store.states.push(data.one_state);
   console.log("new data", toJSON(store.states));
});

data.one_state = "change 1";
data.one_state = "change 2";

这就形成循环依赖,因为自动运行被调用的两个原始数据模型的变化和所产生的储存改变,而我只是在跟踪更改前感兴趣.

使用工作结果编辑:

class DataModel {
    @observable one_state = null;
}

class StateStore {
    @observable states = asFlat([]);
}

let data = new DataModel();
let store = new StateStore();

autorun(() …

在下面的文章中，它说应该处理mobx的反应：https ://mobxjs.github.io/mobx/best/pitfalls.html

用@compute装饰器标记的属性是一种反应，因此似乎也需要对其进行处理。问题在于，与显式调用autorun（），observe（）或其他反应（返回一个处置函数）不同，@ compute装饰器似乎无法使我们处置该反应。

所以问题是-应该如何处理@compute装饰器定义的反应？

以下示例可能会显示不处理的问题

export class Observed {
    @observable
    public x: number;
}

export class Observer {

   constructor(private member: Observed){
   }

   @computed
   get doubled(){
      return this.member.x*2;
   }
}

let member = new Observed();
let observer = new Observer(member);

// now pass observer as a model to some react component and use its doubled property

只要“成员”还活着，观察者将一直活着，除非将包装doubled（）的反应处理掉。即使我们将Obpose（）函数添加到Observer并自己调用它，我也不明白我们如何访问doubled（）的底层反应来对其进行处理。

将选择范围缩小到可观察数组中的单个对象时,如何有效地获取该对象的索引？

@observable questionsList = [{
  id: 1,
  question: "Is the earth flats?",
  answer: "Some long answer here..."
}, {
  id: 2,
  question: "Does the moon have life?",
  answer: "Some long answer here..."
}];

const quesitonId = 2; 
const question = this.questionsList.find(q => q.id === questionId);
const questionIndex = // should be 1

我很好奇mobx如何在幕后工作.

如果我有一个既是观察者又包含observables的组件:

@observer
export default class Form extends Component {
  @observable submitted = false;

  @action.bound
  submit() {
  }
}

mobx如何在不使用setState的情况下重新渲染,还是使用setState？