Instalación
INFO
La fuente original (en ingles) de este tutorial se encuentra aquí
Puede instalar Vue Query a través de NPM.
"v5 está actualmente disponible como candidato a lanzamiento. No anticipamos ningún cambio importante en la API de ahora en adelante. Le recomendamos que lo pruebe e informe cualquier problema que encuentre."
NPM
$ npm i @tanstack/vue-query
# or
$ pnpm add @tanstack/vue-query
# or
$ yarn add @tanstack/vue-query
# or
$ bun add @tanstack/vue-query
"¿Quieres probarlo antes de descargarlo? ¡Prueba el ejemplo básico!"
Vue Query es compatible con Vue 2.x y 3.x
"Si está utilizando Vue 2.6, asegúrese de configurar también @vue/composition-api"
Inicialización Vue Query
Antes de usar Vue Query, debe inicializarlo usando VueQueryPlugin
import { VueQueryPlugin } from '@tanstack/vue-query'
app.use(VueQueryPlugin)
Uso de la Composition API con <script setup>
Todos los ejemplos de nuestra documentación utilizan la sintaxis <script setup>
.
Los usuarios de Vue 2 también pueden usar esa sintaxis usando este complemento. Consulte la documentación del complemento para obtener detalles de instalación.
Si no es fanático de la sintaxis <script setup>
, puede traducir fácilmente todos los ejemplos a la sintaxis normal de la Composition API moviendo el código bajo la función setup()
y devolviendo los valores utilizados en la plantilla.
<script setup>
import { useQuery } from '@tanstack/vue-query'
const { isPending, isFetching, isError, data, error } = useQuery({
queryKey: ['todos'],
queryFn: getTodos,
})
</script>
<template>...</template>