Introdaction
vue
<template>
<ActionState src="reqres://login?delay=1">
<template #default="{ action }">
<b-button
color="primary"
@click="action('post', { email: 'eve.holt@reqres.in', password: 'cityslicka' })"
>
Action
</b-button>
</template>
<template #fallback>
<b-button
color="primary"
disabled
>
<Spinner
spinner="grow"
sm
aria-hidden="true"
/>
Loading...
</b-button>
</template>
<template #complete="{ data, status }">
<div v-if="status.value == 200">
Response: {{ data }}
</div>
<div v-else>
ErrorMessages: {{ data }}
</div>
<b-button
color="success-subtle"
@click="status.value = 0"
>
Retry
</b-button>
</template>
</ActionState>
</template>
ActionState Sources
| Title | Protocol | Description |
|---|---|---|
| Http | {custom protocol} | These are used when making HTTP requests on the client side. The domain and base path need to be set in advance. |
| Nuxt plugins helper | helper://{name} | Here are the functions to be executed on the client side. |
| Nuxt server API | api://{path} | Here are the functions to be executed on the server side. They can also be used when a Fetch with an APIKEY is required. |
Attributes
Src
Specify the ActionState Source URI.
For more details, please refer to the page of each Source.
Template
default
Describe the content to be displayed before execution.
The process will start when the action function is executed.
ts
action(method: string, params: any): Promise<void>
fallback
Describe the content to be displayed during execution.
complete
Describe the content to be displayed after execution.
You can determine whether the process was successful based on the value of status.value.