useMutationState
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;否则将使用 VueQueryPlugin 提供的 QueryClient。
返回值
Readonly<Ref<TResult[]>>
一个 ref,其值为一个数组,包含每个匹配修改经 select 转换后所得的结果。
示例
获取所有正在运行的修改的 variables:
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:
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 返回数组的最后一项,即可获得最新一次成功调用的结果:
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>