Spezifische Verwendung von Vues neuem Spielzeug VueUse

Vorwort

Als ich mir das letzte Mal die Front-End-Early-Chat-Konferenz ansah, erwähnte Herr You erneut eine Bibliothek namens VueUse. Aus Neugierde habe ich darauf geklickt, um einen Blick darauf zu werfen. Wow, ich bin genau so. Ist es nicht das, was ich einmal wollte, nämlich selbst eine Vue-Version der Hook-Bibliothek zu schreiben? (Weil ich denke, dass Vue3 und Hooks sich zu sehr ähneln) Aber ich bin noch nicht sehr gut darin, und jetzt haben Sie meinen Traum zerstört. Schauen wir es uns gemeinsam an! VueUse-Autor Anthony Fu teilt zusammensetzbares Vue

Was ist VueUse

VueUse ist nicht Vue.use. Es handelt sich um eine Reihe allgemeiner Tools für die Vue Composition API für Vue 2 und 3. Es ist eine der am höchsten bewerteten Bibliotheken ihrer Art weltweit. Die ursprüngliche Absicht bestand darin, alle JS-APIs, die ursprünglich keine Reaktionsfähigkeit unterstützten, reaktionsfähig zu machen und den Programmierern so die Mühe zu ersparen, den entsprechenden Code selbst zu schreiben.

VueUse ist eine Sammlung von Hilfsfunktionen, die auf der Composition API basieren. Einfach ausgedrückt handelt es sich hierbei um ein Tool-Funktionspaket, mit dem Sie einige gängige Funktionen schnell implementieren können, sodass Sie sie nicht selbst schreiben und sich wiederholende Arbeitsinhalte lösen müssen. Und die Composition API ist gekapselt. Machen Sie sich mit vue3 vertrauter.

Einfach zu bedienen

Installieren Sie VueUse

npm ich @vueuse/core

Verwenden Sie Vue

// Importieren import { useMouse, usePreferredDark, useLocalStorage } von '@vueuse/core'

Standard exportieren {
  aufstellen() {
    // verfolgt die Mausposition
    const { x, y } = useMouse()

    // bevorzugt der Benutzer ein dunkles Design
    const isDark = usePreferredDark()

    // Status im lokalen Speicher beibehalten
    const store = useLocalStorage(
      'mein-Speicher',
      {
        Name: "Apple",
        Farbe: 'rot',
      },
    )

    return { x, y, isDark, speichern }
  }
}

Drei Funktionen werden oben aus VueUse importiert: useMouse, usePreferredDark und useLocalStorage. useMouse ist eine Methode, die die aktuellen Mauskoordinaten überwacht. Sie ermittelt die aktuelle Position der Maus in Echtzeit. usePreferredDark ist eine Methode, um festzustellen, ob der Benutzer dunkle Farben bevorzugt. Sie ermittelt in Echtzeit, ob der Benutzer dunkle Themen mag. useLocalStorage ist eine Methode zum persistenten Speichern von Daten, die die Daten im lokalen Speicher persistent macht.

Es gibt auch die bekannten Anti-Shake- und Throttling-Funktionen

importiere { throttleFilter, debounceFilter, useLocalStorage, useMouse } von '@vueuse/core'

// Ändere den Wert von localStorage auf gedrosselte Weise const storage = useLocalStorage('my-key', { foo: 'bar' }, { eventFilter: throttleFilter(1000) })

// Aktualisiere die Mausposition nach 100 ms const { x, y } = useMouse({ eventFilter: debounceFilter(100) })

Es gibt auch Funktionen, die in Komponenten verwendet werden

<Skript-Setup>
importiere { ref } von 'vue'
importiere { onClickOutside } von '@vueuse/core'

const el = ref()

Funktion schließen () {
  /* … */
}

beiKlickAußen(el, schließen)
</Skript>

<Vorlage>
  <div ref="el">
    Klicken Sie auf „Außerhalb von mir“
  </div>
</Vorlage>

Im obigen Beispiel wird die Funktion onClickOutside verwendet, die beim Klicken außerhalb des Elements eine Callback-Funktion auslöst. Das ist hier die Schließfunktion. So wird es in Komponenten verwendet

<Skript-Setup>
importiere { OnClickOutside } von '@vueuse/components'

Funktion schließen () {
  /* … */
}
</Skript>

<Vorlage>
  <OnClickOutside @trigger="schließen">
    <div>
      Klicken Sie auf „Außerhalb von mir“
    </div>
  </BeiKlickAußen>
</Vorlage>

Hinweis ⚠️ Die Funktion OnClickOutside ist hier eine Komponente und keine Funktion. Erfordert die Installation von @vueuse/components in package.json.

Es gibt auch Funktionen zum Teilen des globalen Status

//store.js
importiere { createGlobalState, useStorage } von '@vueuse/core'

exportiere const useGlobalState = createGlobalState(
  () => useStorage('vue-use-local-storage'),
)

//komponente.js
importiere { useGlobalState } aus './store'

exportiere StandarddefiniereKomponente({
  aufstellen() {
    const state = useGlobalState()
    return { Status }
  },
})

Dies ist eine einfache Statusfreigabe. Erweitern Sie es ein wenig. Durch die Übergabe eines Parameters können Sie den Wert des Stores ändern.

In Bezug auf das Abrufen handelt es sich im Folgenden um eine einfache Anfrage.

importiere { useFetch } von '@vueuse/core'

const { isFetching, Fehler, Daten } = useFetch(URL)

Es verfügt außerdem über viele optionale Parameter, die angepasst werden können.

// 100 ms Zeitüberschreitung const { data } = useFetch(url, { timeout: 100 })

// Anforderungsabfangen const { data } = useFetch(url, {
  async beforeFetch({ url, optionen, abbrechen }) {
    const myToken = warte auf getMyToken()

    wenn (!meinToken)
      stornieren()

    Optionen.Header = {
      ...Optionen.Header,
      Autorisierung: `Bearer ${myToken}`,
    }

    zurückkehren {
      Optionen
    }
  }
})

// Antwortabfangen const { data } = useFetch(url, {
  nachFetch(ctx) {
    wenn (ctx.data.title === 'HxH')
      ctx.data.title = 'Hunter x Hunter' // Ändert die Antwortdaten

    ctx zurückgeben
  },
})

Mehr

Weitere Informationen finden Sie in der VueUse-Dokumentation. Es gibt auch eine weitere vue-demi

Dies ist das Ende dieses Artikels über die spezifische Verwendung von Vues neuem Spielzeug VueUse. Weitere relevante Vue VueUse-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!