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 })
// This assumes that this endpoint will send us a response
// that contains something like this:
// {
// "username": "username-goes-here"
// }
.then(response => response.data.username)
}
}
}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 })
.then(response => response.data.username)
}
}
}This is especially useful with ES7 async functions:
new Vue({
asyncComputed: {
async someCalculation () {
const x = await someAsycFunction()
const y = await anotherAsyncFunction()
return x + y
}
}
})npm install --save vue-async-computedimport 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.
*/By default, in case of a rejected promise in an async computed property, vue-async-computed will take care of logging the error for you.
If you want to use a custom logging function, the plugin takes an errorHandler option, which should be the function you want called with the error information.
For example:
Vue.use(AsyncComputed, { errorHandler: function (msg) {
console.log('Hey, an error!')
console.log('---')
console.log(msg)
})You can pass false in order to silently ignore rejected promises.
MIT © Benjamin Fox