fix(vue-app): better check for asyncData method

exreplay · Jun 16, 2019 · 406000f · 406000f
1 parent 5c2bafe
commit 406000f
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 22 deletions.
diff --git a/packages/vue-app/lib/entry-client.js b/packages/vue-app/lib/entry-client.js
@@ -2,6 +2,7 @@ import { createApp } from './app';
 import Vue from 'vue';
 import axios from 'axios';
 import forEach from 'lodash/forEach';
+import { composeComponentOptions } from './utils';
 const { app, router, store } = createApp({ isServer: false });
 
 // eslint-disable-next-line no-unused-vars
@@ -13,22 +14,25 @@ class ClientEntry {
     this.initMixin();
 
     router.onReady(() => {
-      router.beforeResolve((to, from, next) => {
+      router.beforeResolve(async (to, from, next) => {
         const matched = router.getMatchedComponents(to);
         const prevMatched = router.getMatchedComponents(from);
         let diffed = false;
-        const activated = matched.filter((c, i) => {
-          return diffed || (diffed = (prevMatched[i] !== c));
-        });
-        const asyncDataHooks = activated.map(c => c.options ? c.options.asyncData : false).filter(_ => _);
-        if (!asyncDataHooks.length) {
-          return next();
+        const activated = matched.filter((c, i) => diffed || (diffed = (prevMatched[i] !== c)));
+        const asyncDataHooks = activated.map(c => {
+          const { asyncData } = composeComponentOptions(c);
+          if (typeof asyncData === 'function' && asyncData) return asyncData
+          else return false;
+        }).filter(_ => _);
+
+        if (!asyncDataHooks.length) return next();
+
+        try {
+          await Promise.all(asyncDataHooks.map(hook => hook({ store, route: to, isServer: false })))
+          next();
+        } catch(err) {
+          next(err);
         }
-        Promise.all(asyncDataHooks.map(hook => hook({ store, route: to })))
-                    .then(() => {
-                      next();
-                    })
-                    .catch(next);
       });
 
       app.$mount('#app');
@@ -75,13 +79,19 @@ class ClientEntry {
 
   setRouterMixins() {
     Vue.mixin({
-      beforeRouteUpdate(to, from, next) {
+      async beforeRouteUpdate(to, from, next) {
         const { asyncData } = this.$options;
         if (asyncData) {
-          asyncData({
-            store: this.$store,
-            route: this.$route
-          }).then(next).catch(next);
+          try {
+            await asyncData({
+              store: this.$store,
+              route: to,
+              isServer: false
+            });
+            next();
+          } catch(err) {
+            next(err);
+          }
         } else {
           next();
         }

diff --git a/packages/vue-app/lib/entry-server.js b/packages/vue-app/lib/entry-server.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import App from '@/App.vue';
 import { createApp } from './app';
+import { composeComponentOptions } from './utils';
 
 Vue.prototype.$auth = null;
 Vue.prototype.$modernizr = {};
@@ -40,24 +41,24 @@ export default async context => {
         await store.dispatch(key, context);
       }
     }
-
-    for (const { options: { asyncData, props } } of matchedComponents) {
+
+    for (const component of matchedComponents) {
+      const { asyncData } = composeComponentOptions(component);
+
       if (typeof asyncData === 'function' && asyncData) {
         await asyncData({
           store,
           route: router.currentRoute,
-          data: props,
           isServer: true
         });
       }
     }
 
-    const { options: { asyncData, props } } = App;
+    const { asyncData } = composeComponentOptions(App);
     if (typeof asyncData === 'function' && asyncData) {
       await asyncData({
         store,
         route: router.currentRoute,
-        data: props,
         isServer: true
       });
     }

diff --git a/packages/vue-app/lib/utils.js b/packages/vue-app/lib/utils.js
@@ -0,0 +1,8 @@
+export const composeComponentOptions = component => {
+  let asyncData;
+
+  if (component.asyncData) asyncData = component.asyncData;
+  else if (component.options && component.options.asyncData) asyncData = component.options.asyncData;
+
+  return { asyncData };
+};