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, तुम्हाला npm किंवा यार्न वापरून लायब्ररी स्थापित करणे आवश्यक आहे @vueuse/core. हे composables तुम्हाला तुमच्या Vue.js प्रोजेक्टमध्ये कॉमन लॉजिक आणि स्टेटचा पुनर्वापर करण्यास मदत करतात, विकास प्रक्रिया आणि कोड व्यवस्थापन ऑप्टिमाइझ करतात.