injectMutationState
TypeScript
1function injectMutationState<TResult = MutationState<unknown, Error, unknown, unknown>>(injectMutationStateFn?: () => MutationStateOptions<TResult>, options?: InjectMutationStateOptions): Signal<TResult[]>;定义于:packages/angular-query-experimental/src/inject-mutation-state.ts:114
注入一个信号,使你能够访问 MutationCache 中的所有修改(mutations)。你可以传入 filters(MutationFilters)来筛选目标修改,并传入 select 来转换修改状态。
类型参数
TResult
TResult = MutationState<unknown, Error, unknown, unknown>
参数
injectMutationStateFn?
() => MutationStateOptions<TResult>
一个返回 filters 以筛选匹配的修改、并可选返回 select 以转换修改状态的函数。该函数与 Angular 的 computed 类似,运行于响应式上下文中,因此在其中读取的信号会动态重新筛选匹配的修改。
options?
额外配置
options 属性
| 属性 | 类型 | 描述 |
|---|---|---|
injector? |
Injector |
创建修改状态信号所用的 Injector。若未提供此选项,则使用当前注入上下文(通过 inject 获取)。 |
返回值
Signal<TResult[]>
一个信号,其值为一个数组,包含每个匹配修改经 select 转换后的结果。
示例
获取所有正在运行的修改的 variables:
angular-ts
1@Component({2 selector: 'pending-posts',3 template: `{{ pendingVariables().length }} posts saving...`,4})5export class PendingPosts {6 readonly pendingVariables = injectMutationState(() => ({7 filters: { status: 'pending' },8 select: (mutation) => mutation.state.variables,9 }))10}通过 mutationKey 获取特定修改的所有 data:
angular-ts
1const mutationKey = ['posts']2 3@Component({4 selector: 'posts',5 template: `6 <button (click)="createPost()">7 Create post ({{ savedPosts().length }} saved so far)8 </button>9 `,10})11export class Posts {12 // Some mutation that we want to get the state for13 readonly createPostMutation = injectMutation(() => ({14 mutationKey,15 mutationFn: createPosts,16 }))17 18 readonly savedPosts = injectMutationState(() => ({19 // this mutation key needs to match the mutation key of the given mutation (see above)20 filters: { mutationKey, status: 'success' },21 select: (mutation) => mutation.state.data,22 }))23 24 createPost() {25 this.createPostMutation.mutate(['New Post'])26 }27}