异步初始值

异步初始值

假设您想从 API 获取一些数据，并将其用作表单的初始值。

虽然这个问题表面上听起来很简单，但您可能没有想到一些隐藏的复杂性。

例如，您可能希望在获取数据时显示加载微调器，或者您可能希望优雅地处理错误。

同样，您也可能会寻找一种缓存数据的方法，这样您就不必在每次渲染表单时都获取数据。

虽然我们可以从头开始实现许多这些功能，但最终看起来会很像我们维护的另一个项目：TanStack Query。

因此，本指南向您展示如何将 TanStack Form 与 TanStack Query 混合搭配，以实现所需的行为。

基本用法

vue

<script setup lang="ts">
import { useForm } from '@tanstack/vue-form'
import { useQuery } from '@tanstack/vue-query'
import { watchEffect, reactive } from 'vue'

const { data, isLoading } = useQuery({
  queryKey: ['data'],
  queryFn: async () => {
    await new Promise((resolve) => setTimeout(resolve, 1000))
    return { firstName: 'FirstName', lastName: 'LastName' }
  },
})

const firstName = computed(() => data.value?.firstName || '')
const lastName = computed(() => data.value?.lastName || '')

const defaultValues = reactive({
  firstName,
  lastName,
})

const form = useForm({
  defaultValues,
  onSubmit: async ({ value }) => {
    // Do something with form data
    console.log(value)
  },
})
</script>

<template>
  <p v-if="isLoading">Loading..</p>
  <form v-else @submit.prevent.stop="form.handleSubmit">
    <!-- ... -->
  </form>
</template>

<script setup lang="ts">
import { useForm } from '@tanstack/vue-form'
import { useQuery } from '@tanstack/vue-query'
import { watchEffect, reactive } from 'vue'

const { data, isLoading } = useQuery({
  queryKey: ['data'],
  queryFn: async () => {
    await new Promise((resolve) => setTimeout(resolve, 1000))
    return { firstName: 'FirstName', lastName: 'LastName' }
  },
})

const firstName = computed(() => data.value?.firstName || '')
const lastName = computed(() => data.value?.lastName || '')

const defaultValues = reactive({
  firstName,
  lastName,
})

const form = useForm({
  defaultValues,
  onSubmit: async ({ value }) => {
    // Do something with form data
    console.log(value)
  },
})
</script>

<template>
  <p v-if="isLoading">Loading..</p>
  <form v-else @submit.prevent.stop="form.handleSubmit">
    <!-- ... -->
  </form>
</template>

这将显示加载文本，直到获取数据，然后它将使用获取的数据作为初始值来渲染表单。

基本用法

订阅 Bytes

订阅 Bytes