vue options
Usually, use hook can only be used in vue's setup, but through the auxiliary function provided by @alova/vue-options
, you can also use alova's use hook in vue's options, which is perfectly compatible with almost all functions of alova. You can use all request strategies of alova/client
under options.
It can be used in both vue2 and vue3.
Installation
- npm
- yarn
npm install alova @alova/vue-options --save
yarn add alova @alova/vue-options
alova version >= 3.0.0
vue version >= 2.17.0
Usage
Map hook status and functions to vue instance
First use vueOptionHook
to create an alova instance.
import { createAlova, Method } from 'alova';
import adapterFetch from 'alova/fetch';
import { VueOptionsHook } from '@alova/vue-options';
// api.js
const alovaInst = createAlova({
baseURL: 'http://example.com',
statesHook: VueOptionsHook,
requestAdapter: adapterFetch(),
responded: response => response.json()
});
/** @type {() => Method<unknown, unknown, { content: string, time: string }[]>} */
export const getData = () => alovaInst.Get('/todolist');
Use mapAlovaHook
to map the return value collection of use hook to the component instance. Here is how to access the responsive state and operation function:
- You can use the key of the collection To access responsive states such as
loading/data/error
, such asthis.key.loading
,this.key.data
. - You can access the operation function by adding the function name to the collection key and concatenating it with
$
, such asthis.key$send
,this.key$onSuccess
.
The following is a complete example.
<template>
<div>
<span role="loading">{{ todoRequest.loading ? 'loading' : 'loaded' }}</span>
<span role="error">{{ todoRequest.error ? todoRequest.error.message : '' }}</span>
<div role="data">{{ JSON.stringify(todoRequest.data) }}</div>
<button
@click="todoRequest$send"
role="btnSend">
send
</button>
</div>
</template>
<script>
import { useRequest } from 'alova/client';
import { mapAlovaHook } from '@alova/vue-options';
import { getData } from './api';
export default {
// mapAlovaHook will return an array of mixins, the usage of use hook is the same as before
mixins: mapAlovaHook(function (vm) {
// You can access the component instance through this or vm
// When using this, this callback function cannot be an arrow function
console.log(this, vm);
return {
todoRequest: useRequest(getData)
};
}),
created() {
this.todoRequest.loading;
this.todoRequest$send();
this.todoRequest$onSuccess(event => {
event.data.match;
event.args.copyWithin;
});
this.todoRequest$onSuccess(event => {
console.log('success', event);
});
this.todoRequest$onError(event => {
console.log('error', event);
});
},
mounted() {
this.todoRequest$onComplete(event => {
console.log('complete', event);
});
}
};
</script>
Computed properties
If you need to define a computed property that depends on the request status related to the hook, just write it as usual.
export default {
computed: {
todoRequestLoading() {
return this.todoRequest.loading;
},
todoRequestData() {
return this.todoRequest.data;
}
}
};
Listening to hook status changes
The usage of monitoring status is also consistent with vue.
export default {
watch: {
'todoRequest.loading'(newVal, oldVal) {
// ...
}
}
};
Function description
mapAlovaHook
mapAlovaHook
is used to map the state and function set returned by alova's use hook to the vue component instance through mixins. It receives a callback function and returns the return value collection of the use hook.
It is worth noting that the callback function will be executed in the created
phase, and you can access the vue component instance in the following way.
// 1. Access the component instance through this. Note that the callback function cannot be an arrow function
mapAlovaHook(function () {
console.log(this);
return {
todoRequest: useRequest(getData)
};
});
// =======================
// 2. Access the component instance through function parameters. You can use arrow functions at this time
mapAlovaHook(vm => {
console.log(vm);
return {
todoRequest: useRequest(getData)
};
});
Type support
Automatic inference
@alova/vue-options
provides complete ts type support. Regardless of whether typescript is used, the mapped value type will be automatically inferred, for example:
this.todoRequest.loading; // boolean
this.todoRequest.error; // Error | undefined
this.todoRequest.data; // any
this.todoRequest$send; // (...args: any[]) => Promise<any>
this.todoRequest$onSuccess; // (handler: SuccessHandler) => void
this.todoRequest$onError; // (handler: ErrorHandler) => void
this.todoRequest$onComplete; // (handler: CompleteHandler) => void
// ...
Add types to response data
Except for this.todoRequest.data
, other values have the correct type, so how to set the type for data
? In fact, it is the same as alova in other environments.
javascript
In javascript, you can use type annotations to add types. The first two generic parameters of Method are unknown
, and the third generic parameter is the type of the response data
import { Method } from 'alova';
/** @type {() => Method<unknown, unknown, { content: string, time: string }[]>} */
export const getData = () => alovaInst.Get('/todolist');
typescriptAdd response data types in typescript, please read the alova documentation typescript chapter
Limitations
- Manage extra states is not supported yet.