\n\nWith this plugin, you can have computed properties in Vue that are computed asynchronously.\n\nWithout using this plugin, you can't do this:\n\n```js\nnew Vue({\n data: {\n userId: 1\n },\n computed: {\n username () {\n // Using vue-resource\n return Vue.http.get('/get-username-by-id/' + this.userId)\n // This assumes that this endpoint will send us a response\n // that contains something like this:\n // {\n // \"username\": \"username-goes-here\"\n // }\n .then(response => response.data.username)\n }\n }\n}\n```\n\nOr 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:\n\n```js\nnew Vue({\n data: {\n userId: 1\n },\n asyncComputed: {\n username () {\n return Vue.http.get('/get-username-by-id/' + this.userId)\n .then(response => response.data.username)\n }\n }\n}\n```\n\nThis is especially useful with ES7 async functions:\n\n```js\nnew Vue({\n asyncComputed: {\n async someCalculation () {\n const x = await someAsycFunction()\n const y = await anotherAsyncFunction()\n return x + y\n }\n }\n})\n```\n\n## Install\n\n```sh\nnpm install --save vue-async-computed\n```\n\nAlternately, you can link it directly from a CDN:\n\n```html\n\n\n\n```\n\nWhen used with a module system such as `webpack` or `browserify`, you need to explicitly install `vue-async-computed` via `Vue.use()`:\n\n```js\nimport Vue from 'vue'\nimport AsyncComputed from 'vue-async-computed'\n\nVue.use(AsyncComputed)\n```\n\nYou 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.\n\n## Usage example\n\n```js\nimport AsyncComputed from 'vue-async-computed'\n\n/* Initialize the plugin */\nVue.use(AsyncComputed)\n\n/*\n Then, when you create a Vue instance (or component),\n you can pass an object named \"asyncComputed\" as well as\n or instead of the standard \"computed\" option. The functions\n you pass to \"asyncComputed\" should return promises, and the values\n those promises resolve to are then asynchronously bound to the\n Vue instance as they resolve. Just as with normal computed\n properties, if the data the property depends on changes\n then the property is re-run automatically.\n\n You can almost completely ignore the fact that behind the\n scenes they are asynchronous. The one thing to remember is\n that until a asynchronous property's promise resolves\n for the first time, the value of the computed property is null.\n*/\n\nconst vm = new Vue({\n data: {\n x: 2,\n y: 3\n },\n asyncComputed: {\n sum () {\n const total = this.x + this.y\n return new Promise(resolve =>\n setTimeout(() => resolve(total), 1000)\n )\n }\n }\n})\n\n/*\n Until one second has passed, vm.sum will be null. After that,\n vm.sum will be 5. If you change vm.x or vm.y, then one\n second later vm.sum will automatically update itself to be\n the sum of the values to which you set vm.x and vm.y the previous second.\n*/\n```\n\n[Like with regular synchronous computed properties](https://vuejs.org/guide/computed.html#Computed-Setter), you can pass an object\nwith a `get` method instead of a function, but unlike regular computed\nproperties, async computed properties are always getter-only. If the\nobject provided has a `set` method it will be ignored.\n\nAsync computed properties can also have a custom default value, which will\nbe used until the data is loaded for the first time:\n\n```js\nnew Vue({\n data: {\n postId: 1\n },\n asyncComputed: {\n blogPostContent: {\n // The `get` function is the same as the function you would\n // pass directly as the value to `blogPostContent` if you\n // didn't need to specify a default value.\n get () {\n return Vue.http.get('/post/' + this.postId)\n .then(response => response.data.postContent)\n },\n // The computed proporty `blogPostContent` will have\n // the value 'Loading...' until the first time the promise\n // returned from the `get` function resolves.\n default: 'Loading...'\n }\n }\n}\n\n/*\n Now you can display {{blogPostContent}} in your template, which\n will show a loading message until the blog post's content arrives\n from the server.\n*/\n```\n\nYou can instead define the default value as a function, in order to depend on\nprops or on data:\n\n```js\nnew Vue({\n data: {\n postId: 1\n },\n asyncComputed: {\n blogPostContent: {\n get () {\n return Vue.http.get('/post/' + this.postId)\n .then(response => response.data.postContent)\n },\n default () {\n return 'Loading post ' + this.postId\n }\n }\n }\n}\n```\n\nYou can also set a custom global default value in the options passed to `Vue.use`:\n\n```javascript\nVue.use(AsyncComputed, {\n default: 'Global default value'\n})\n```\n\n## Recalculation\n\nJust like normal computed properties, async computed properties keep track of their dependencies, and are only\nrecalculated if those dependencies change. But often you'll have an async computed property you'll want to run again\nwithout any of its (local) dependencies changing, such as for instance the data may have changed in the database.\n\nYou can set up a `watch` property, listing the additional dependencies to watch.\nYour async computed property will then be recalculated also if any of the watched\ndependencies change, in addition to the real dependencies the property itself has:\n```js\n\nnew Vue({\n data: {\n postId: 1,\n timesPostHasBeenUpdated: 0\n },\n asyncComputed: {\n // blogPostContent will update its contents if postId is changed\n // to point to a diffrent post, but will also refetch the post's\n // contents when you increment timesPostHasBeenUpdated.\n blogPostContent: {\n get () {\n return Vue.http.get('/post/' + this.postId)\n .then(response => response.data.postContent)\n },\n watch: ['timesPostHasBeenUpdated']\n }\n }\n}\n```\nJust like with Vue's normal `watch`, you can use a dotted path in order to watch a nested property. For example, `watch: ['a.b.c', 'd.e']` would declare a dependancy on `this.a.b.c` and on `this.d.e`.\n\nYou can trigger re-computation of an async computed property manually, e.g. to re-try if an error occured during evaluation. This should be avoided if you are able to achieve the same result using a watched property.\n\n````js\n\nnew Vue({\n asyncComputed: {\n blogPosts: {\n get () {\n return Vue.http.get('/posts')\n .then(response => response.data)\n },\n }\n },\n methods: {\n refresh() {\n // Triggers an immediate update of blogPosts\n // Will work even if an update is in progress.\n this.$asyncComputed.blogPosts.update();\n }\n }\n}\n````\n\n### Conditional Recalculation\n\nUsing `watch` it is possible to run the computed property again but it will run regardless of the\nvalue of the watched property. If you need more control over when the computation should be rerun\nyou can use `shouldUpdate`:\n```js\n\nnew Vue({\n data: {\n postId: 1,\n // Imagine pageType can be one of 'index', 'details' and 'edit'\n pageType: 'index'\n },\n asyncComputed: {\n blogPostContent: {\n get () {\n return Vue.http.get('/post/' + this.postId)\n .then(response => response.data.postContent)\n },\n // Will update whenever the pageType or postId changes\n // but only if the pageType is not 'index' this way the\n // blogPostContent will be refetched when loading the\n // 'details' and 'edit' pages\n shouldUpdate () {\n return this.pageType !== 'index'\n }\n }\n }\n}\n```\n\nThe main advantage over adding an if statement within the get function is that when the computation is\nnot rerun you are able to still access the old value.\n\n## Lazy properties\n\nNormally, computed properties are run both immediately, and as necessary when their dependencies change.\nWith async computed properties, you sometimes don't want that. With `lazy: true`, an async computed\nproperty will only be computed the first time it's accessed.\n\nFor example:\n```js\nnew Vue({\n data: {\n id: 1\n },\n asyncComputed: {\n mightNotBeNeeded: {\n lazy: true,\n get () {\n return Vue.http.get('/might-not-be-needed/' + this.id)\n .then(response => response.data.value)\n }\n // The value of `mightNotBeNeeded` will only be\n // calculated when it is first accessed.\n }\n }\n}\n```\n\n## Computation status\n\nFor each async computed property, an object is added to `$asyncComputed` that contains information about the current computation state of that object. This object contains the following properties:\n\n```js\n{\n // Can be one of updating, success, error\n state: 'updating',\n // A boolean that is true while the property is updating.\n updating: true,\n // The property finished updating wihtout errors (the promise was resolved) and the current value is available.\n success: false,\n // The promise was rejected.\n error: false,\n // The raw error/exception with which the promise was rejected.\n exception: null\n}\n```\n\nIt is meant to be used in your rendering code to display update / error information.\n\n````js\nnew Vue({\n asyncComputed: {\n posts() {\n return Vue.http.get('/posts')\n .then(response => response.data)\n }\n }\n }\n}\n// This will display a loading message every time the posts are updated:\n//
(Re)loading posts
\n\n// If you only want to display the message the first times the posts load, you can use the fact that the default value is null:\n//
Loading posts
\n\n// You can display an error message if loading the posts failed.\n// The vue-resources library passes the error response on to the rejection handler.\n// It is therefore available in $asyncComputed.posts.exception\n//
Error while loading posts: $asyncComputed.posts.exception.statusText
\n\nWith this plugin, you can have computed properties in Vue that are computed asynchronously.\n\nWithout using this plugin, you can't do this:\n\n```js\nexport default {\n data () {\n return {\n userId: 1\n }\n },\n computed: {\n username () {\n return fetch(`/get-username-by-id/${this.userId}`)\n // This assumes that this endpoint will send us a response\n // that contains something like this:\n // {\n // \"username\": \"username-goes-here\"\n // }\n .then(response => response.json())\n .then(user => user.username)\n }\n }\n}\n```\n\nOr 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:\n\n```js\nexport default {\n data () {\n return {\n userId: 1\n }\n },\n asyncComputed: {\n username () {\n return fetch(`/get-username-by-id/${this.userId}`)\n .then(r => r.json())\n .then(user => user.username)\n }\n }\n}\n```\n\nThis is especially useful with ES7 async functions:\n\n```js\nexport default {\n asyncComputed: {\n async someCalculation () {\n const x = await someAsycFunction()\n const y = await anotherAsyncFunction()\n return x + y\n }\n }\n}\n```\n\n## Install\n\n```sh\nnpm install --save vue-async-computed\n```\n\nAnd then install `vue-async-computed` via `app.use()` to make it available for all your components:\n\n```js\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport AsyncComputed from 'vue-async-computed'\n\nconst app = createApp(App)\napp.use(AsyncComputed)\napp.mount('#app')\n```\n\nAlternately, you can link it directly from a CDN:\n\n```html\n\n\n\n
\n + \n = {{sum == null ? 'Loading' : sum}}\n
\n\n\n```\n\n## Usage example\n\n```js\nexport default {\n data () {\n return {\n x: 2,\n y: 3\n }\n },\n\n /*\n When you create a Vue instance (or component),\n you can pass an object named \"asyncComputed\" as well as\n or instead of the standard \"computed\" option. The functions\n you pass to \"asyncComputed\" should return promises, and the values\n those promises resolve to are then asynchronously bound to the\n Vue instance as they resolve. Just as with normal computed\n properties, if the data the property depends on changes\n then the property is re-run automatically.\n\n You can almost completely ignore the fact that behind the\n scenes they are asynchronous. The one thing to remember is\n that until a asynchronous property's promise resolves\n for the first time, the value of the computed property is null.\n */\n asyncComputed: {\n /*\n Until one second has passed, vm.sum will be null. After that,\n vm.sum will be 5. If you change vm.x or vm.y, then one\n second later vm.sum will automatically update itself to be\n the sum of the values to which you set vm.x and vm.y the previous second.\n */\n async sum () {\n await new Promise(resolve => setTimeout(resolve, 1000))\n return this.x + this.y\n }\n }\n}\n```\n\n[Like with regular synchronous computed properties](https://vuejs.org/guide/essentials/computed.html#writable-computed), you can pass an object\nwith a `get` method instead of a function, but unlike regular computed\nproperties, async computed properties are always getter-only. If the\nobject provided has a `set` method it will be ignored.\n\nAsync computed properties can also have a custom default value, which will\nbe used until the data is loaded for the first time:\n\n```js\nexport default {\n data () {\n return {\n postId: 1\n }\n },\n asyncComputed: {\n blogPostContent: {\n // The `get` function is the same as the function you would\n // pass directly as the value to `blogPostContent` if you\n // didn't need to specify a default value.\n async get () {\n const post = await fetch(`/post/${this.postId}`)\n .then(response => response.json())\n return post.postContent\n },\n // The computed property `blogPostContent` will have\n // the value 'Loading...' until the first time the promise\n // returned from the `get` function resolves.\n default: 'Loading...'\n }\n }\n}\n\n/*\n Now you can display {{blogPostContent}} in your template, which\n will show a loading message until the blog post's content arrives\n from the server.\n*/\n```\n\nYou can instead define the default value as a function, in order to depend on\nprops or on data:\n\n```js\nexport default {\n data () {\n return {\n postId: 1\n }\n },\n asyncComputed: {\n blogPostContent: {\n async get () {\n const post = await fetch(`/post/${this.postId}`)\n .then(response => response.json())\n return post.postContent\n },\n default () {\n return `Loading post ${this.postId}...`\n }\n }\n }\n}\n```\n\nYou can also set a custom global default value in the options passed to `app.use`:\n\n```javascript\napp.use(AsyncComputed, {\n default: 'Global default value'\n})\n```\n\n## Recalculation\n\nJust like normal computed properties, async computed properties keep track of their dependencies, and are only\nrecalculated if those dependencies change. But often you'll have an async computed property you'll want to run again\nwithout any of its (local) dependencies changing, such as for instance the data may have changed in the database.\n\nYou can set up a `watch` property, listing the additional dependencies to watch.\nYour async computed property will then be recalculated also if any of the watched\ndependencies change, in addition to the real dependencies the property itself has:\n\n```js\nexport default {\n data () {\n return {\n postId: 1,\n timesPostHasBeenUpdated: 0\n }\n },\n asyncComputed: {\n // blogPostContent will update its contents if postId is changed\n // to point to a diffrent post, but will also refetch the post's\n // contents when you increment timesPostHasBeenUpdated.\n blogPostContent: {\n async get () {\n const post = await fetch(`/post/${this.postId}`)\n .then(response => response.json())\n return post.postContent\n },\n watch: ['timesPostHasBeenUpdated']\n }\n }\n}\n```\n\nJust like with Vue's normal `watch`, you can use a dotted path in order to watch a nested property. For example, `watch: ['a.b.c', 'd.e']` would declare a dependency on `this.a.b.c` and on `this.d.e`.\n\nYou can trigger re-computation of an async computed property manually, e.g. to re-try if an error occurred during evaluation. This should be avoided if you are able to achieve the same result using a watched property.\n\n````js\nexport default {\n asyncComputed: {\n blogPosts: {\n async get () {\n return fetch('/posts')\n .then(response => response.json())\n }\n }\n },\n methods: {\n refresh() {\n // Triggers an immediate update of blogPosts\n // Will work even if an update is in progress.\n this.$asyncComputed.blogPosts.update()\n }\n }\n}\n````\n\n### Conditional Recalculation\n\nUsing `watch` it is possible to force the computed property to run again unconditionally.\nIf you need more control over when the computation should be rerun you can use `shouldUpdate`:\n\n```js\n\nexport default {\n data () {\n return {\n postId: 1,\n // Imagine pageType can be one of 'index', 'details' and 'edit'.\n pageType: 'index'\n }\n },\n asyncComputed: {\n blogPostContent: {\n async get () {\n const post = await fetch(`/post/${this.postId}`)\n .then(response => response.json())\n return post.postContent\n },\n // Will update whenever the pageType or postId changes,\n // but only if the pageType is not 'index'. This way the\n // blogPostContent will be refetched only when loading the\n // 'details' and 'edit' pages.\n shouldUpdate () {\n return this.pageType !== 'index'\n }\n }\n }\n}\n```\n\nThe main advantage over adding an `if` statement within the get function is that the old value is still accessible even if the computation is not re-run.\n\n## Lazy properties\n\nNormally, computed properties are both run immediately, and re-run as necessary when their dependencies change.\nWith async computed properties, you sometimes don't want that. With `lazy: true`, an async computed\nproperty will only be computed the first time it's accessed.\n\nFor example:\n```js\nexport default {\n data () {\n return {\n id: 1\n }\n },\n asyncComputed: {\n mightNotBeNeeded: {\n lazy: true,\n async get () {\n return fetch(`/might-not-be-needed/${this.id}`)\n .then(response => response.json())\n .then(response => response.value)\n }\n // The value of `mightNotBeNeeded` will only be\n // calculated when it is first accessed.\n }\n }\n}\n```\n\n## Computation status\n\nFor each async computed property, an object is added to `$asyncComputed` that contains information about the current computation state of that object. This object contains the following properties:\n\n```js\n{\n // Can be one of updating, success, error\n state: 'updating',\n // A boolean that is true while the property is updating.\n updating: true,\n // The property finished updating without errors (the promise was resolved) and the current value is available.\n success: false,\n // The promise was rejected.\n error: false,\n // The raw error/exception with which the promise was rejected.\n exception: null\n}\n```\n\nIt is meant to be used in your rendering code to display update / error information:\n\n````html\n\n\n \n Loading...\n \n \n \n Error while loading posts: {{ $asyncComputed.posts.exception }}\n \n \n \n \n \n {{ posts }}\n \n\n````\n\nNote: If you want to display a special message the first time the posts load, you can use the fact that the default value is null:\n\n```html\n
![\"NPM](\"https://img.shields.io/npm/v/vue-async-computed.svg?style=flat-square\"\n)
\n \n\n \n ![\"Build](\"https://img.shields.io/travis/foxbenjaminfox/vue-async-computed.svg?style=flat-square\"\n)
\n \n\n \n ![\"Downloads\"](\"https://img.shields.io/npm/dm/vue-async-computed.svg?style=flat-square\"\n)
\n \n\n \n ![\"License\"](\"https://img.shields.io/npm/l/vue-async-computed.svg?style=flat-square\"\n)
\n \n![\"Build](\"https://img.shields.io/github/actions/workflow/status/foxbenjaminfox/vue-async-computed/ci.yml?style=flat-square\"\n)