Skip to main content
Version: v2

Cross components request trigger

strategy type

middleware

Before using extension hooks, make sure you are familiar with the basic usage of alova.

In the past, if you want to trigger a request in another component in one component, you need to save the data in the Store and complete it by dispatching Action. Now, you can use this middleware to remove the limitation of component hierarchy, and quickly trigger any request action function in any component.

For example, after updating the menu data in a component, you can re-trigger the re-request of the side menu bar to refresh the data. When the list data is manipulated, the list update is triggered.

Example

Cross-component trigger request Demo

Features

  • Delegate the action function of any use hook in alova;
  • Trigger the delegated action function anywhere;

Install

# npm
npm install @alova/scene-vue --save
#yarn
yarn add @alova/scene-vue

use

Basic usage

Take vue3 as an example, the usage is the same in react and svelte.

Use actionDelegationMiddleware in component A to delegate the action function of useRequest.

import { actionDelegationMiddleware } from '@alova/scene-vue';

useRequest(queryTodo, {
//...
middleware: actionDelegationMiddleware('actionName')
});

In any component (such as component B), pass in the specified delegate name through accessAction to trigger the action function of useRequest in component A.

import { accessAction } from '@alova/scene-vue';

accessAction('actionName', delegatedActions => {
// Call the send function in component A
delegatedActions.send();

// Call the abort function in component A
delegatedActions.abort();
});
note
  1. All use hooks in alova support action function delegation, but the functions delegated by different use hooks are different.
  2. When using actionDelegationMiddleware, the delegate name can be passed in strings, numbers, and symbol values.

Batch trigger action function

In the above example, we use accessAction to trigger the action function of a use hook, but in fact, delegates with the same name will not override each other, but will be stored in a group, and we can use this name to trigger them at the same time The delegated function.

import { actionDelegationMiddleware } from '@alova/scene-vue';

useRequest(queryTodo, {
//...
middleware: actionDelegationMiddleware('actionName1')
});
import { actionDelegationMiddleware } from '@alova/scene-vue';

useRequest(queryTodo, {
//...
middleware: actionDelegationMiddleware('actionName1')
});
import { accessAction } from '@alova/scene-vue';

// Because the delegate hooks of component C and component D will be matched, the callback function will be executed twice
accessAction('actionName1', delegatedActions => {
// Call the send function in component C and component D
delegatedActions.send();

// Call the abort function in component C and component D
delegatedActions.abort();
});

At the same time, regular expressions can also be used in accessAction to trigger batches of action functions whose delegate names meet the conditions

import { actionDelegationMiddleware } from '@alova/scene-vue';

useRequest(queryTodo, {
//...
middleware: actionDelegationMiddleware('prefix_name1')
});
import { actionDelegationMiddleware } from '@alova/scene-vue';

useRequest(queryTodo, {
//...
middleware: actionDelegationMiddleware('prefix_name2')
});
import { accessAction } from '@alova/scene-vue';

// Because the delegate hooks of component F and component G will be matched, the callback function will be executed twice
accessAction(/^prefix_/, delegatedActions => {
// Call the send function in component F and component G
delegatedActions.send();

// Call the abort function in component F and component G
delegatedActions.abort();
});

Action function delegation list

Although the action functions delegated by most hooks are the same as the action functions themselves, this is not absolute. The following is the action function delegation list of each hook.

useRequest

namedescriptionfunction parametersreturn valueversion
sendSame as useRequset.send-
abortSame as useRequset.abort-
updateSame as useRequset.update-

useWatcher

Same as useRequest delegate list.

useFetcher

namedescriptionfunction parametersreturn valueversion
fetchSame as useFetcher.fetch-
abortSame as useFetcher.abort-
updateSame as useFetcher.update-

usePagination

namedescriptionfunction parametersreturn valueversion
refreshFor details, see usePagination action function-
insertFor details, see usePagination action function-
removeFor details, see usePagination action function-
replaceFor details, see usePagination action function-
reloadFor details, see usePagination action function-
updateFor details, see usePagination action function-
getStateGet paging related data by namestateKey: 'page' | 'pageSize' | 'data' | 'pageCount' | 'total' | 'isLastPage'Corresponding to the value of the statekey-

useSQRequest

Same as useRequest delegate list.

useForm

namedescriptionfunction parametersreturn valueversion
updateFormFor details, see useForm action function-
resetFor details, see useForm action function-
sendSame as useRequset.send-
abortSame as useRequset.abort-
updateSame as useRequset.update-

useCaptcha

Same as useRequest delegate list.

useRetriableRequest

namedescriptionfunction parametersreturn valueversion
stopSee useRetriableRequest action function for details-
sendSame as useRequset.send-
abortSame as useRequset.abort-
updateSame as useRequset.update-

useSerialRequest

Same as useRequest delegate list.

useSerialWatcher

Same as useRequest delegate list.