შეისწავლეთ 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 საშუალებას გაძლევთ გამოიყენოთ დებოუნსი ან დროსელი მოვლენის დამუშავების ფუნქციებზე, რაც დაგეხმარებათ მოქმედების შესრულების სიხშირის კონტროლში.

<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 პროექტში, ოპტიმიზაციას უწევს განვითარების პროცესს და კოდების მართვას.