译零 TransZero · TanStack Query 中文文档
主站

useMutationState

更新于 2026-11-02 Vue 查看英文原文 ↗
TypeScript
1function useMutationState<TResult = MutationState<unknown, Error, unknown, unknown>, TMutation extends Mutation<any, any, any, any> = MutationTypeFromResult<TResult>>(options?: 2  | MutationStateOptions<TResult, TMutation>3| (() => MutationStateOptions<TResult, TMutation>), queryClient?: QueryClient): Readonly<Ref<TResult[]>>;

定义于:packages/vue-query/src/useMutationState.ts:211

useMutationState 是一个组合式函数(composable),用于访问 MutationCache 中的所有修改(mutations)。你可以传入 filters(MutationFilters)来筛选匹配的修改,并传入 select 来转换修改状态。

options 可以是普通对象,也可以是响应式 getter(() => ({ ... }));若过滤器本身依赖其他响应式状态,请传入 getter。

类型参数

TResult

TResult = MutationState<unknown, Error, unknown, unknown>

TMutation

TMutation extends Mutation<any, any, any, any> = MutationTypeFromResult<TResult>

参数

options?

| MutationStateOptions<TResult, TMutation> | (() => MutationStateOptions<TResult, TMutation>) = {}

用于筛选匹配修改的 filters,以及可选的 select,用于转换修改状态。

options 的属性

基于 MutationStateOptions 构建。具体变更内容请参阅上方类型定义。

queryClient?

QueryClient

使用此参数可指定自定义的 QueryClient;否则将使用 VueQueryPlugin 提供的 QueryClient。

返回值

Readonly<Ref<TResult[]>>

一个 ref,其值为一个数组,包含每个匹配修改经 select 转换后所得的结果。

示例

获取所有正在运行的修改的 variables:

HTML
1<script setup lang="ts">2import { useMutationState } from '@tanstack/vue-query'34const pendingVariables = useMutationState({5  filters: { status: 'pending' },6  select: (mutation) => mutation.state.variables,7})8</script>9 10<template>{{ pendingVariables.length }} posts saving...</template>

通过 mutationKey 获取特定修改的所有 data:

HTML
1<script setup lang="ts">2import { useMutation, useMutationState } from '@tanstack/vue-query'34const mutationKey = ['posts']56// Some mutation that we want to get the state for7const mutation = useMutation({8  mutationKey,9  mutationFn: createPosts,10})1112const savedPosts = useMutationState({13  // this mutation key needs to match the mutation key of the given mutation (see above)14  filters: { mutationKey, status: 'success' },15  select: (mutation) => mutation.state.data,16})17</script>18 19<template>20  <button @click="mutation.mutate(['New Post'])">21    Create post ({{ savedPosts.length }} saved so far)22  </button>23</template>

通过 mutationKey 访问最新一次成功修改的 data。每次调用 mutate 都会在修改缓存中为 gcTime 毫秒添加一项新条目——配合下方的 status: 'success' 过滤器,检查 useMutationState 返回数组的最后一项,即可获得最新一次成功调用的结果:

HTML
1<script setup lang="ts">2import { computed } from 'vue'3import { useMutationState } from '@tanstack/vue-query'45const savedPosts = useMutationState({6  filters: { mutationKey: ['posts'], status: 'success' },7  select: (mutation) => mutation.state.data,8})910const latestSavedPost = computed(() => savedPosts.value[savedPosts.value.length - 1])11</script>12 13<template>{{ latestSavedPost ? 'Saved' : 'Nothing saved yet' }}</template>

本页为 TanStack Query 文档(Vue 版)的非官方中文翻译,原文由上游团队维护,遵循 MIT 许可。 译文如有偏差,以英文原文为准。

译自上游 59d11de