perf: #7136 update composables

src/components/common/VnSelect.vue

@@ -82,7 +82,7 @@ const selectValue = computed({
         return $props.modelValue;
     },
     set(value) {
-        arrayData.store.page.value = 0;
+        arrayData.store.page = 0;
         emit('update:modelValue', value);
     },
 });
@@ -156,7 +156,7 @@ async function fetchFilter(val) {
 async function filterHandler(val, update) {
     if (!$props.defaultFilter) return update();
     let newOptions = [];
-    if (myOptions.value.length > 0) {
+    if (myOptions.value.length > 0 && !useURL.value) {
         newOptions = filter(val, myOptions.value);
         myOptions.value = [];
     } else newOptions = filter(val, myOptionsOriginal.value);

src/composables/useArrayData.js

@@ -15,8 +15,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
     const route = useRoute();
     let canceller = null;
 
-    const page = ref(1);
-
     onMounted(() => {
         setOptions();
         store.skip = 0;
@@ -143,7 +141,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         store.userParams = userParams;
         store.skip = 0;
         store.filter.skip = 0;
-        page.value = 1;
+        store.page = 1;
 
         await fetch({ append: false });
         return { filter, params };
@@ -171,8 +169,8 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
     async function loadMore() {
         if (!store.hasMoreData) return;
 
-        store.skip = store.limit * page.value;
-        page.value += 1;
+        store.skip = store.limit * store.page;
+        store.page += 1;
 
         await fetch({ append: true });
     }

src/composables/useAxios.js

@@ -1,17 +1,31 @@
 import axios from 'axios';
 
-export function useAxios() {
-    const fetch = async (url, filter, params) => {
-        axios.get(url, { params: { ...params, ...filter } });
+export function useAxios(props, url) {
+    if (!url) url = props.url;
+    const handleFilter = (filter) => {
+        filter = Object.assign(filter, props.filter);
+        if (props.where && !filter.where) filter.where = props.where;
+        if (props.sortBy) filter.order = props.sortBy;
+        if (props.limit) filter.limit = props.limit;
+        return JSON.stringify(filter);
     };
+    const fetch = async (filter) =>
+        (
+            await axios.get(url, {
+                params: { filter: handleFilter(filter), ...props.params },
+            })
+        ).data;
 
-    const push = async (url, method = 'PUT', filter, params) => {
-        axios({ url, method, params: { ...params, ...filter } });
-    };
+    const push = async (method = 'PUT', filter, data) =>
+        axios({
+            url,
+            method,
+            data,
+            params: { filter: handleFilter(filter), ...props.params },
+        });
 
-    const pop = async (url, filter, params) => {
-        axios.delete(url, { params: { ...params, ...filter } });
-    };
+    const pop = async (filter) =>
+        axios.delete(url, { params: { filter: handleFilter(filter), ...props.params } });
 
     return {
         fetch,

src/composables/useFetchData.js

@@ -1,8 +1,8 @@
-import { ref } from 'vue';
+// import { ref } from 'vue';
 import axios from 'axios';
 
 export function useFetchData(props) {
-    const data = ref(null);
+    // const data = ref(null);
 
     async function fetch(fetchFilter = {}) {
         try {
@@ -15,7 +15,7 @@ export function useFetchData(props) {
                 params: { filter: JSON.stringify(filter), ...props.params },
             });
 
-            data.value = response.data;
+            // data.value = response.data;
             return response.data;
         } catch (e) {
             // Manejo de errores
@@ -24,7 +24,7 @@ export function useFetchData(props) {
     }
 
     return {
-        data,
+        // data,
         fetch,
     };
 }

src/stores/useArrayDataStore.js

@@ -18,6 +18,7 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
             skip: 0,
             order: '',
             data: ref(),
+            page: ref(1),
             isLoading: false,
             userParamsChanged: false,
             exprBuilder: null,