Package Exports

vue-async-computed

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-async-computed) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-async-computed

With this plugin, you can have have computed properties in Vue that are computed asynchronously.

Without using this plugin, you can't do this:

new Vue({
  data: {
    userId: 1
  },
  computed: {
    username: {
      // Using vue-resource
      return Vue.http.get('/get-username-by-id', { id: this.userId })
    }
  }
}

Or rather, you could, but it wouldn't do what you'd want it to do. But using this plugin, it works just like you'd expect:

new Vue({
  data: {
    userId: 1
  },
  asyncComputed: {
    username: {
      return Vue.http.get('/get-username-by-id', { id: this.userId })
    }
  }
}

This is especily useful with ES7 async functions:

new Vue({
  asyncComputed: {
    async someCalculation () {
      const x = await someAsycFunction()
      const y = await anotherAsyncFunction()
      return x + y
    }
  }
})

Install

npm install --save vue-async-computed

Usage example

import AsyncComputed from 'vue-async-computed'

/* Initialize the plugin */
Vue.use(AsyncComputed)

/* Then, when you create a Vue instance (or component),
   you can pass an object named "asyncComputed" as well as
   or instead of one named "computed". The functions you pass
   to "asyncComputed" should return promises, and the values
   those promises resolve to are then asynchronously bound to
   the Vue instance as the promises resolve. Just like with
   normal computed properties, if the data the property depends
   on changes then the property is re-run automatically.
   
   You can almost completely ignore the fact that behind the
   scenes they are asynchronous. The one thing to remember is
   that until a asynchronously property's promise resolves
   for the first time, the value of the computed property is null.
*/

const vm = new Vue({
  data: {
    x: 2,
    y: 3
  },
  asyncComputed: {
    sum () {
      const sum = this.x + this.y
      return new Promise(resolve =>
        setTimeout(() => resolve(sum), 1000)
      )
    }
  }
})

/* Until one second has passed, vm.sum will be null.
   After that, vm.sum will be 5. If you change vm.x or vm.y,
   one second later vm.sum will automatically update itself to be
   the sum of what you set vm.x and vm.y to be a second before. 
*/