ViewModelBase class

This is base implementation of the ViewModel interface

Reference to source code

Methods and properties

Here is documentation about base implementation methods and properties.

INFO

If you want to read about ViewModel interface methods and properties go to interface documentation

viewModels

Reference to instance of ViewModelStore.
Allows to get access to other ViewModels.

Example

import { ViewModelBase } from "mobx-view-model";

export class SithCardVM extends ViewModelBase {
  get power() {
    return this.viewModels.get(JediCardVM)?.power ?? 0;
  }
}

export class StarWarsBattlefieldVM extends ViewModelBase {
  get jedisCount() {
    this.viewModels.getAll(JediCardVM).length;
  }

  get sithsCount() {
    this.viewModels.getAll(SithCardVM).length;
  }
}

unmountSignal

This is AbortSignal which signaled when your ViewModel is unmounted. It happens in didUnmount() method

Example

import { ViewModelBase } from "mobx-view-model";
import { autorun } from "mobx"

export class TestVM extends ViewModelBase {
  willMount() {
    autorun(
      () => {
        console.log("log", this.id, this.isMounted);
      },
      {
        signal: this.unmountSignal
      }
    );
  }
}

vmConfig

Configuration object for the view model.
See ViewModelsConfig for detailed configuration options.

isMounted: boolean computed

Indicates whether the ViewModel is currently mounted with its associated component.

isUnmounting: boolean computed

Indicates whether the ViewModel is in the process of unmounting.

mount(): void | Promise<void> action.bound

Called when the component is mounted in the React tree.

This method sets isMounted to true.
If you are overriding this method be sure that you called the super.mount(), otherwise your view component connected to this ViewModel never been rendered because inside withViewModel HOC libary comparing the isMounted flag with true before render the view component

This method can be async. This feature is helpful if you want to load some data or do something before view component will been rendered

Example: Async Mounting

import { ViewModelBase } from "mobx-view-model";

class JediProfileVM extends ViewModelBase<{ jediId: string }> {
  async mount() {
    await this.loadJediData();
    await super.mount();
  }

  private async loadJediData() {
    const response = await fetch(`/api/jedi/${this.payload.jediId}`);
    this.jediData = await response.json();
  }
}

didMount(): void action

Called after the view model is fully mounted and ready for use.
Ideal for post-mount initialization and side effects.

Example: Post-Mount Actions

import { ViewModelBase } from "mobx-view-model";

class ForceAlertVM extends ViewModelBase<{ message: string }> {
  didMount() {
    this.rootStore.notifications.push({
      type: 'success',
      title: "May the Force be with you!",
      message: this.payload.message
    });
  }
}

willUnmount(): void action

Called when the component begins unmounting from the React tree.
Executes before the unmount() method.

unmount(): void | Promise<void> action.bound

Called when the component is unmounted from the React tree.

This method sets isMounted to false.
If you are overriding this method be sure that you called the super.unmount(), otherwise your view component connected to this ViewModel never been unmounted

didUnmount(): void action

Called after the view model is fully unmounted.
Ideal for final cleanup operations.

setPayload(payload: Payload): void

Updates the view model's payload data.

Base implementation of this method strict comparing current payload and new payload before sets the new
This can be overriden using view models configuration or overriding the protected isPayloadEqual method

isPayloadEqual?.(current: Payload, next: Payload): boolean protected

This method is needed for comparing current payload and next payload.

You can customize payload comparison overriding this method or configure viewModelsConfig

Example:

class PostcardBox extends ViewModelBase {
  isPayloadEqual() {
    return true;
  }
}