Usage with View Model Store
ViewModelStore lets you access your view model instances from anywhere and gives you more control over creating them.
Follow the simplest way to add a view model store to your application:
1. Create a class implementing the ViewModelStore interface or use basic library implementation (ViewModelStoreBase).
tsx
import { ViewModelStoreBase } from "mobx-view-model";
class MyViewModelStore extends ViewModelStoreBase {}2. Create an instance of the ViewModelStore
ts
const viewModelStore = new MyViewModelStore() // or new ViewModelStoreBase3. Integrate with React using ViewModelsProvider at the root of your application
tsx
<ViewModelsProvider value={viewModelStore}>
...
</ViewModelsProvider>4. Get access to ViewModelStore inside your ViewModels
ts
import { ViewModelBase } from "mobx-view-model";
import { ParentVM } from "../parent-vm";
import { ChildVM } from "../child-vm";
import { AppLayoutVM } from "@/app-layout"
export class YourVM extends ViewModelBase {
get parentData() {
return this.viewModels.get(ParentVM)?.data;
}
get childData() {
return this.viewModels.get(ChildVM)?.data;
}
get appLayoutData() {
return this.viewModels.get(AppLayoutVM)?.data;
}
}