Composables আপনার প্রকল্পের জন্য 10টি প্রয়োজনীয় Vue.js অন্বেষণ করা হচ্ছে

একটি 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 এইগুলি composables আপনাকে আপনার Vue.js প্রকল্পে সাধারণ যুক্তি এবং অবস্থা পুনঃব্যবহার করতে সাহায্য করে, উন্নয়ন প্রক্রিয়া এবং কোড পরিচালনাকে অপ্টিমাইজ করে।