---
url: /mobx-view-model/api/view-model-store/overview.md
---

# 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`](/api/view-model-store/interface#define-config) / [`create`](/api/view-model-store/interface#create-config)

## 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

```tsx
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>
  )
}
```

```tsx
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
```