foxbenjaminfox/vue-async-computed

$asnyComputed is undefined in computed property when watcher is called first

johannes-z opened this issue · 1 comments

@foxbenjaminfox

AsyncComputed properties are undefined when being used in a computed property, at least in this edge case that I implemented. I made a sandbox repro: https://codesandbox.io/s/m34kn80m9j

After the latest changes, it's still initially undefined, at least when using watchers. Because of this I can't make computed properties depend on the asyncComputed state, e.g. updating.

Here is the code (unimportant stuff was truncated):

App.vue

<template>
  <div id="app">
    Parent: {{ childProp }}
    <ChildComponent ref="child" @update:someProp="childProp = $event;" />
  </div>
</template>

<script>
import ChildComponent from "./Child.vue";
export default {
  components: { ChildComponent },
  data() {
    return {
      childProp: {}
    };
  }
};
</script>

Child.vue

<template>
  <div>
    Child: {{ someProp }} {{ $asyncComputed.posts.updating }}
    <div v-for="(post, index) in posts" :key="index">{{ post }}</div>
  </div>
</template>

<script>
export default {
  watch: {
    someProp: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.$emit("update:someProp", newVal);
      }
    }
  },
  computed: {
    someProp() {
      console.log(this.$asyncComputed.posts);
      return {
        prop: "value",
        error: this.$asyncComputed.posts.error
      };
    }
  },
  asyncComputed: {
    posts: {
      lazy: true,
      default: () => [],
      async get() {
        return [1, 2];
      }
    }
  }
};
</script>

Anything being worked on this issue?