Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/egoist/vue-fetch-data
A simple and declarative way to fetch data for Vue components.
https://github.com/egoist/vue-fetch-data
axios fetch vue
Last synced: 4 months ago
JSON representation
A simple and declarative way to fetch data for Vue components.
- Host: GitHub
- URL: https://github.com/egoist/vue-fetch-data
- Owner: egoist
- License: mit
- Created: 2017-02-06T16:34:40.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2021-12-25T14:18:23.000Z (about 3 years ago)
- Last Synced: 2024-10-23T14:07:08.010Z (4 months ago)
- Topics: axios, fetch, vue
- Language: JavaScript
- Size: 51.8 KB
- Stars: 66
- Watchers: 4
- Forks: 12
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-fetch-data
[](https://npmjs.com/package/vue-fetch-data) [](https://npmjs.com/package/vue-fetch-data) [](https://circleci.com/gh/egoist/vue-fetch-data) [](https://github.com/egoist/donate)
> A simple and declarative way to fetch data for Vue components.
## Features
- Small-size, only 800 bytes gzipped
- Fetch and compose data in a declarative way
## Install
```bash
yarn add vue-fetch-data
```
## Usage
An example component which fetches a GitHub user:
```js
import Vue from 'vue'
import FetchData from 'vue-fetch-data'
Vue.use(FetchData)
```
```vue
Loading...
{{ user.value.login }}
{{ user.reason.message }}
export default {
props: ['username'],
// make sure you set the initial value of that property to `{}`
data: () => ({ user: {} }),
fetch: {
user: vm => `https://api.github.com/users/${vm.username}`
}
}
```
Then boom, check out live demo at https://vue-fetch-data.surge.sh
### fetch
The `fetch` in component options is an `Object` which is similar to `computed` option.
#### Examples
The value of each entry can be `string` `Object` or a function which returns those. The returned `Object` could contain any [axios](https://github.com/mzabriskie/axios) option, the returned `string` will be used as `url` and fetched in `GET` method.
```js
export default {
fetch: {
user() {
return `https://api.github.com/users/${this.username}`
},
article: 'https://get-article-api.com/api/get_post',
users: {
url: 'https://get-users/api/users',
method: 'POST',
data: {
offset: 20
}
}
}
}
```
#### poll
Refetch in every `poll` ms:
```js
export default {
fetch: {
posts: vm => ({
url: '/api/posts',
poll: 1000, // update every second
params: {
limit: vm.limit,
offset: vm.offset
}
})
}
}
```
#### commit
Instead of updating data in current component, you can use `commit` to commit a Vuex mutation:
```js
export default {
computed: {
...mapState(['user'])
},
fetch: {
user: {
commit: 'UPDATE_USER',
url: '/user/egoist'
}
}
}
```
And your vuex store would look like:
```js
{
state: {
user: {}
},
mutation: {
UPDATE_USER(state, payload) {
state.user = payload
}
}
}
```
### this.$fetch
You can also manually trigger it:
```js
export default {
data: () => ({username: 'egoist', user: {}}),
fetch: {
user: vm => `/api/user/${vm.username}`
}
watch: {
username() {
this.$fetch('user')
}
}
}
```
### this.$http
Access `axios` directly, which means you can do `this.$http.get/post` and such in component.
### state and value
It's just like [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
- pending: initial state, not fulfilled or rejected.
- fulfilled: meaning that the operation completed successfully.
- rejected: meaning that the operation failed.
- value: the data which is fetched by the request
- reason: the reason(Error) why the request failed
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## Author
**vue-fetch-data** © [egoist](https://github.com/egoist), Released under the [MIT](./LICENSE) License.
Authored and maintained by egoist with help from contributors ([list](https://github.com/egoist/vue-fetch-data/contributors)).
> [egoistian.com](https://egoistian.com) · GitHub [@egoist](https://github.com/egoist) · Twitter [@_egoistlily](https://twitter.com/_egoistlily)