nuxt 初接觸

對於nuxt服務端渲染讓人動心的是不會再想vue同樣去定義無數的路由了這一點是挺爽的！！！

先直接曬張圖

 

在api這塊增長了一個fetch方法   它會在組件每次加載前被調用（即在服務端或切換至目標路由以前）。

<template>
  <h1>Stars: {{ $store.state.stars }}</h1>
</template>

<script>
export default {
  fetch ({ store, params }) {
    return axios.get('http://my-api/stars')
    .then((res) => {
      store.commit('setStars', res.data)
    })
  }
}
</script>
//也可使用async或者await簡化模式
<template>
  <h1>Stars: {{ $store.state.stars }}</h1>
</template>

<script>
export default {
  async fetch ({ store, params }) {
    let { data } = await axios.get('http://my-api/stars')
    store.commit('setStars', data)
  }
}
</script>