Jak přepsat Vue 2 filters na composables ve Vue3

Vue 3 už nepodporuje filtry, jako to umělo Vue 2 (filters v Options API). Místo toho se v migrační příručce radí používat computed properties. Ale to je řešení pouze pro jednu komponentu, protože „computed“ nejde vkládat do dalších komponent, funguje jen v rámci komponenty, kde je definována. Aby šlo filtr používat na více místech, dá se to udělat minimálně 2 způsoby.

1/ composables DOPORUČENO !!!

Složitelné fukce využívající Composition API k zapoudření a opětovnému použití.

2/ Alternativní volba config.globalProperties

Tuto variantu nedoporučuju! Někde na internetu jsem našel návod, že jdou filtry přidávat přes globalProperties.$filters. Mám vyzkoušeno, že to funguje a v šablonách se k filtrům dá přistupovat přes $filters.FCE_FILTRU. Ale je to takové kostrbaté, hlavně v unit testech, se to musí přidávat na dvou místech.

Příklady composables

Příkladem filtru může být formátování textu, čísel, zaokrouhlování apod. Zapouzdřená logika je bezstavová (nikam nic neukládá), má nějaké vstupní parametry, které přechroustá a vrací.

Na této stránce je pěkný příklad sledování pohybu myši.

Pro tyto filtry používám adresář /use/. Co filtr, to jeden soubor. Jednotlivé filtry (funkce) označuji prefixem use. Do nich přidávám soubory např. filtr na zaokrouhlení desetinného místa useRound.ts.

useRound.ts

export const useRound = (value: number, fractionDigits = 0): number => {
  if (!value) return 0;
  return value.toFixed(fractionDigits);
  // return Math.round(value);
};