exec

Dispatches an action through the event bus. The action flows through interceptors first, then the store's default handler, then on handlers, and finally the component's on{action} prop callback.

Usage

exec<A extends keyof StoreActions>(
  action: A,
  data: StoreActions[A]
): Promise<StoreActions[A]>;

Parameter	Type	Description
action	keyof StoreActions	Action name (e.g. "add-card")
data	StoreActions[A]	Action payload matching the action

Returns a Promise that resolves with the (possibly mutated) payload after all handlers have run.

Example

<script setup>
  import { ref } from "vue";
  import { Kanban } from "@svar-ui/vue-kanban";

  const api = ref(null);
</script>

<template>
  <Kanban ref="api" :cards="cards" :columns="columns" />

  <button @click="api.exec('add-card', {
    card: { label: 'New task' },
    edit: true,
  })">
    Add Card
  </button>
</template>

Related

• Actions overview - all actions dispatchable through exec
• on - register a handler that fires after exec processes an action
• intercept - register a pre-handler that can cancel an action