Appearance

Vue Async Computed Plugin ​

File Information ​

  • Path: plugins/vue-async-computed.js
  • Purpose: Async computed properties support for Vue components

Overview ​

The Vue Async Computed plugin integrates the vue-async-computed library, which allows you to create computed properties that return promises. This is useful for data fetching, API calls, and asynchronous operations that need to be reactive.

Key Features ​

  1. Async Computed Properties

    • Promise-based computed properties
    • Reactive updates
    • Loading states
    • Error handling

  2. Automatic Updates

    • Recomputes when dependencies change
    • Handles promise resolution
    • Updates component state

Usage Examples ​

Basic Async Computed ​

vue
<script>
export default {
  data() {
    return {
      userId: 1
    }
  },
  asyncComputed: {
    user() {
      return this.$axios.get(`/api/users/${this.userId}`)
        .then(response => response.data)
    }
  }
}
</script>

With Loading State ​

vue
<script>
export default {
  data() {
    return {
      assetId: 123
    }
  },
  asyncComputed: {
    asset: {
      get() {
        return this.$axios.get(`/api/assets/${this.assetId}`)
          .then(response => response.data)
      },
      default: null
    }
  },
  computed: {
    isLoading() {
      return this.$asyncComputed.asset.updating
    }
  }
}
</script>

With Error Handling ​

vue
<script>
export default {
  asyncComputed: {
    assets() {
      return this.$axios.get('/api/assets')
        .then(response => response.data)
        .catch(error => {
          console.error('Failed to load assets:', error)
          return []
        })
    }
  }
}
</script>

Properties ​

Async computed properties provide:

  • updating - Boolean indicating if promise is pending
  • error - Error object if promise rejected
  • value - Resolved value

Integration Points ​

  • Components: Async data fetching
  • Pages: Async data loading
  • API Calls: Reactive API responses

Notes for Development ​

  • Plugin registers AsyncComputed globally
  • Use asyncComputed option in components
  • Handles promise resolution automatically
  • Updates when dependencies change
  • Provides loading and error states