vue-mvvm

Appearance

vue-mvvm / core / UserControl

UserControl ​

The UserControl class provides a foundation for creating reusable and interactive UI components within an application.

It should be used when UI logic gets too heavy to put it in a single ViewModel class, instead some parts of the UI (e.g. forms) are abstracted into their own UserControl logic and communicate with the using ViewModel via the Action interface

Extends ​

Extended by ​

Constructors ​

Constructor ​

ts
new UserControl(): UserControl;

Returns ​

UserControl

Overrides ​

ViewModel.constructor

Properties ​

ctx ​

ts
protected readonly ctx: ReadableGlobalContext;

Represents a readonly global context that provides features like DI

Inherited from ​

ViewModel.ctx

Methods ​

activated() ​

ts
protected activated(): void | Promise<void>;

Hook for Vue's onActivated

Returns ​

void | Promise<void>

Inherited from ​

ViewModel.activated

beforeMount() ​

ts
protected beforeMount(): void | Promise<void>;

Hook for Vue's onBeforeMount

Returns ​

void | Promise<void>

Inherited from ​

ViewModel.beforeMount

beforeUnmount() ​

ts
protected beforeUnmount(): void | Promise<void>;

Hook for Vue's onBeforeUnmount

Returns ​

void | Promise<void>

Inherited from ​

ViewModel.beforeUnmount

beforeUpdate() ​

ts
protected beforeUpdate(): void | Promise<void>;

Hook for Vue's onBeforeUpdate

Returns ​

void | Promise<void>

Inherited from ​

ViewModel.beforeUpdate

computed() ​

Call Signature ​

ts
protected computed<T>(getter): T;
Type Parameters ​
T ​

T

Parameters ​
getter ​

ComputedGetter<T>

Returns ​

T

Inherited from ​

ViewModel.computed

Call Signature ​

ts
protected computed<T>(options): T;
Type Parameters ​
T ​

T

Parameters ​
options ​
get ​

ComputedGetter<T>

set ​

ComputedSetter<T>

Returns ​

T

Inherited from ​

ViewModel.computed

deactivated() ​

ts
protected deactivated(): void | Promise<void>;

Hook for Vue's onDeactivated

Returns ​

void | Promise<void>

Inherited from ​

ViewModel.deactivated

getUserControl() ​

ts
protected getUserControl<T>(ref): T | null;

Collect UserControl that are bound to the View using a Vue.js template ref

Type Parameters ​

T ​

T extends UserControl | UserControl[]

Parameters ​

ref ​

string

The Vue.js Template ref

Returns ​

T | null

UserControl of the bounded UI Element

Inherited from ​

ViewModel.getUserControl

mounted() ​

ts
protected mounted(): void | Promise<void>;

Hook for Vue's onMounted

Returns ​

void | Promise<void>

Inherited from ​

ViewModel.mounted

readonly() ​

ts
protected readonly<T>(value): T;

Type Parameters ​

T ​

T

Parameters ​

value ​

T

Returns ​

T

Inherited from ​

ViewModel.readonly

ref() ​

ts
protected ref<T>(initial): T;

Type Parameters ​

T ​

T

Parameters ​

initial ​

T

Returns ​

T

Inherited from ​

ViewModel.ref

runAction() ​

ts
protected runAction<T>(action): Promise<ActionResult<T>>;

Executes an MVVM Action and returns its result as a promise.

Notes

  • The action body may be synchronous or asynchronous; both are supported.
  • If the action tries to complete/fail more than once, a Vue warning is emitted and further attempts are ignored.

Type Parameters ​

T ​

T

Parameters ​

action ​

Action<T>

The action object implementing Action interface.

Returns ​

Promise<ActionResult<T>>

A promise that resolves with an ActionResult carrying either the data on success or an error on failure.

Inherited from ​

ViewModel.runAction

unmounted() ​

ts
protected unmounted(): void | Promise<void>;

Hook for Vue's onUnmounted

Returns ​

void | Promise<void>

Inherited from ​

ViewModel.unmounted

updated() ​

ts
protected updated(): void | Promise<void>;

Hook for Vue's onUpdated

Returns ​

void | Promise<void>

Inherited from ​

ViewModel.updated

watch() ​

ts
protected watch(
   source, 
   cb, 
   options?): WatchHandle;

Sets up a watch on a reactive source and registers the watch handle. Allows tracking and managing the lifecycle of the watch handle within the class.

Additionally, watchers are automatically disposed after the component is unmounted and all lifecycle hooks have finished executing.

Parameters ​

source ​

WatchSource

The reactive source to watch.

cb ​

WatchCallback

The callback function that gets triggered when the source changes.

options? ​

WatchOptions<boolean>

Optional configuration object for the watcher (e.g., deep, immediate).

Returns ​

WatchHandle

A custom watch handle with methods to stop, pause, and resume the watcher.

Inherited from ​

ViewModel.watch