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 में जानकारी और यूआरएल क्वेरी पैरामीटर तक पहुंचने में मदद करता है। 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 आपको यूआरएल क्वेरी स्थिति को प्रबंधित करने और यूआरएल क्वेरी के आधार पर पेज सामग्री को अपडेट करने में मदद करता है।

<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 एनपीएम या यार्न का उपयोग करके लाइब्रेरी स्थापित करनी होगी। ये composables आपके Vue.js प्रोजेक्ट में सामान्य तर्क और स्थिति का पुन: उपयोग करने, विकास प्रक्रिया और कोड प्रबंधन को अनुकूलित करने में आपकी सहायता करते हैं।