close

Tutustu 10 olennaiseen Vue.js: Composables ään projekteillesi

Vue.js-projektissa composables ovat toimintoja, joita käytetään logiikan ja tilan uudelleenkäyttöön eri komponenttien välillä. Tässä on joitain suosittuja Vue.js-tiedostoja composables, joita voit käyttää projektissasi:

useLocalStorage ja useSessionStorage

Niiden composables avulla voit tallentaa ja hallita tietoja paikallisessa storage tai session storage selaimessa.

<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 ja useThrottle

Niiden composables avulla voit soveltaa palautusta tai kaasua tapahtumien käsittelytoimintoihin, mikä auttaa hallitsemaan toimintojen suoritustiheyttä.

<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

Tämä composable auttaa sinua seuraamaan mediakyselyitä ja suorittamaan reagoivia toimintoja näytön koon mukaan.

<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

Tämä composable auttaa hallitsemaan asynkronisia tehtäviä ja valvomaan niiden tilaa(odottaa, menestys, virhe).

<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

Tämä composable auttaa sinua seuraamaan DOM-elementtien tapahtumia ja suorittamaan vastaavia toimintoja.

<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

Tämä composable auttaa sinua käyttämään router tietoja ja URL-kyselyparametreja sovelluksessa 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

Tämä composable auttaa hallitsemaan sivuttujen tietojen näyttö- ja navigointitoimintoja.

<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

Tämä composable auttaa sinua seuraamaan elementin leikkauskohtaa:n kanssa viewport, mikä on hyödyllistä suoritettaessa toimintoja, kun elementti tulee näkyviin tai katoaa.

<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

Tämä composable auttaa sinua kopioimaan tietoja clipboard ja hallitsemaan kopiointitilaa.

<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

Tämä composable auttaa hallitsemaan URL-kyselyn tilaa ja päivittämään sivun sisältöä URL-kyselyiden perusteella.

<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>

Huomaa, että käyttääksesi näitä composables, sinun on asennettava @vueuse/core kirjasto käyttämällä npm- tai lankaa. Niiden composables avulla voit käyttää uudelleen yleistä logiikkaa ja tilaa Vue.js-projektissasi, mikä optimoi kehitysprosessin ja koodinhallinnan.