Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/polarisation/vue-computed-promise
Plugin for Vue.js, allows promises to be returned for computed properties
https://github.com/polarisation/vue-computed-promise
vuejs2
Last synced: about 2 months ago
JSON representation
Plugin for Vue.js, allows promises to be returned for computed properties
- Host: GitHub
- URL: https://github.com/polarisation/vue-computed-promise
- Owner: Polarisation
- License: mit
- Created: 2017-03-20T10:56:45.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-10-15T09:39:13.000Z (about 5 years ago)
- Last Synced: 2024-10-10T20:12:31.203Z (3 months ago)
- Topics: vuejs2
- Language: JavaScript
- Homepage:
- Size: 12.7 KB
- Stars: 2
- Watchers: 4
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-computed-promise
Plugin for Vue.js, allows promises to be returned for computed properties
**Note:** you may prefer to use the more popular [https://github.com/foxbenjaminfox/vue-async-computed](https://github.com/foxbenjaminfox/vue-async-computed). At the time I wrote this plugin, **vue-async-computed** was not sufficient for my needs but since lazy-loading was added it would be. Now the differences are mostly of style - this plugin may be preferred if you want to use computed promises in a more seemless way (using the standard 'computed' key), but there is some risk of conflicts with other plugins. In contrast, **vue-async-computed** is less likely to conflict with plugins because it introduces a new 'asyncComputed' key.
[](https://nodei.co/npm/vue-computed-promise/)
## Install
```
$ npm install vue-computed-promise
```
## Usage
Add the plugin:
```
const VueComputedPromise = require('vue-computed-promise'); // alternatively use script tag
Vue.use(VueComputedPromise);
```
Now you can return a Promise from a computed property:
```
var vue = new Vue({
el: "#app",
data: {
one: 1,
two: 2
},
computed: {
oneplustwo: function() {
var _one = this.$data.one;
var _two = this.$data.two;
return new Promise(function(resolve, reject) {
setTimeout(0, function() {
resolve(_one + _two);
});
});
}
}
})
```
Until the Promise resolves, the value of `null` is returned by the computed property.
In the example above `oneplustwo` is never re-computed. The Promise will only be called once (or never if the property is not used in the template).
To return a Promise which may be re-computed when reactive dependencies change, you will need to return a parameter-less function which in turn returns a Promise:
```
var vue = new Vue({
el: "#app",
data: {
a: 1,
b: 2,
calculating: false,
count: 0
},
computed: {
result: function() {
// these properties are reactive dependencies
var _a = Number(this.a);
var _b = Number(this.b);
return () => {
// properties only accessed within this function are not reactive dependencies
var data = this.$data;
data.calculating = true;
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve(_a + _b);
data.calculating = false;
data.count++;
}, 1000);
});
};
}
}
})
```
As the example shows, you also have control over which properties become dependencies: only properties accessed outside of the returned function will become dependencies.
## Contributions
I've only used this for a limited use case - but I'm happy to take pull requests to improve the plugin.