getReactiveState
Returns reactive refs for each field of the Kanban state. Subscribing to an individual ref re-runs dependent logic whenever that field changes. Unlike getState(), which returns a one-time snapshot.
Usage
getReactiveState(): TState<State>
The returned object contains a reactive ref for each state field:
| Field | Type | Description |
|---|---|---|
cards | CardsStore | Internal card storage |
columns | ColumnConfig[] | Column definitions in board order |
columnAccessor | ColumnAccessor | Resolver for card-to-column membership |
filters | Map<string, FilterPredicate> | Active filter predicates keyed by tag |
sort | SortCriterion | Active sort criterion, or null |
editorData | KanbanCard | null | Currently selected card, or null |
dynamicData | boolean | Whether dynamic loading is on |
columnData | Map<ColumnID, { status: ColumnDataStatus }> | Per-column load state ("unknown", "loading", or "loaded") |
history | { undo: number; redo: number } | Available undo/redo step counts |
viewData | KanbanModel | Projected render model (ordered, filtered, sorted columns) |
Each field is a Vue reactive value. Reading it inside a reactive context (computed, watchEffect) sets up automatic tracking.
Example
<script setup>
import { ref, computed } from "vue";
import { Kanban } from "@svar-ui/vue-kanban";
const api = ref();
function init(kanbanApi) {
api.value = kanbanApi;
}
const state = computed(() => api.value?.getReactiveState());
const cards = computed(() => state.value?.cards.v);
</script>
<template>
<Kanban :init="init" :cards="cards" :columns="columns" />
<p>Total cards: {{ cards?.length ?? 0 }}</p>
</template>