Skip to content
⚠️You are viewing an older version. Switch to the latest version (v11.x).View latest →

MobX decorators and other ​

If you want to use decorators in your view models you need to configure your build.
Most of the documentation uses accessor decorators that work only with Babel. You can replace them with makeObservable or extendObservable from MobX.

Base implementations of ViewModelStore and ViewModel are using makeObservable(this) in class constructor.

No-decorators approach ​

You need to disable the "decorators style" for wrapping base entities with MobX functions like makeObservable.
To achieve this, configure the global viewModelsConfig:

ts
import { viewModelsConfig } from "mobx-view-model";

viewModelsConfig.observable.viewModels.useDecorators = false;

Example of usage:

ts
import { observable, action } from "mobx";
import { ViewModelBase, ViewModelParams } from "mobx-view-model";

class YourViewModel extends ViewModelBase  {
  constructor(params: ViewModelParams) {
    super(params);

    makeObservable(this, {
      fruitName: observable,
      setFruitName: action.bound,
    })
  }

  fruitName: string = '';

  setFruitName(fruitName: string) {
    this.fruitName = fruitName;
  }
}