vue-async-computed
This plugin is now Vue 2.0 compatible!
With this plugin, you can have computed properties in Vue that are computed asynchronously.
Without using this plugin, you can't do this:
data: userId: 1 computed: { // Using vue-resource return Vuehttp // This assumes that this endpoint will send us a response // that contains something like this: // { // "username": "username-goes-here" // } }
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:
data: userId: 1 asyncComputed: { return Vuehttp }
This is especially useful with ES7 async functions:
asyncComputed: async { const x = await const y = await return x + y }
Install
npm install --save vue-async-computed
Alternately, you can link it directly from a CDN:
<!-- That will always point to the latest version of vue-async-computed. You probably want to instead pin it to a specific version:-->
When used with a module system such as webpack
or browserify
, you need to explicitly install vue-async-computed
via Vue.use()
:
Vue
You don't need to do this when using global script tags. So long as you include vue-async-computed
in a script tag after Vue itself, it will be installed automatically.
Usage example
/* Initialize the plugin */Vue /* Then, when you create a Vue instance (or component), you can pass an object named "asyncComputed" as well as or instead of the standard "computed" option. 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 they resolve. Just as 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 asynchronous property's promise resolves for the first time, the value of the computed property is null.*/ const vm = data: x: 2 y: 3 asyncComputed: { const total = thisx + thisy return } /* 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, then one second later vm.sum will automatically update itself to be the sum of the values to which you set vm.x and vm.y the previous second.*/
Like with regular synchronous computed properties, you can pass an object
with a get
method instead of a function, but unlike regular computed
properties, async computed properties are always getter-only. If the
object provided has a set
method it will be ignored.
Async computed properties can also have a custom default value, which will be used until the data is loaded for the first time:
data: postId: 1 asyncComputed: blogPostContent: // The `get` function is the same as the function you would // pass directly as the value to `blogPostContent` if you // didn't need to specify a default value. return Vuehttp // The computed proporty `blogPostContent` will have // the value 'Loading...' until the first time the promise // returned from the `get` function resolves. default: 'Loading...' /* Now you can display {{blogPostContent}} in your template, which will show a loading message until the blog post's content arrives from the server.*/
You can instead define the default value as a function, in order to depend on props or on data:
data: postId: 1 asyncComputed: blogPostContent: return Vuehttp { return 'Loading post ' + thispostId }
You can also set a custom global default value in the options passed to Vue.use
:
Vue
Recalculation
Just like normal computed properties, async computed properties keep track of their dependencies, and are only recalculated if those dependencies change. But often you'll have an async computed property you'll want to run again without any of its (local) dependencies changing, such as for instance the data may have changed in the database.
You can set up a watch
function, whose purpose is to set up listeners on additional dependencies. Your async computed
property will then be recalculated also if any of the watched dependencies change, in addition to the real dependencies
the property itself has:
data: postId: 1 timesPostHasBeenUpdated: 0 asyncComputed: // blogPostContent will update its contents if postId is changed // to point to a diffrent post, but will also refetch the post's // contents when you increment timesPostHasBeenUpdated. blogPostContent: return Vuehttp { thistimesPostHasBeenUpdated }
Conditional Recalculation
Using watch
it is possible to run the computed property again but it will run regardless of the
value of the watched property. If you need more control over when the computation should be rerun
you can use shouldUpdate
:
data: postId: 1 // Imagine pageType can be one of 'index', 'details' and 'edit' pageType: 'index' asyncComputed: blogPostContent: return Vuehttp // Will update whenever the pageType or postId changes // but only if the pageType is not 'index' this way the // blogPostContent will be refetched when loading the // 'details' and 'edit' pages { return thispageType !== 'index' }
The main advantage over adding an if statement within the get function is that when the computation is not rerun you are able to still access the old value.
Lazy properties
Normally, computed properties are run both immediately, and as necessary when their dependencies change.
With async computed properties, you sometimes don't want that. With lazy: true
, an async computed
property will only be computed the first time it's accessed.
For example:
data: id: 1 asyncComputed: mightNotBeNeeded: lazy: true return Vuehttp // The value of `mightNotBeNeeded` will only be // calculated when it is first accessed.
Cancel debouncing
Normally, computed properties work with debouncing in the way the result of a change is not committed if other changes are triggered before the result is committed. For example, if a source property is continuously changing every 100ms and API call takes 500ms, normal async computed properties will not be changed until the change of the source property stops. With non-debounce option, async computed properties will be updated with the last source value.
data: searchText: "" asyncComputed: calculatedValue: debounce: false return fetch
Error handling
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. By default, it will be called with the error's stack trace as an argument, but if you want the raw error itself you can set the
useRawError
option to true
.
For example:
Vue
You can pass false
as the errorHandler
in order to silently ignore rejected promises.
License
MIT © Benjamin Fox