Skip to content

Store-Feldbindung

app/composables/forms/useStoreField.ts erzeugt ein schreibbares Computed für ein einzelnes storegebundenes Feld.

Es ist die niedrigere Composable-Form desselben Musters, das auch über app/components/Grid/StoreCell.vue bereitgestellt wird.

Zweck

Das Composable wird verwendet, wenn eine Komponente eine Two-Way-Binding auf Feldebene braucht, ohne ein Entry-Objekt direkt im Template zu mutieren.

API

Argumente:

  • entry: Objekt mit mindestens id
  • key: Feldname auf diesem Entry
  • updateFn: Callback mit { id, key, value }
  • options

Optionen:

  • debounceMs: Standard ist 800, 0 deaktiviert das Debouncing
  • stringified: wenn true, wird der Wert als String an die UI gegeben und beim Schreiben zurückkonvertiert

Verhalten

  • solange ein debounctes Update aussteht, liefert der Getter den Pending-Wert zurück, damit die UI nicht auf den alten Store-Wert zurückspringt
  • wenn stringified aktiviert ist und der ursprüngliche Feldtyp numerisch ist, wird eingehender String-Input wieder in eine Zahl umgewandelt
  • leere Eingaben werden bei aktiviertem stringified zu undefined

Zugehörige Komponente

StoreCell.vue nutzt dieselbe Idee auf Tabellenzellen-Ebene und reicht fieldProps in den Slot-Inhalt weiter. Für normale Tabellenfelder sollten die Column-Descriptor-Helper aus app/utils/sectionTableColumns.ts bevorzugt werden: textColumn(...), numberColumn(...), dateColumn(...), selectColumn(...) und checkboxColumn(...).

Die höheren Wrapper StoreCellInput.vue, StoreCellDate.vue, StoreSelectCell.vue und StoreCheckboxCell.vue bleiben die internen Bausteine dieser Helper und sind weiterhin sinnvoll, wenn eine echte Spezialzelle nicht sauber als Descriptor beschrieben werden kann. Direktes StoreCell-Slot-Wiring bleibt die niedrigere Primitive für seltene Sonderfälle.