Skip to main content

on

Registers a handler for a store action. The handler runs after interceptors, alongside the built-in handler, and receives the action payload.

Usage​

on<A extends keyof StoreActions>(
  name: A,
  handler: (data: StoreActions[A]) => void | boolean | Promise<boolean>,
  config?: IEventConfig
): void;
ParameterTypeDescription
namekeyof StoreActionsAction id ("add-event", "update-event", "navigate-to", ...).
handler(data) => void | boolean | Promise<boolean>Called with the action payload. Return value is ignored on on.
configIEventConfigOptional bus config (tag, once); use tag to detach later.

Use intercept instead of on when you need to block or modify an action before it runs.

Example​

<script setup lang="ts">
  import { Calendar } from "@svar-ui/vue-calendar";
  import type { CalendarInstanceApi } from "@svar-ui/vue-calendar";
  import { ref } from "vue";

  const api = ref<CalendarInstanceApi>();

  function init(a: CalendarInstanceApi) {
    api.value = a;
    api.value.on("add-event", p => {
      console.log("event added:", p.event);
    });
  }
</script>

<template>
  <Calendar :init="init" :events="[]" :date="new Date()" />
</template>
  • intercept — block or confirm before the action runs.
  • detach — remove a registered handler by tag.
  • exec — programmatic equivalent of user actions.
  • Actions overview — payload shapes for each action.