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

ਇਹ ਇੱਕ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਜਾਣਕਾਰੀ ਅਤੇ URL ਪੁੱਛਗਿੱਛ ਪੈਰਾਮੀਟਰਾਂ composable ਤੱਕ ਪਹੁੰਚ ਕਰਨ ਵਿੱਚ ਤੁਹਾਡੀ ਮਦਦ ਕਰਦਾ ਹੈ । router 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 ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਆਮ ਤਰਕ ਅਤੇ ਸਥਿਤੀ ਦੀ ਮੁੜ ਵਰਤੋਂ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ, ਵਿਕਾਸ ਪ੍ਰਕਿਰਿਆ ਅਤੇ ਕੋਡ ਪ੍ਰਬੰਧਨ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਂਦੇ ਹਨ।