vue-asyncable

vue-asyncable

> Async data loading plugin for Vue.js

$3

`` bash
npm install vue-asyncable --save-dev
`

$3

` 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')
}
}
})
`

$3

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 })
}
})
`


$3

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

$3

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


$3

MIT