Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vuejs/vue-async-data
Async data loading plugin
https://github.com/vuejs/vue-async-data
Last synced: 22 days ago
JSON representation
Async data loading plugin
- Host: GitHub
- URL: https://github.com/vuejs/vue-async-data
- Owner: vuejs
- License: mit
- Archived: true
- Created: 2015-08-10T21:25:41.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-12-25T22:59:07.000Z (about 6 years ago)
- Last Synced: 2024-10-30T00:55:16.347Z (3 months ago)
- Language: JavaScript
- Size: 108 KB
- Stars: 417
- Watchers: 35
- Forks: 38
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-cn - **vue-async-data ★174** - Async data loading plugin <sup>1.0 compatible</sup> (Awesome Vue.js [](https://github.com/sindresorhus/awesome) / Libraries & Plugins)
README
# THIS REPOSITORY IS DEPRECATED
## vue-async-data
> Async data loading plugin for Vue.js
**NOTE:**
- Does not work with Vue 2.0.
- You don't need this if you are using [vue-router](https://github.com/vuejs/vue-router). Use vue-router's [`route.data` hook](http://router.vuejs.org/en/pipeline/data.html) instead.
### Install
``` bash
npm install vue-async-data
```
### Usage
``` js
// assuming CommonJS
var Vue = require('vue')
var VueAsyncData = require('vue-async-data')
// use globally
// you can also just use `VueAsyncData.mixin` where needed
Vue.use(VueAsyncData)
```
Then, in your component options, provide an `asyncData` function:
``` js
Vue.component('example', {
data: function {
return {
msg: 'not loaded yet...'
}
},
asyncData: function (resolve, reject) {
// load data and call resolve(data)
// or call reject(reason) if something goes wrong
setTimeout(function () {
// this will call `vm.$set('msg', 'hi')` for you
resolve({
msg: 'hi'
})
}, 1000)
}
})
```
#### Promise
You can also return a promise that resolves to the data to be set (plays well with [vue-resource](https://github.com/vuejs/vue-resource)):
``` js
Vue.component('example', {
// ...
asyncData: function () {
var self = this
return someServiceThatReturnsPromise.get(12345)
.then(function (msg) {
// returning this as the Promise's resolve value
// will call `vm.$set('msg', msg)` for you
return {
msg: msg
}
// or, set it yourself:
// self.msg = msg
})
}
})
```
Parallel fetching with `Promise.all` and ES6:
``` js
Vue.component('example', {
// ...
asyncData() {
return Promise.all([
serviceA.get(123),
serviceB.get(234)
]).then(([a, b]) => ({a, b}))
}
})
```
#### Reloading Data
The component also gets a method named `reloadAsyncData`, which obviously reloads the data:
``` js
Vue.component('example', {
// ...
asyncData() {
// load data based on `this.params`
},
// reload when params change
watch: {
params: 'reloadAsyncData'
}
})
```
#### 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.
```
Or, if you prefer to wait until data loaded to display the component, you can use `wait-for` to listen for the `async-data` event, which is automatically emitted when the data is loaded:
``` html
```
### License
[MIT](http://opensource.org/licenses/MIT)