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 npm અથવા યાર્નનો ઉપયોગ કરીને લાઇબ્રેરી ઇન્સ્ટોલ કરવાની જરૂર છે. આ composables તમને તમારા Vue.js પ્રોજેક્ટમાં સામાન્ય તર્ક અને સ્થિતિનો ફરીથી ઉપયોગ કરવામાં મદદ કરે છે, વિકાસ પ્રક્રિયા અને કોડ મેનેજમેન્ટને ઑપ્ટિમાઇઝ કરે છે.