Composables உங்கள் திட்டப்பணிகளுக்கு 10 அத்தியாவசிய Vue.jகளை ஆராய்கிறது

Vue.js திட்டத்தில், composables வெவ்வேறு கூறுகளுக்கு இடையே தர்க்கம் மற்றும் நிலையை மீண்டும் பயன்படுத்த பயன்படும் செயல்பாடுகள். composables உங்கள் திட்டத்தில் நீங்கள் பயன்படுத்தக்கூடிய சில பிரபலமான Vue.js இங்கே:

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>  

இவற்றைப் பயன்படுத்த, npm அல்லது நூலைப் பயன்படுத்தி நூலகத்தை composables நிறுவ வேண்டும். @vueuse/core இவை composables உங்கள் Vue.js திட்டத்தில் பொதுவான தர்க்கத்தையும் நிலையையும் மீண்டும் பயன்படுத்த உதவுகின்றன, வளர்ச்சி செயல்முறை மற்றும் குறியீடு நிர்வாகத்தை மேம்படுத்துகின்றன.