https://github.com/yariksav/vue-asyncable
Async data loading plugin for Vue.js
https://github.com/yariksav/vue-asyncable
Last synced: 3 months ago
JSON representation
Async data loading plugin for Vue.js
- Host: GitHub
- URL: https://github.com/yariksav/vue-asyncable
- Owner: yariksav
- License: mit
- Created: 2019-01-14T19:24:37.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-12-27T16:07:22.000Z (over 5 years ago)
- Last Synced: 2025-01-31T10:36:58.603Z (4 months ago)
- Language: JavaScript
- Size: 18.6 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## vue-asyncable
> Async data loading plugin for Vue.js
### Install
``` bash
npm install vue-asyncable --save-dev
```
### Usage
``` js
// assuming CommonJS
import { Asyncable } from 'vue-asyncable'
```
Then, in your component options, provide an `asyncData` function:
``` js
Vue.component('example', {
mixins: ['Asyncable'],
data () {
return {
orders: [],
news: []
}
},
asyncData () {
return {
orders: this.$axios.$get('api/orders'),
news: this.$axios.$get('api/news')
}
}
})
```
### Object
Property asyncData can be simple object. In this case you don't need to define initial data elements, the module will set it's automatically
``` js
Vue.component('example', {
// ...
asyncData: {
orders: axios.$get('api/orders', { user_id: profile.id }),
news: axios.$get('api/news', { user_id: profile.id })
}
})
```
### Promise
You can also return a promise that resolves to the data, and return object with promises and siple types
``` js
Vue.component('example', {
mixins: [Asyncable],
data () {
return {
profile: null,
orders: null,
news: null
}
}
async asyncData () {
let profile = await this.$axios.$get('api/profile')
return {
profile,
orders: this.$axios.$get('api/orders', { user_id: profile.id }),
news: this.$axios.$get('api/news', { user_id: profile.id })
}
}
})
```
In this case you have to predefine all params in data function
### Use promises in data function
You can define props with promises directly in data function and mixin will:
1) set params to null
2) call all promise functions
3) when promises have resolved - assign to data by key
``` js
Vue.component('example', {
mixins: [Asyncable],
async data () {
return {
simpleParam: 'test',
orders: this.$axios.$post('api/orders', { user_id: profile.id }),
news: this.$axios.$post('api/news', { user_id: profile.id })
}
}
})
```
#### Loading State
Your component automatically gets a `$loadingAsyncData` meta property, which allows you to display a loading state before the data is loaded:
``` html
Loading...
Loaded. Put your real content here.
```
### License
[MIT](http://opensource.org/licenses/MIT)