Verwalten unveränderlicher Tabellenausschnitte mittels toSpliced und shallowRef

import { shallowRef } from 'vue';
 
export function useOptimisticTable(initialRows = []) {
  const rows = shallowRef(initialRows);
 
  const updateRowById = (id, updatedFields) => {
    const targetIndex = rows.value.findIndex(item => item.id === id);
    if (targetIndex === -1) return;
 
    const updatedItem = { ...rows.value[targetIndex], ...updatedFields };
    // toSpliced creates a new array without mutating the existing buffer
    rows.value = rows.value.toSpliced(targetIndex, 1, updatedItem);
  };
 
  const removeRowById = (id) => {
    const targetIndex = rows.value.findIndex(item => item.id === id);
    if (targetIndex === -1) return;
 
    rows.value = rows.value.toSpliced(targetIndex, 1);
  };
 
  return { rows, updateRowById, removeRowById };
}