refs #5673 fix(crudModel): fix formData watcher and removed useState

src/components/CrudModel.vue

@@ -3,7 +3,6 @@ import axios from 'axios';
 import { onMounted, onUnmounted, computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
-import { useState } from 'src/composables/useState';
 import { useValidator } from 'src/composables/useValidator';
 import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'components/ui/VnPaginate.vue';
@@ -11,7 +10,6 @@ import VnConfirm from 'components/ui/VnConfirm.vue';
 import SkeletonTable from 'components/ui/SkeletonTable.vue';
 
 const quasar = useQuasar();
-const state = useState();
 const stateStore = useStateStore();
 const { t } = useI18n();
 const { validate } = useValidator();
@@ -63,7 +61,7 @@ const isLoading = ref(false);
 const hasChanges = ref(false);
 const originalData = ref();
 const vnPaginateRef = ref();
-const formData = computed(() => state.get($props.model));
+const formData = ref();
 const formUrl = computed(() => $props.url);
 
 const emit = defineEmits(['onFetch', 'update:selected']);
@@ -76,14 +74,6 @@ defineExpose({
     hasChanges,
 });
 
-onMounted(async () => {
-    await fetch();
-});
-
-onUnmounted(() => {
-    state.unset($props.model);
-});
-
 function tMobile(...args) {
     if (!quasar.platform.is.mobile) return t(...args);
 }
@@ -94,12 +84,11 @@ async function fetch(data) {
         data.map((d) => (d.$index = $index++));
     }
 
-    state.set($props.model, data);
     originalData.value = data && JSON.parse(JSON.stringify(data));
+    formData.value = data && JSON.parse(JSON.stringify(data));
+    watch(formData, () => (hasChanges.value = true), { deep: true });
 
-    watch(formData.value, () => (hasChanges.value = true));
+    emit('onFetch', data);
-
-    emit('onFetch', state.get($props.model));
 }
 
 function reset() {
@@ -171,10 +160,10 @@ async function remove(data) {
         newData = newData.filter(
             (form) => !preRemove.some((index) => index == form.$index)
         );
-        state.set($props.model, newData);
         const changes = getChanges();
         if (!changes.creates?.length && !changes.updates?.length)
             hasChanges.value = false;
+        fetch(newData);
     }
     if (ids.length) {
         quasar
@@ -190,7 +179,7 @@ async function remove(data) {
             .onOk(async () => {
                 await saveChanges({ deletes: ids });
                 newData = newData.filter((form) => !ids.some((id) => id == form[pk]));
-                state.set($props.model, newData);
+                fetch(newData);
             });
     }
     emit('update:selected', []);
@@ -250,7 +239,6 @@ function isEmpty(obj) {
 watch(formUrl, async () => {
     originalData.value = null;
     reset();
-    fetch();
 });
 </script>
 <template>