vue-mvvm / core / Action

Action<T>

Represents a unit of work or operation that eventually produces a result.

Actions are typically executed within a ViewModel using ViewModel.runAction. This pattern is particularly useful for delegating interactive tasks—such as filling out a form— to a UserControl. It allows the parent ViewModel to await the result of the user's interaction without managing the specific UI logic or state of that control.

Example

// A UserControl implementing Action to handle a form submission
class LoginForm extends UserControl implements Action<LoginCredentials> {
  private ctx?: ActionContext<LoginCredentials>;

  public onAction(ctx: ActionContext<LoginCredentials>): void {
    this.ctx = ctx;
    // Optional: logic to reset form state or focus input
  }

  public async onSubmit(): Promise<void> {
    // ... validation logic ...
    this.ctx?.completeAction({
        username: this.username.value,
        password: this.password.value
    });
  }
}

// Usage in a parent ViewModel
async startLogin(): Promise<void> {
  const result = await this.runAction(this.loginForm);
  if (result.success) {
     // Handle successful login data
  }
}

Type Parameters

T

T

Methods

onAction()

onAction(ctx): void | Promise<void>;

Called when the action execution is initiated by an external ViewModel via ViewModel.runAction.

This method receives a new ActionContext representing the current execution flow.

Parameters

ctx

ActionContext<T>

The context object specific to this execution run, used to resolve or fail the action.

Returns

void | Promise<void>

Remarks

It is semantically possible for this method to be called multiple times on the same instance (e.g., if the caller does not await the previous runAction call). Implementations should decide whether to support concurrent executions or replace the active context (last-one-wins).