close

Εξερευνώντας 10 βασικά Vue.js Composables για τα έργα σας

Σε ένα έργο 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 σας επιτρέπουν να εφαρμόσετε debounce ή γκάζι σε λειτουργίες χειρισμού συμβάντων, βοηθώντας στον έλεγχο της συχνότητας της εκτέλεσης ενεργειών.

<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, πρέπει να εγκαταστήσετε τη @vueuse/core βιβλιοθήκη χρησιμοποιώντας npm ή νήμα. Αυτά composables σας βοηθούν να χρησιμοποιήσετε ξανά την κοινή λογική και κατάσταση στο έργο σας Vue.js, βελτιστοποιώντας τη διαδικασία ανάπτυξης και τη διαχείριση κώδικα.