javascript / intermediate
Snippet
Gruppierung und Partitionierung reaktiver Array-Daten in Vue
Die Transformation von reaktivem Array-State mit Array.prototype.reduce innerhalb einer Vue computed Property liefert strukturierte, kategorisierte Dictionary-Daten, die sich bei Änderungen automatisch aktualisieren.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { ref, computed } from 'vue';export function useCategorizedProducts(initialList = []) {const products = ref(initialList);const groupedByCategory = computed(() => {return products.value.reduce((acc, product) => {const category = product.category ?? 'Uncategorized';if (!acc[category]) {acc[category] = [];}acc[category].push(product);return acc;}, {});});return { products, groupedByCategory };}
vue
Erklärung
1
const products = ref(initialList);
Initialisiert ein reaktives Ref mit einem Array von Element-Objekten.
2
return products.value.reduce((acc, product) => {
Iteriert über das reaktive Array, um Elemente in ein Dictionary-Objekt zu aggregieren.
3
const category = product.category ?? 'Uncategorized';
Nutzt Nullish Coalescing, um fehlende Kategorien auf einen Standardwert abzufangen.
4
acc[category].push(product);
Fügt das aktuelle Element dem passenden Kategorie-Array hinzu.