📦 this package allows Axios to be used in the Composition API for vue@next
P.S: If you want updates or a fixes - go to repository and send you suggest here
required vue 3.0.0 or higher
npm i vue-use-axios
yarn add vue-use-axios
<template>
<div>
<strong>loading: {{ (state.requested && !state.finished && !state.canceled) ? 'true' : 'false' }}</strong>
<button>Load posts</button>
<div class="posts">
<div class="post-item" v-for="(item, i) of state.payload" :key="i">
<span> {{ item }} </span>
</div>
</div>
</div>
</template>
<script>
import { useAxios } from 'vue-use-axios';
export default {
name: 'app',
setup() {
// get state and request method
const { state, get } = useAxios('/path/to/posts');
// run get request from /api/posts on submit
const onSubmit = async () => {
await get();
}
...
return {
onSubmit,
state,
...
}
},
}
</script>
useAxios() support config from Axios example:
import { useAxios } from 'vue-use-axios';
const { state } = useAxios('/path/to/url', {
headers: {
'content-type': 'application/json',
...
}
})
state contains the status about the current instance
const state = {
url, // instance url
payload, // payload data
requested, // request is running
finished, // request success finished
canceled, // request canceled with erorrs
errorMessage, // request error message
}
all requests async/await
import { useAxios } from 'vue-use-axios';
const posts = useAxios('path/to/posts');
// Get Posts
posts.get()
console.log(posts.state.payload) // ['post-1', 'post-2'...]
// Create post
posts.post('Hello World!')
console.log(posts.state.payload) // ['Hello World!', 'post-1', 'post-2' ...]
// Delete post
posts.delete(1) // /:post-id
console.log(posts.state.payload) // ['Hello World!', 'post-2' ...]
...