Add status property.

Author: michaelzangl

src/index.js

@@ -21,11 +21,16 @@ const AsyncComputed = {
     Vue.mixin({
       beforeCreate () {
         const optionData = this.$options.data
+        const asyncComputed = this.$options.asyncComputed || {}
+        this.$asyncComputed = {}
+
+        if (!Object.keys(asyncComputed).length) return
 
         if (!this.$options.computed) this.$options.computed = {}
 
-        for (const key in this.$options.asyncComputed || {}) {
-          this.$options.computed[prefix + key] = getterFn(key, this.$options.asyncComputed[key])
+        for (const key in asyncComputed) {
+          const getter = getterFn(key, this.$options.asyncComputed[key])
+          this.$options.computed[prefix + key] = getter
         }
 
         this.$options.data = function vueAsyncComputedInjectedDataFn () {
@@ -34,7 +39,7 @@ const AsyncComputed = {
               ? optionData.call(this)
               : optionData
           ) || {}
-          for (const key in this.$options.asyncComputed || {}) {
+          for (const key in asyncComputed) {
             const item = this.$options.asyncComputed[key]
             if (isComputedLazy(item)) {
               initLazy(data, key)
@@ -59,7 +64,7 @@ const AsyncComputed = {
 
         for (const key in this.$options.asyncComputed || {}) {
           let promiseId = 0
-          this.$watch(prefix + key, newPromise => {
+          const watcher = newPromise => {
             const thisPromise = ++promiseId
 
             if (newPromise === DidNotUpdate) {
@@ -69,13 +74,17 @@ const AsyncComputed = {
             if (!newPromise || !newPromise.then) {
               newPromise = Promise.resolve(newPromise)
             }
+            setAsyncState(this.$asyncComputed[key], 'updating')
 
             newPromise.then(value => {
               if (thisPromise !== promiseId) return
+              setAsyncState(this.$asyncComputed[key], 'success')
               this[key] = value
             }).catch(err => {
               if (thisPromise !== promiseId) return
 
+              setAsyncState(this.$asyncComputed[key], 'error')
+              this.$asyncComputed[key].exception = err
               if (pluginOptions.errorHandler === false) return
 
               const handler = (pluginOptions.errorHandler === undefined)
@@ -88,13 +97,34 @@ const AsyncComputed = {
                 handler(err.stack)
               }
             })
-          }, { immediate: true })
+          }
+          this.$asyncComputed[key] = {
+            exception: null,
+            update: () => {
+              watcher(getterOnly(this.$options.asyncComputed[key])())
+            }
+          }
+          setAsyncState(this.$asyncComputed[key], 'updating')
+          this.$watch(prefix + key, watcher, { immediate: true })
         }
       }
     })
   }
 }
 
+function setAsyncState (stateObject, state) {
+  stateObject.state = state
+  stateObject.updating = state === 'updating'
+  stateObject.error = state === 'error'
+  stateObject.success = state === 'success'
+}
+
+function getterOnly (fn) {
+  if (typeof fn === 'function') return fn
+
+  return fn.get
+}
+
 function getterFn (key, fn) {
   if (typeof fn === 'function') return fn
 

test/index.js

@@ -716,3 +716,95 @@ test("shouldUpdate works with lazy", t => {
     })
   })
 })
+
+test("$asyncComputed is empty if there are no async computed properties", t => {
+  t.plan(1)
+  const vm = new Vue({
+  })
+  t.deepEqual(vm.$asyncComputed, {})
+})
+
+test("$asyncComputed[name] is created for all async computed properties", t => {
+  t.plan(15)
+  const vm = new Vue({
+    asyncComputed: {
+      a () {
+        return Promise.resolve(1)
+      },
+      b () {
+        return Promise.resolve(2)
+      }
+    }
+  })
+  t.deepEqual(Object.keys(vm.$asyncComputed), ['a', 'b'])
+  t.equal(vm.$asyncComputed['a'].state, 'updating')
+  t.equal(vm.$asyncComputed['b'].state, 'updating')
+  t.equal(vm.$asyncComputed['a'].updating, true)
+  t.equal(vm.$asyncComputed['a'].success, false)
+  t.equal(vm.$asyncComputed['a'].error, false)
+  t.equal(vm.$asyncComputed['a'].exception, null)
+
+  Vue.nextTick(() => {
+    t.equal(vm.a, 1)
+    t.equal(vm.b, 2)
+    t.equal(vm.$asyncComputed['a'].state, 'success')
+    t.equal(vm.$asyncComputed['b'].state, 'success')
+    t.equal(vm.$asyncComputed['a'].updating, false)
+    t.equal(vm.$asyncComputed['a'].success, true)
+    t.equal(vm.$asyncComputed['a'].error, false)
+    t.equal(vm.$asyncComputed['a'].exception, null)
+  })
+})
+
+test("$asyncComputed[name] handles errors and captures exceptions", t => {
+  t.plan(7)
+  const vm = new Vue({
+    asyncComputed: {
+      a () {
+        // eslint-disable-next-line prefer-promise-reject-errors
+        return Promise.reject('error-message')
+      }
+    }
+  })
+  t.equal(vm.$asyncComputed['a'].state, 'updating')
+  pluginOptions.errorHandler = stack => {
+    t.equal(vm.a, null)
+    t.equal(vm.$asyncComputed['a'].state, 'error')
+    t.equal(vm.$asyncComputed['a'].updating, false)
+    t.equal(vm.$asyncComputed['a'].success, false)
+    t.equal(vm.$asyncComputed['a'].error, true)
+    t.equal(vm.$asyncComputed['a'].exception, 'error-message')
+    pluginOptions.errorHandler = baseErrorCallback
+  }
+})
+
+test("$asyncComputed[name].update triggers re-evaluation", t => {
+  let valueToReturn = 1
+  t.plan(5)
+  const vm = new Vue({
+    asyncComputed: {
+      a () {
+        return new Promise(resolve => {
+          resolve(valueToReturn)
+        })
+      }
+    }
+  })
+
+  Vue.nextTick(() => {
+    t.equal(vm.a, 1)
+    valueToReturn = 2
+    t.equal(vm.$asyncComputed['a'].state, 'success')
+    vm.$asyncComputed['a'].update()
+    t.equal(vm.$asyncComputed['a'].state, 'updating')
+
+    Vue.nextTick(() => {
+      t.equal(vm.a, 2)
+      valueToReturn = 3
+
+      Vue.nextTick(() => {
+        t.equal(vm.a, 2)
+      })
+    })
+  })
+})