Σε ένα έργο 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, βελτιστοποιώντας τη διαδικασία ανάπτυξης και τη διαχείριση κώδικα.