Installation
Sie können Vue Query über NPM installieren.
NPM
npm i @tanstack/vue-query
npm i @tanstack/vue-query
oder
pnpm add @tanstack/vue-query
pnpm add @tanstack/vue-query
oder
yarn add @tanstack/vue-query
yarn add @tanstack/vue-query
oder
bun add @tanstack/vue-query
bun add @tanstack/vue-query
Möchten Sie es ausprobieren, bevor Sie es herunterladen? Versuchen Sie das Basis Beispiel!
Vue Query ist mit Vue 2.x und 3.x kompatibel
Wenn Sie Vue 2.6 verwenden, stellen Sie sicher, dass Sie auch @vue/composition-api einrichten.
Vue Query Initialisierung
Bevor Sie Vue Query verwenden, müssen Sie es mit VueQueryPlugin initialisieren.
import { VueQueryPlugin } from '@tanstack/vue-query'
app.use(VueQueryPlugin)
import { VueQueryPlugin } from '@tanstack/vue-query'
app.use(VueQueryPlugin)
Verwendung der Composition API mit <script setup>
Alle Beispiele in unserer Dokumentation verwenden die <script setup> Syntax.
Vue 2-Benutzer können diese Syntax auch mit diesem Plugin verwenden. Bitte überprüfen Sie die Dokumentation des Plugins für Installationsdetails.
Wenn Sie kein Fan von <script setup> Syntax sind, können Sie alle Beispiele einfach in die normale Composition API-Syntax übersetzen, indem Sie den Code unter der setup() Funktion verschieben und die im Template verwendeten Werte zurückgeben.
<script setup>
import { useQuery } from '@tanstack/vue-query'
const { isPending, isFetching, isError, data, error } = useQuery({
queryKey: ['todos'],
queryFn: getTodos,
})
</script>
<template>...</template>
<script setup>
import { useQuery } from '@tanstack/vue-query'
const { isPending, isFetching, isError, data, error } = useQuery({
queryKey: ['todos'],
queryFn: getTodos,
})
</script>
<template>...</template>
