ViewModelStore

An optional but powerful container for managing ViewModel instances within a React / Solid application. Provides centralized control over ViewModel lifecycle and access.

Key Features

• Instance Registry - Automatic tracking of all active ViewModels in the view tree
• Cross-Component Access - Retrieve ViewModels by:
  • Class reference
  • Component reference (withViewModel / anchors)
  • Custom unique IDs
• Factory Pattern - Unified creation interface via define / create

When to Use

Consider ViewModelStore when your application requires:

• Access to ViewModels outside the view hierarchy
• Debugging/devtools inspection capabilities
• Complex dependency injection scenarios

Basic usage

Integrate with React

import { ViewModelStoreBase } from "mobx-view-model";
import { ViewModelsProvider } from "mobx-view-model-react";

const vmStore = new ViewModelStoreBase();

const App = () => {
  return (
    <ViewModelsProvider value={vmStore}>
      <Notifier />
    </ViewModelsProvider>
  )
}

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

class NotifierVM extends ViewModelBase {
  foo = 'foo';
}

export const Notifier = withViewModel(
  NotifierVM,
  () => <div>Hello, I am a notifier.</div>,
  { id: 'notifier-id' },
);

...
// somewhere in your app

vmStore.get(Notifier)?.foo // 'foo' | undefined
vmStore.get(NotifierVM)?.foo // 'foo' | undefined
vmStore.get<NotifierVM>('notifier-id')?.foo // 'foo' | undefined