Allow functions to generate defualt values for async computed properties

Author: foxbenjaminfox

CHANGELOG.md

@@ -2,6 +2,7 @@
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 # Changelog
 
+- [v3.0.0](#v300)
 - [v2.1.1](#v211)
 - [v2.1.0](#v210)
 - [v2.0.0](#v200)
@@ -12,6 +13,10 @@
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
+### v3.0.0
+  * Pass the raw error to the error handler when passed the `useRawError` option.
+  * Allow default values to be given as functions.
+
 ### v2.1.1
   * Automatic installation when used in a script tag.
 

README.md

@@ -200,6 +200,28 @@ new Vue({
 */
 ````
 
+You can instead define the default value as a function, in order to depend on
+props or on data:
+
+````js
+new Vue({
+  data: {
+    postId: 1
+  },
+  asyncComputed: {
+    blogPostContent: {
+      get () {
+        return Vue.http.get('/post/' + this.postId)
+          .then(response => response.data.postContent)
+       },
+       default () {
+         return 'Loading post ' + this.postId
+       }
+    }
+  }
+}
+````
+
 ## Options
 
 By default, in case of a rejected promise in an async computed property, vue-async-computed will take care of logging the error for you.

src/index.js

@@ -11,17 +11,14 @@ const AsyncComputed = {
     Vue.mixin({
       beforeCreate () {
         const optionData = this.$options.data
-        const newData = {}
 
         if (!this.$options.computed) this.$options.computed = {}
 
         Object.keys(this.$options.asyncComputed || {}).forEach(key => {
-          const fn = this.$options.asyncComputed[key]
-          const get = typeof fn === 'function' ? fn : fn.get,
-                def = typeof fn.default === 'undefined' ? null : fn.default
+          const fn = this.$options.asyncComputed[key],
+                get = typeof fn === 'function' ? fn : fn.get
 
           this.$options.computed[prefix + key] = get
-          newData[key] = def
         })
 
         this.$options.data = function vueAsyncComputedInjectedDataFn () {
@@ -30,11 +27,24 @@ const AsyncComputed = {
                 ? optionData.call(this)
                 : optionData
              ) || {}
-          Object.keys(newData).forEach(key => { data[key] = newData[key] })
+          Object.keys(this.$options.asyncComputed || {}).forEach(key => {
+            data[key] = null
+          })
           return data
         }
       },
       created () {
+        Object.keys(this.$options.asyncComputed || {}).forEach(key => {
+          const fn = this.$options.asyncComputed[key],
+                def = typeof fn.default === 'undefined' ? null : fn.default
+
+          if (typeof def === 'function') {
+            this[key] = def.call(this)
+          } else {
+            this[key] = def
+          }
+        })
+
         Object.keys(this.$options.asyncComputed || {}).forEach(key => {
           let promiseId = 0
           this.$watch(prefix + key, newPromise => {

test/index.js

@@ -231,3 +231,32 @@ test("Async computed values can have defaults", t => {
     t.equal(vm.z, true, 'z resolves to true')
   })
 })
+
+test("Default values can be functions", t => {
+  t.plan(4)
+  const vm = new Vue({
+    data: {
+      x: 1
+    },
+    asyncComputed: {
+      y: {
+        default () { return 2 },
+        get () {
+          return Promise.resolve(3)
+        }
+      },
+      z: {
+        default () { return this.x },
+        get () {
+          return Promise.resolve(4)
+        }
+      }
+    }
+  })
+  t.equal(vm.y, 2)
+  t.equal(vm.z, 1)
+  Vue.nextTick(() => {
+    t.equal(vm.y, 3)
+    t.equal(vm.z, 4)
+  })
+})