https://github.com/alovajs/vue-options
vue options statesHook and request function for mixins
https://github.com/alovajs/vue-options
Last synced: about 2 months ago
JSON representation
vue options statesHook and request function for mixins
- Host: GitHub
- URL: https://github.com/alovajs/vue-options
- Owner: alovajs
- License: mit
- Created: 2023-09-18T14:42:45.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-23T08:37:07.000Z (over 1 year ago)
- Last Synced: 2025-02-16T14:57:13.114Z (4 months ago)
- Language: TypeScript
- Homepage: https://alova.js.org/tutorial/framework/vue-options
- Size: 2.59 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# @alova/vue-options
Provide vue options support for alova's use hooks. 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.
> Available in both vue2 and vue3.
[](https://www.npmjs.com/package/@alova/vue-options)
[](https://github.com/alovajs/vue-options/actions/workflows/release.yml)
[](https://coveralls.io/github/alovajs/vue-options?branch=main)
[Official website](https://alova.js.org/extension/alova-mock) | [Core library alova](https://github.com/alovajs/alova)
[alova](https://github.com/alovajs/alova) is a lightweight request strategy library. It provides targeted request strategies for different request scenarios to improve application availability and fluency, and reduce Server-side pressure enables applications to have excellent strategic thinking like a wise man.
## Install
```bash
# use npm
npm install alova @alova/vue-options --save
# use yarn
yarn add alova @alova/vue-options
```
> alova version >= 2.13.1
## Usage
First use `vueOptionHook` to create an alova instance.
```javascript
import { createAlova, Method } from 'alova';
import GlobalFetch from 'alova/GlobalFetch';
import { VueOptionsHook } from '@alova/vue-options';
// api.js
const alovaInst = createAlova({
baseURL: 'http://example.com',
statesHook: VueOptionsHook,
requestAdapter: GlobalFetch(),
responded: response => response.json()
});
/** @type {() => Method} */
export const getData = () => alovaInst.Get('/todolist');
```
Then use `mapAlovaHook` to map the return value set of use hook to the component instance. The following is how to access the reactive state and operation functions:
1. You can access responsive status such as `loading/data/error` through the key of the collection, such as `this.key.loading`, `this.key.data`.
2. You can access the operation function through the key of the collection plus the function name, and use `$` to splice it, such as `this.key$send`, `this.key$onSuccess`.
Below is a complete example.
```html
{{ todoRequest.loading ? 'loading' : 'loaded' }}
{{ todoRequest.error ? todoRequest.error.message : '' }}
{{ JSON.stringify(todoRequest.data) }}
send
import { useRequest } from 'alova';
import { mapAlovaHook } from '@alova/vue-options';
import { getData } from './api';
export default {
// mapAlovaHook will return the mixins array, and 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 access this, the callback 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.sendArgs.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);
});
}
};
```
## function mapAlovaHook description
`mapAlovaHook` is used to map the state and function collection 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 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.
```javascript
// 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. In this case, arrow functions can be used
mapAlovaHook(vm => {
console.log(vm);
return {
todoRequest: useRequest(getData)
};
});
```
## Type
### Type inference
`@alova/vue-options` provides complete type support, whether typescript is used or not, the type of mapped value will be infered automatically, for example:
```javascript
this.todoRequest.loading; // boolean
this.todoRequest.error; // Error | undefined
this.todoRequest.data; // any
this.todoRequest$send; // (...args: any[]) => Promise
this.todoRequest$onSuccess; // (handler: SuccessHandler) => void
this.todoRequest$onError; // (handler: ErrorHandler) => void
this.todoRequest$onComplete; // (handler: CompleteHandler) => void
// ...
```
### Add types for response data
Except for `this.todoRequest.data`, all other values have the correct type, so how to set the type for `data` too? In fact, it is the same as alova used 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 response data.
```javascript
import { Method } from 'alova';
/** @type {() => Method} */
export const getData = () => alovaInst.Get('/todolist');
```
**typescript**
To add response data type in typescript, please read [alova documentation typescript chapter](https://alova.js.org/tutorial/advanced/typescript/#the-type-of-response-data)
## LICENSE
[MIT](https://en.wikipedia.org/wiki/MIT_License)