migration: update global mounting API usage

https://v3.vuejs.org/guide/migration/global-api.html#a-new-global-api-createapp
vuejs · May 5, 2021 · a6e0c9a · a6e0c9a · yyx990803 · May 6, 2021
1 parent b05d955
commit a6e0c9a
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 93 deletions.
diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>{{ title }}</title>
+    <title>Vue HN</title>
     <meta charset="utf-8">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
@@ -19,6 +19,7 @@
   <body>
   <div id="skip"><a href="#app">skip to content</a></div>
   <div id="app"></div>
-  <script type="module" src="/src/entry-client.js"></script>
+  <div id="progress-container"></div>
+  <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/src/app.js b/src/app.js
diff --git a/src/entry-client.js b/src/entry-client.js
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,68 @@
+import { createApp } from 'vue'
+import { createStore } from './store'
+import { createRouter } from './router'
+import { sync } from 'vuex-router-sync'
+import titleMixin from './util/title'
+import App from './App.vue'
+import ProgressBar from './components/ProgressBar.vue'
+
+const store = createStore()
+const router = createRouter()
+
+sync(store, router)
+
+const app = createApp({
+  router,
+  store,
+  ...App
+})
+
+// global progress bar
+const bar = createApp(ProgressBar).mount('#progress-container')
+document.body.appendChild(bar.$el)
+app.config.globalProperties.$bar = bar
+
+// mixin for handling title
+app.mixin(titleMixin)
+
+// a global mixin that calls `asyncData` when a route component's params change
+app.mixin({
+  beforeRouteUpdate(to, from, next) {
+    const { asyncData } = this.$options
+    if (asyncData) {
+      asyncData({
+        store: this.$store,
+        route: to
+      })
+        .then(next)
+        .catch(next)
+    } else {
+      next()
+    }
+  }
+})
+
+// Add router hook for handling asyncData.
+router.beforeResolve((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.asyncData).filter((_) => _)
+  if (!asyncDataHooks.length) {
+    return next()
+  }
+
+  bar.start()
+  Promise.all(asyncDataHooks.map((hook) => hook({ store, route: to })))
+    .then(() => {
+      bar.finish()
+      next()
+    })
+    .catch(next)
+})
+
+// actually mount to DOM
+app.mount('#app')