Composables మీ ప్రాజెక్ట్‌ల కోసం 10 ఎసెన్షియల్ Vue.jలను అన్వేషిస్తోంది

Vue.js ప్రాజెక్ట్‌లో, composables వివిధ భాగాల మధ్య లాజిక్ మరియు స్థితిని మళ్లీ ఉపయోగించేందుకు ఉపయోగించే ఫంక్షన్‌లు. composables మీ ప్రాజెక్ట్‌లో మీరు ఉపయోగించగల కొన్ని ప్రసిద్ధ Vue.jలు ఇక్కడ ఉన్నాయి:

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

ఇది అప్లికేషన్‌లోని సమాచారాన్ని మరియు URL ప్రశ్న పారామితులను 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, మీరు npm లేదా నూలును ఉపయోగించి లైబ్రరీని ఇన్‌స్టాల్ చేయాల్సి ఉంటుంది @vueuse/core. ఇవి composables మీ Vue.js ప్రాజెక్ట్‌లో సాధారణ తర్కం మరియు స్థితిని మళ్లీ ఉపయోగించడంలో మీకు సహాయపడతాయి, అభివృద్ధి ప్రక్రియ మరియు కోడ్ నిర్వహణను ఆప్టిమైజ్ చేస్తాయి.