> Async data loading plugin for Vue.js
npm install vue-asyncable> Async data loading plugin for Vue.js
`` bash`
npm install vue-asyncable --save-dev
` 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')
}
}
})
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
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.