asyncData

beipiaoyu2011 · Aug 1, 2018 · cec7176 · cec7176
1 parent 013caca
commit cec7176
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 13 deletions.
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -77,7 +77,8 @@ module.exports = {
       '/3',
       '/4',
       '/5',
-      '/6'
+      '/6',
+      '/posts/1'
     ]
   },
   router: {

diff --git a/public/app.html b/public/app.html
@@ -1,4 +1,4 @@
-!<!DOCTYPE html>
+<!DOCTYPE html>
 <html {{HTML_ATTRS}}>
 <head>
     {{HEAD}}

diff --git a/public/components/loading.vue b/public/components/loading.vue
@@ -32,6 +32,6 @@ export default {
   padding-top: 200px;
   font-size: 30px;
   font-family: sans-serif;
-  color: red;
+  color: black;
 }
 </style>
diff --git a/public/pages/index.vue b/public/pages/index.vue
@@ -16,12 +16,19 @@
           <nuxt-child :key="$route.params.id"></nuxt-child>
         </div>
       </div>
+      <div>
+        <p>{{userAgent}}</p>
+        <p>
+          <nuxt-link to="/posts">Go to post</nuxt-link>
+        </p>
+      </div>
+      <br><br>
       <nuxt-link to="/about">Go to about</nuxt-link>
-      <br>
+      <br><br>
       <nuxt-link to="/secret">Go to secret</nuxt-link>
-      <br>
+      <br><br>
       <button @click="alertLog">notifications me</button>
-      <br> 
+      <br><br>
       <button @click="showLoginError">{{$store.state.count}} notifications me</button>
       <div>{{content_two}}</div>
       <ul>
@@ -49,27 +56,27 @@ export default {
     }
   },
   created() {
-    
+
   },
   notifications: {
     showLoginInfo: {
       title: 'Welcome!',
       message: 'Hello from nuxt.js',
       type: 'warn',
-      timeout: 1000000000,
+      timeout: 1000,
     },
     showLoginError: {
       title: 'Welcome!',
       message: 'Hello from nuxt.js',
       type: 'error',
-      timeout: 1000000000
+      timeout: 1000
     }
   },
   components: {
     AppLogo,
     Loading
   },
-  asyncData({ params, app, store, env }, callback) {
+  asyncData({ params, app, store, env, req }, callback) {
     console.log('======app=======');
     // console.log(store);
     axios.defaults.baseURL = "https://postman-echo.com";
@@ -105,9 +112,13 @@ export default {
         });
       };
       Promise.all([p1(), p2()]).then(res => {
-        // console.log(res);
         store.commit('addData', res);
-        callback(null, { content: res[0], content_two: res[1], users: env.users });
+        callback(null, {
+          content: res[0],
+          content_two: res[1],
+          users: env.users,
+          userAgent: (req ? req.headers['user-agent'] : (typeof navigator !== 'undefined' ? navigator.userAgent : 'No user agent (generated)'))
+        });
       });
     }
 
@@ -117,7 +128,7 @@ export default {
     alertLog() {
       this.showLoginInfo();
       console.log(this);
-      
+
       this.$store.commit('increment')
     }
   }

diff --git a/public/pages/posts/_id.vue b/public/pages/posts/_id.vue
@@ -0,0 +1,32 @@
+<template>
+    <div>
+        <h1>{{post.title}}</h1>
+        <div>{{post.body}}</div>
+        <nuxt-link to="/posts">back to post list</nuxt-link>
+    </div>
+</template>
+
+<script>
+import axios from 'axios';
+export default {
+    asyncData({ params }, callback) {
+        console.log(params.id);
+
+        return axios.get(`https://jsonplaceholder.typicode.com/posts/${params.id}`).then(res => {
+            callback(null, {
+                post: res.data
+            });
+        });
+
+    },
+    head() {
+        return {
+            title: this.post.title
+        }
+    }
+
+}
+</script>
+
+<style>
+</style>
diff --git a/public/pages/posts/index.vue b/public/pages/posts/index.vue
@@ -0,0 +1,36 @@
+<template>
+    <div>
+        post
+        <ul>
+            <li v-for="(post, index) in posts" :key="index">
+                <nuxt-link :to="{name: 'posts-id', params:{id: post.id}}">{{post.title}}</nuxt-link>
+            </li>
+        </ul>
+        <nuxt-link to="/">back to home page</nuxt-link>
+    </div>
+</template>
+
+<script>
+import axios from "axios";
+export default {
+    asyncData({ app }, callback) {
+        var p1 = new Promise(resolve => {
+            app.$axios.get('https://jsonplaceholder.typicode.com/posts').then(res => {
+                resolve(res.data);
+            });
+        });
+        p1.then(res => {
+            // console.log(res);
+            callback(null, {
+                posts: res.slice(0, 5)
+            });
+        })
+    },
+    head: {
+        title: 'List of posts'
+    }
+}
+</script>
+
+<style>
+</style>
-Original file line number
+Diff line change
@@ Expand Up / @@ -77,7 +77,8 @@ module.exports = { @@
           '/3',
           '/4',
           '/5',
-          '/6'
+          '/6',
+          '/posts/1'
         ]
       },
       router: {
@@ Expand Down @@