vue-async-computed-decorator

Decorator and typescript support for the vue-async-computed module

Installation

Add a scope mapping for the GitHub npm package manager by adding a .npmrc file with the line:

@romancow:registry=https://npm.pkg.github.com/

Then install the package:

npm install @romancow/vue-async-computed-decorator

or

yarn add @romancow/vue-async-computed-decorator

More info on using the GitHub npm package registry here.

Install the vue-async-computed Vue plugin:

import Vue from 'vue'
import AsyncComputed from '@romancow/vue-async-computed-decorator'

Vue.use(AsyncComputed)

Usage

You can just use the package for it's type definitions and use the plugin as outlined in the vue-async-computed readme.

Or use it along with vue-class-component as a typescript decorator on a get accessor that returns a Promise. Corresponding set accessors are not supported and will be ignored.

import Vue from 'vue'
import AsyncComputed from '@romancow/vue-async-computed-decorator'

@Component
export class MyComponent extends Vue {
	data = 123

	get computedData() { return data + 1 }

	@AsyncComputed()
	get asyncComputedData() {
		return someAsyncMethod()
	}
}

You can also pass default, watch, shouldUpdate, and lazy options (see vue-async-computed for more details on these):

import Vue from 'vue'
import AsyncComputed from '@romancow/vue-async-computed-decorator'

@Component
export class MyComponent extends Vue {
	data = 123

	get computedData() { return data + 1 }

	@AsyncComputed({
		default: "Loading...",
		watch: ['data'],
		shouldUpdate() { return this.computedData > 200 }
		lazy: true
	})
	get asyncComputedData() {
		return someAsyncMethod()
	}
}