Skip to content

asyncComputed #4083

@billiegoose

Description

@billiegoose

Have you tried vue-async-computed ? It is incredibly awesome, because it allows asynchronous computed properties. Among other things, this makes it incredibly easy to source your Vue data from AJAX calls. I will try to convince you that this feature is SO good, that it is worthy of including in Vue's core instead of being relegated to this lowly plugin.

Code sample

Here's an example application that uses two properties to seamlessly interact with the server. Actions are "dispatched" by setting properties. (I clump mine in a object called "active".) This flags them as dirty, causing Vue to automatically re-compute any async properties that depend on that property.

Here, $vm.active.lang is a read-write property containing the current language. The $vm.i18n property contains all the i18n strings. Changing $vm.active.lang causes Vue to pull the appropriate language file from the server and update the text on the page. Is that simple or what?

<template>
  <p>{{i18n.hello}}, {{CurrentUser.name}}!</p>
</template>

<script>
const Ajax = (url, opts) => window.fetch(url, opts).then((response) => response.json())

let App = new Vue({
  el: '#app',
  data () {
    return {
      active: {
        lang: 'en'
      }
    }
  },
  asyncComputed: {
    i18n () {
      return Ajax('/lang/' + this.active.lang)
    },
    CurrentUser () {
      return Ajax('/logged_in_user.json', {credentials: 'include'})
    }
  }
})
</script>

I also left in some code that fetches the current user from the server so we can greet the user by name.

How will it make current work-arounds straightforward?

Right now, it requires conceiving the idea of "async properties", searching the web to see if someone has done it, and then using this plugin. But I really think it is extremely elegant and intuitive, and having it baked into Vue's core and documented in the Vue guide would encourage more people to think, "Oh, this is a really great way to get data from my server into Vue" and would simplify a lot of people's spaghetti code, which would make the world a better place.

What potential bugs and edge cases does it help to avoid?

Many beginners (and even experts) still have not fully committed to using a Flux-architecture framework, or are dealing with horrendous legacy applications and "vueifying" pieces of it as we go. But it is well established that this unidirectional data flow from server to client is a great idea and simplifies state management and reduces spaghetti code. Adding native support for asynchronous properties would enable and promotes a very simple, declarative unidirectional server-to-client data flow that has the advantage of being easily injected into existing legacy code without having to learn a new framework.

I'm sure there are other uses for asynchronous computed properties too (dispatching a long-running task to a WebWorker comes to mind) but I've only used it for AJAX so that's the example I've used.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions