src/composables/useArrayData.js

@@ -120,10 +120,29 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         store.hasMoreData = limit && response.data.length >= limit;
 
         if (append) {
-            if (!store.data) store.data = [];
+            if (!store.data) {
-            for (const row of response.data) store.data.push(row);
+                store.data = [];
+                store.map = new Map();
+            }
+
+            response.data.forEach((row) => {
+                const key = row.id;
+
+                if (!store.map.has(key)) store.data.push({ ...row, key });
+                else {
+                    const dataIndex = store.data.findIndex((item) => item.key === key);
+                    store.data[dataIndex] = { ...row, key };
+                }
+
+                store.map.set(key, row);
+            });
         } else {
-            store.data = response.data;
+            store.data = [];
+            response.data.forEach((row) => {
+                const key = row.id;
+                store.data.push({ ...row, key });
+                store.map.set(key, row);
+            });
             if (!isDialogOpened()) updateRouter && updateStateParams();
         }
 

src/stores/useArrayDataStore.js

@@ -46,6 +46,7 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
     function getDefaultState() {
         return Object.assign(JSON.parse(JSON.stringify(defaultOpts)), {
             data: ref(),
+            map: ref(new Map()),
         });
     }