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} | クライアントサイドでHttpリクエストする場合に利用します。 ドメインやベースパスは事前に設定する必要があります。 |
| Nuxt plugins helper | helper://{name} | クライアントサイドで実行する関数を記載します。 |
| Nuxt server API | api://{path} | サーバーサイドで実行する関数を記載します。 APIKEYを利用するFetchが必要な際にも利用できます。 |
Attributes
Src
ActionState Source URIを指定します。
詳細は各Sourceのページを確認してください。
Template
default
実行前に表示する内容を記載します。
action関数を実行すると処理が開始されます。
ts
action(method: string, params: any): Promise<void>
fallback
実行中に表示する内容を記載します。
complete
実行後に表示する内容を記載します。
status.value の値で処理が成功したかどうかを判断できます。