5

シンプルな反応フォームと、MobX ストアに 2 つのオブザーバブルがあります。

@observable personalInfo = {
        email: '',
        gender: 1,
        birthDate: null, 
        location: ''
    };
@observable personalInfoInEdit = null;

個人情報のフォームが (ctor で) 読み込まれると、ストアでメソッドを呼び出します。

reset_PersonalInfoInEdit() {
        this.personalInfoInEdit = observable(this.personalInfo);
}

それが行うのは、単に「編集中」のオブジェクトをリセットし、元のデータからのデータで埋めることです。ユーザーが「変更を保存」を押すと、「編集中」のオブジェクトが元のオブジェクトにコピーされます。

別のオブザーバブルで observable() を呼び出すことは有効ですか? これに対する副作用はありますか？（効くらしい）

そうでない場合、この「編集中」オブジェクトのシナリオをエレガントに処理するための設計パターンはありますか。

4

1 に答える 1

7

推奨されるパターンは、 mobx-utils のcreateViewModelユーティリティ関数を使用することです。したがって、次のようにします。

import { createViewModel } from 'mobx-utils'

reset_PersonalInfoInEdit() {
    this.personalInfoInEdit = createViewModel(this.personalInfo);
}

これには、元のデータに簡単にリセットしたり、元のモデルに送信したりできるビューモデルにいくつかのユーティリティ関数があるという追加の利点があります。

class Todo {
  \@observable title = "Test"
}

const model = new Todo()
const viewModel = createViewModel(model);

autorun(() => console.log(viewModel.model.title, ",", viewModel.title))
// prints "Test, Test"
model.title = "Get coffee"
// prints "Get coffee, Get coffee", viewModel just proxies to model
viewModel.title = "Get tea"
// prints "Get coffee, Get tea", viewModel's title is now dirty, and the local value will be printed
viewModel.submit()
// prints "Get tea, Get tea", changes submitted from the viewModel to the model, viewModel is proxying again
viewModel.title = "Get cookie"
// prints "Get tea, Get cookie" // viewModel has diverged again
viewModel.reset()
// prints "Get tea, Get tea", changes of the viewModel have been abandoned
于 2016-11-23T10:32:29.440 に答える