iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 15
0
Modern Web

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列 第 15

15. Nuxt 透過 fetch 動態產生內容,並在 Client 使用

這篇主題講「Nuxt 如何用 fetch 動態產生頁面內容」

用來補充頁面細部設定

複習一下 Nuxt 收到請求後的處理流程

https://zh.nuxtjs.org/nuxt-schema.png

asyncDatafetch實作上是個 Promise Chain,先後執行但兩者功用稍有不同

https://ithelp.ithome.com.tw/upload/images/20181030/20103424XMtFFmY9y7.png

前一章 asyncData 用來操作 state,收到 page componentcontext 物件,將處理完的最終回傳值寫回 data

通常用於將 SSR 渲染樣板所需的資料,存進 data

這章介紹的 fetch 用來操作 store,收到 nuxt appcontext 物件,將處理完的資料寫回 store

通常用於將 SSR 取得的資料或 nuxt app 當下狀態,寫進 store,供 server/client(browser) 雙方共用

Vuex store 預設值改放在 @store/indxe.js

import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    state: () => ({
      result: '未查詢'
    }),
    mutations: {
      setResult (state, { result }) {
        state.result = result;
      }
    }
  })
}

export default createStore

在頁面元件透過 fetch 操作 store

export default {
  fetch ({ store, params }) {
      const result = '報名結果是 ooxx';
      store.commit('setResult', result);
  }
}

示範 - 查詢 theF2E 挑戰賽報名結果

改寫上一章示範 /search-signup-result,先用 async/await

pages/search-signup-result.vue

<template>
    <div>
		<h1>六角報名查詢</h1>
        
        {{ $store.state.result }}<template>
    </div>
</template>

<script>
import axios from 'axios';

export default {

	/* 查詢 hexsholl@test.com 有無報名 theF2E 挑戰賽 */

	async asyncData() {

		let { data } = await axios.post('https://www.thef2e.com/api/isSignUp', {

            "email": "hexscholl@test.com"

        });
        
        store.commit('setResult', data);

	}

}
</script>

Promise 寫法,如下:

/* ... */
	/* 查詢 hexsholl@test.com 有無報名 theF2E 挑戰賽 */
    
    fetch ({ store, params }) {
      return axios.post('https://www.thef2e.com/api/isSignUp', {
          "email": "hexscholl@test.com"
      })
      .then(({ data }) => ({
          store.commit('setResult', data);
      }))
      /* Alternative */
      // .then((res) => {
      // 	store.commit('setResult', res.data);
      // })
  }
}
/* ... */

預覽結果



上一篇
14. Nuxt 透過 asyncData 動態產生頁面內容
下一篇
16. Nuxt 全域設定檔 (nuxt.config.js),可以吃嗎?
系列文
Nuxt - 使用 Vue.js 做 SSR 的第一哩路32

尚未有邦友留言

立即登入留言