Vue Async Computed Decorator

Common errors

• TypeError: Cannot read properties of undefined (reading 'use')

  cause Attempting to use `Vue.use(AsyncComputedPlugin)` or similar Vue 2-specific APIs in a Vue 3 application, where `Vue` (the global constructor) is not directly available in the same way, and the plugin registration mechanism has changed to `app.use()`.
  fix This package is not compatible with Vue 3. Re-architect your asynchronous computed properties using Vue 3's Composition API with `computed` and `watchEffect`, or leverage `Suspense` or external libraries like VueUse's `computedAsync`.

• TS1219: Experimental decorators are not enabled. ... TS2345: Argument of type 'typeof AsyncComputed' is not assignable to parameter of type 'PropertyDecorator'.

  cause TypeScript compiler error indicating that decorator support is not configured in `tsconfig.json`.
  fix Ensure `experimentalDecorators` and `emitDecoratorMetadata` are set to `true` in your `tsconfig.json` file. This enables the necessary transpilation for decorator syntax.

Warnings

• breaking This package is fundamentally incompatible with Vue 3. It relies on Vue 2's plugin system (`Vue.use`) and the `vue-class-component` library, which does not support Vue 3. Attempting to use it in a Vue 3 project will lead to runtime errors.
  Fix: For Vue 3, consider using `Suspense` with async `setup()` or `defineAsyncComponent`, or a library like VueUse's `computedAsync` for similar functionality within the Composition API. If class-style components are still desired in Vue 3, use `vue-facing-decorator` with a Vue 3-compatible async computed solution.
• deprecated The underlying `vue-class-component` library is officially deprecated for Vue 3 and has not been actively maintained for Vue 2 for several years. This decorator package itself has not been updated in over six years and should be considered abandoned.
  Fix: For new projects, avoid using `vue-class-component` and its associated decorators. Migrate existing Vue 2 projects to Composition API or consider `vue-facing-decorator` for Vue 3 if class-style is a strict requirement, but be aware of the lack of direct decorator-based async computed solutions.
• gotcha When using TypeScript, you must enable `experimentalDecorators` and `emitDecoratorMetadata` in your `tsconfig.json` for decorators like `@AsyncComputed` and `@Component` to compile correctly. Failure to do so will result in compilation errors.
  Fix: Add or ensure the following compiler options in your `tsconfig.json`: ```json { "compilerOptions": { "experimentalDecorators": true, "emitDecoratorMetadata": true } } ```

Install

• npm install vue-async-computed-decorator npm
• yarn add vue-async-computed-decorator yarn
• pnpm add vue-async-computed-decorator pnpm

Imports

• AsyncComputed

  import AsyncComputed from 'vue-async-computed-decorator'

  This is the decorator itself, applied directly to class methods. It enables the async computed behavior for a method.
• AsyncComputedPlugin
  wrong:

  import { AsyncComputedPlugin } from 'vue-async-computed'

  correct:

  import AsyncComputedPlugin from 'vue-async-computed'

  The core `vue-async-computed` plugin exports its default as `AsyncComputedPlugin` which must be installed globally with `Vue.use()` for the decorator to function.
• Component
  wrong:

  import { Component } from 'vue-class-component'

  correct:

  import Component from 'vue-class-component'

  This is the decorator from the base `vue-class-component` library, essential for defining class-style Vue components. It is a default export.

Quickstart

This example demonstrates how to define an asynchronous computed property in a Vue 2 class component using the `@AsyncComputed` decorator. It shows the necessary imports, plugin installation, and a basic setup with a simulated data fetch and a loading state.

import Vue from 'vue'
import AsyncComputedPlugin from 'vue-async-computed'
import AsyncComputed from 'vue-async-computed-decorator'
import Component from 'vue-class-component'

// Install the base vue-async-computed plugin
Vue.use(AsyncComputedPlugin)

// Define a Vue 2 class component using decorators
@Component
class MyComponent extends Vue {
  // Simulate an asynchronous operation
  async fetchData() {
    return new Promise(resolve => {
      setTimeout(() => resolve('Data fetched!'), 1000)
    })
  }

  // Decorate a method to make it an async computed property
  @AsyncComputed
  async someComputedProp() {
    const data = await this.fetchData()
    return `Async result: ${data}`
  }

  // A regular computed property to show loading state
  get loadingMessage() {
    // The async computed property will be null or its default value while loading
    return this.someComputedProp === null ? 'Loading async data...' : ''
  }
}

// Create a root Vue instance and mount the component
new Vue({
  el: '#app',
  template: `
    <div id="app">
      <h1>Vue Async Computed Decorator Example (Vue 2)</h1>
      <p v-if="loadingMessage">{{ loadingMessage }}</p>
      <p>{{ someComputedProp }}</p>
    </div>
  `,
  components: { MyComponent }
}).$mount('#app')

// To run in a browser, you'd need a basic HTML file:
// <div id="app"></div>
// <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
// <script src="https://cdn.jsdelivr.net/npm/vue-async-computed@3.9.0/dist/vue-async-computed.js"></script>
// <script src="https://cdn.jsdelivr.net/npm/vue-class-component@7.2.6/dist/vue-class-component.min.js"></script>
// <script src="https://cdn.jsdelivr.net/npm/reflect-metadata@0.1.13/Reflect.js"></script>
// <script type="module">/* compiled code here */</script>