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 آپ کو 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 پروجیکٹ میں عام منطق اور ریاست کو دوبارہ استعمال کرنے میں مدد کرتے ہیں، ترقیاتی عمل اور کوڈ مینجمنٹ کو بہتر بناتے ہوئے۔