vue-async-data

by vuejs

Async data loading plugin

419 Stars 38 Forks Last release: Not found MIT License 15 Commits 1 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

THIS REPOSITORY IS DEPRECATED

vue-async-data

Async data loading plugin for Vue.js

NOTE:

Install

npm install vue-async-data

Usage

// 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:
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):

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:
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:
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:
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:

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.