Composables तपाईंको परियोजनाहरूको लागि 10 आवश्यक Vue.js अन्वेषण गर्दै

Vue.js परियोजनामा, composables विभिन्न घटकहरू बीच तर्क र अवस्था पुन: प्रयोग गर्न प्रयोग गरिने कार्यहरू हुन्। यहाँ केहि लोकप्रिय Vue.js छन् composables जुन तपाइँ तपाइँको परियोजना मा प्रयोग गर्न सक्नुहुन्छ:

useLocalStorage र useSessionStorage

यसले composables तपाईंलाई स्थानीय storage वा session storage ब्राउजरमा डाटा भण्डारण र व्यवस्थापन गर्न मद्दत गर्दछ।

<template>  
  <div>  
    <p>Last visited: {{ lastVisited }}</p>  
  </div>  
</template>  
  
<script>  
import { useLocalStorage } from '@vueuse/core';  
  
export default {  
  setup() {  
    const lastVisited = useLocalStorage('last_visited', new Date());  
  
    return {  
      lastVisited,  
    };  
  },  
};  
</script>  

useDebounce र useThrottle

यसले composables तपाईंलाई घटना ह्यान्डलिंग प्रकार्यहरूमा डिबाउन्स वा थ्रोटल लागू गर्न अनुमति दिन्छ, कार्य कार्यान्वयनको आवृत्ति नियन्त्रण गर्न मद्दत गर्दछ।

<template>  
  <div>  
    <input v-model="searchQuery" @input="handleSearch" />  
    <p>Search results: {{ searchResults }}</p>  
  </div>  
</template>  
  
<script>  
import { ref } from 'vue';  
import { useDebounce } from '@vueuse/core';  
  
export default {  
  setup() {  
    const searchQuery = ref('');  
    const searchResults = ref([]);  
  
    const handleSearch = useDebounce(() => {  
      // Perform search based on searchQuery  
      // Update searchResults  
    }, 300);  
  
    return {  
      searchQuery,  
      searchResults,  
      handleSearch,  
    };  
  },  
};  
</script>  

useMediaQueries

यसले composable तपाइँलाई स्क्रिन आकारहरूमा आधारित प्रतिक्रियाशील कार्यहरू गर्न मिडिया प्रश्नहरू ट्र्याक गर्न मद्दत गर्दछ।

<template>  
  <div>  
    <p>Current screen size: {{ screenSize }}</p>  
  </div>  
</template>  
  
<script>  
import { useMediaQueries } from '@vueuse/core';  
  
export default {  
  setup() {  
    const { screenSize } = useMediaQueries({  
      mobile: 'screen and(max-width: 640px)',  
      tablet: 'screen and(max-width: 1024px)',  
      desktop: 'screen and(min-width: 1025px)',  
    });  
  
    return {  
      screenSize,  
    };  
  },  
};  
</script>  

useAsync

यसले composable तपाईंलाई एसिन्क्रोनस कार्यहरू व्यवस्थापन गर्न र तिनीहरूको स्थिति(बाँकी, सफलता, त्रुटि) को निगरानी गर्न मद्दत गर्दछ।

<template>  
  <div>  
    <button @click="fetchData">Fetch Data</button>  
    <p v-if="status === 'pending'">Loading...</p>  
    <p v-if="status === 'success'">Data loaded: {{ data }}</p>  
    <p v-if="status === 'error'">Error loading data.</p>  
  </div>  
</template>  
  
<script>  
import { ref } from 'vue';  
import { useAsync } from '@vueuse/core';  
  
export default {  
  setup() {  
    const fetchData = async() => {  
      // Simulate fetching data  
      const response = await fetch('https://api.example.com/data');  
      const data = await response.json();  
      return data;  
    };  
  
    const { execute, value: data, status } = useAsync(fetchData);  
  
    return {  
      fetchData: execute,  
      data,  
      status,  
    };  
  },  
};  
</script>  

useEventListener

यसले composable तपाईंलाई DOM तत्वहरूमा घटनाहरू ट्र्याक गर्न र सम्बन्धित कार्यहरू गर्न मद्दत गर्दछ।

<template>  
  <div>  
    <p>Mouse position: {{ mouseX }}, {{ mouseY }}</p>  
  </div>  
</template>  
  
<script>  
import { ref } from 'vue';  
import { useEventListener } from '@vueuse/core';  
  
export default {  
  setup() {  
    const mouseX = ref(0);  
    const mouseY = ref(0);  
  
    useEventListener('mousemove',(event) => {  
      mouseX.value = event.clientX;  
      mouseY.value = event.clientY;  
    });  
  
    return {  
      mouseX,  
      mouseY,  
    };  
  },  
};  
</script>  

useRouter

