ViewModelBase class

This is the 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 an instance of ViewModelStore.
Allows 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() {
    return this.viewModels.getAll(JediCardVM).length;
  }

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

unmountSignal

This is an AbortSignal that is signaled when your ViewModel is unmounted. It happens after unmount() completes in the base implementation. If the same view model instance is mounted again, the base implementation creates a fresh signal; the signal from the previous mount remains aborted.

Example

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

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

vm: ViewModelInfo

Metadata for this view model. vm.state contains its lifecycle state and vm.data contains data loaded from the configured resource. See the ViewModel interface for the state values and a resource-data example.

isMounted: boolean computed

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

willMount(): void | Promise<void> protected

Called when the component begins mounting.
Executes before isMounted becomes true.

May return a Promise — mount() waits for it, then finalizes mounting. Prefer this over overriding mount() for async setup.

mount(): void | Promise<void> action

Called when the component is mounted in the React / Solid tree.

This method sets isMounted to true after willMount() completes.
If you override this method, be sure to call super.mount(); otherwise your view component connected to this ViewModel will never be rendered because the withViewModel HOC checks the isMounted flag before rendering the view component.

Example: Async work in willMount

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

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

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

didMount(): void protected

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 }> {
  protected didMount() {
    this.rootStore.notifications.push({
      type: 'success',
      title: "May the Force be with you!",
      message: this.payload.message
    });
  }
}

willUnmount(): void protected

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

unmount(): void action

Called when the component is unmounted from the React / Solid tree.

This method sets isMounted to false and aborts unmountSignal.
If you override this method, be sure to call super.unmount(); otherwise your view component connected to this ViewModel will never be unmounted correctly.

didUnmount(): void protected

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

setPayload(payload: Payload): boolean

Updates the view model's payload data.

Returns true when the payload is considered equal (no change applied), and false when it was updated.

The base implementation of this method compares the current payload and the new payload before setting it.
Configure the comparison with comparePayload:

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

class PostcardBox extends ViewModelBase<{ postcardId: string }> {}

new PostcardBox({
  id: "postcard-box",
  payload: { postcardId: "one" },
  vmConfig: {
    comparePayload: (current, next) => current?.postcardId === next.postcardId,
  },
});

To customize payload handling further, override setPayload() and call super.setPayload(payload) when appropriate.

hasChild(vm, deep?): boolean protected

Checks whether the given view model is a child of the current view model.

• Shallow (deep is false/undefined): vm.parentViewModel === this
• Deep (deep is true): checks the whole parent chain of vm and returns true if it contains this

Example

class RootVM extends ViewModelBase {}
class ChildVM extends ViewModelBase {}

const root = new RootVM({ id: "root", payload: {} });
const child = new ChildVM({ id: "child", payload: {}, parentViewModel: root });

// inside RootVM
this.hasChild(child) // true
this.hasChild(child, true) // true

hasParent(vm, deep?): boolean protected

Checks whether the given view model is a parent of the current view model.

• Shallow (deep is false/undefined): this.parentViewModel === vm
• Deep (deep is true): checks the whole parent chain of this and returns true if it contains vm

Example

class RootVM extends ViewModelBase {}
class ChildVM extends ViewModelBase {}

const root = new RootVM({ id: "root", payload: {} });
const child = new ChildVM({ id: "child", payload: {}, parentViewModel: root });

// inside ChildVM
this.hasParent(root) // true
this.hasParent(root, true) // true

Additional utility types

Reference to source code

InferViewModelParams<T>

Utility type that infers constructor params for a ViewModelBase subclass.
It resolves to ViewModelParams<Payload, ParentViewModel, ComponentProps> based on the class generics.

Example

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

class UserVM extends ViewModelBase<
  { userId: string },
  null,
  { isAdmin?: boolean }
> {
  constructor(params: InferViewModelParams<UserVM>) {
    params.vmConfig = {
      ...params.vmConfig,
      comparePayload: 'strict',
    };

    super(params);
  }
}

InferViewModelPayload<T> / InferViewModelProps<T>

Helpers that extract payload and props types from a ViewModelBase subclass.