javascript / intermediate
Snippet
Logik-Kapselung mit Composables
Composables sind das primäre Muster zur Wiederverwendung von zustandsbehafteter Logik in Vue. Es handelt sich um Funktionen, die die Composition API nutzen, um spezifische Features zu kapseln und reaktiven Zustand sowie Methoden zurückzugeben, die einfach zwischen mehreren Komponenten geteilt werden können.
snippet.js
1
2
3
4
5
6
7
8
import { ref } from 'vue';export function useToggle(initialValue = false) {const status = ref(initialValue);const toggle = () => (status.value = !status.value);return { status, toggle };}
vue
Erklärung
1
export function useToggle
Das Präfix 'use' ist eine Konvention, die anzeigt, dass die Funktion ein zustandsbehaftetes Composable ist.
2
const status = ref(initialValue);
Interner reaktiver Zustand, der privat für die Instanz des Composables ist.
3
return { status, toggle };
Gibt den Zustand und die Updater-Funktion für die konsumierende Komponente frei.