यसले composable तपाईंलाई router अनुप्रयोगमा जानकारी र URL क्वेरी प्यारामिटरहरू पहुँच गर्न मद्दत गर्दछ Vue Router ।

<template>  
  <div>  
    <p>Current route: {{ currentRoute }}</p>  
  </div>  
</template>  
  
<script>  
import { useRoute } from 'vue-router';  
  
export default {  
  setup() {  
    const route = useRoute();  
    const currentRoute = route.fullPath;  
  
    return {  
      currentRoute,  
    };  
  },  
};  
</script>  

usePagination

यसले composable तपाईंलाई पृष्ठन गरिएको डेटा प्रदर्शन र नेभिगेसन कार्यहरू व्यवस्थापन गर्न मद्दत गर्दछ।

<template>  
  <div>  
    <ul>  
      <li v-for="item in currentPageData":key="item.id">{{ item.name }}</li>  
    </ul>  
    <button @click="previousPage":disabled="currentPage === 1">Previous</button>  
    <button @click="nextPage":disabled="currentPage === totalPages">Next</button>  
  </div>  
</template>  
  
<script>  
import { ref, computed } from 'vue';  
import { usePagination } from '@vueuse/core';  
  
export default {  
  setup() {  
    const data = ref([...]); // Paginated data  
    const itemsPerPage = 10;  
    const currentPage = ref(1);  
  
    const { currentPageData, nextPage, previousPage, totalPages } = usePagination(data, itemsPerPage, currentPage);  
  
    return {  
      currentPageData,  
      nextPage,  
      previousPage,  
      currentPage,  
      totalPages,  
    };  
  },  
};  
</script>  

useIntersectionObserver

यसले composable तपाईलाई तत्वको प्रतिच्छेदन ट्र्याक गर्न मद्दत गर्दछ viewport, जब कुनै तत्व देखिने वा गायब हुन्छ कार्यहरू गर्नका लागि उपयोगी।

<template>  
  <div>  
    <div ref="observedElement">Observed Element</div>  
    <p v-if="isIntersecting">Element is intersecting!</p>  
  </div>  
</template>  
  
<script>  
import { ref } from 'vue';  
import { useIntersectionObserver } from '@vueuse/core';  
  
export default {  
  setup() {  
    const observedElement = ref(null);  
    const { isIntersecting } = useIntersectionObserver(observedElement, {});  
  
    return {  
      observedElement,  
      isIntersecting,  
    };  
  },  
};  
</script>  

useClipboard

यसले composable तपाईंलाई डाटा प्रतिलिपि गर्न clipboard र प्रतिलिपि गर्ने अवस्था व्यवस्थापन गर्न मद्दत गर्दछ।

<template>  
  <div>  
    <p>Text to copy: {{ textToCopy }}</p>  
    <button @click="copyText">Copy Text</button>  
    <p v-if="copied">Copied to clipboard!</p>  
  </div>  
</template>  
  
<script>  
import { ref } from 'vue';  
import { useClipboard } from '@vueuse/core';  
  
export default {  
  setup() {  
    const textToCopy = ref('Hello, Vue.js!');  
    const { copy, copied } = useClipboard();  
  
    const copyText =() => {  
      copy(textToCopy.value);  
    };  
  
    return {  
      textToCopy,  
      copyText,  
      copied,  
    };  
  },  
};  
</script>  

useRouteQuery

यसले composable तपाईंलाई URL क्वेरी स्थिति व्यवस्थापन गर्न र URL क्वेरीहरूमा आधारित पृष्ठ सामग्री अद्यावधिक गर्न मद्दत गर्छ।

<template>  
  <div>  
    <input v-model="searchQuery" />  
    <button @click="updateQuery">Search</button>  
    <p>Search results: {{ searchResults }}</p>  
  </div>  
</template>  
  
<script>  
import { ref } from 'vue';  
import { useRouter, useRouteQuery } from '@vueuse/core';  
  
export default {  
  setup() {  
    const router = useRouter();  
    const searchQuery = ref('');  
    const { search } = useRouteQuery();  
    const searchResults = ref([]);  
  
    const updateQuery =() => {  
      router.push({ query: { search: searchQuery.value } });  
      // Perform search based on searchQuery and update searchResults  
    };  
  
    return {  
      searchQuery,  
      searchResults,  
      updateQuery,  
    };  
  },  
};  
</script>  

कृपया ध्यान दिनुहोस् कि यी प्रयोग गर्न composables, तपाईंले @vueuse/core npm वा यार्न प्रयोग गरेर पुस्तकालय स्थापना गर्न आवश्यक छ। यसले composables तपाइँलाई तपाइँको Vue.js परियोजनामा ​​सामान्य तर्क र अवस्था पुन: प्रयोग गर्न मद्दत गर्दछ, विकास प्रक्रिया र कोड व्यवस्थापनलाई अनुकूलन गर्दछ।