nuxt 中的asyncData和fetch方法及区别

1. asyncData()和fetch()的相同点

  • 参数是一个object,为context(上下文) :被设定为当前页面的上下文对象
  • 参考官方上下文
//asyncData()(context) {
fetch()(context) {
  // Universal keys
  const {
    app,     //包含所有插件的 Vue 根实例。例如:在使用 axios 的时候,你想获取 $axios 可以直接通过 context.app.$axios 来获取
    store,   // Vuex.Store 实例。只有vuex 数据流存在相关配置时可用
    route,   // Vue Router 路由实例
    params,  // route.params 的别名
    query,   // route.query 的别名
    from,    // 路由的导航路线
    env,     // nuxt.config.js 中配置的环境变量
    isDev,   //是否是开发 dev 模式,在生产环境的数据缓存中用到
    isHMR,   //是否是通过模块热替换 webpack hot module replacement (仅在客户端以 dev 模式)
    req,     // Node.js API 的 Request 对象。如果 Nuxt 以中间件形式使用的话,这个对象就根据你所使用的框架而定。nuxt generate 不可用
    res,     // 与req同理
    redirect,// 用这个方法重定向用户请求到另一个路由。状态码在服务端被使用,默认 302 redirect([status,] path [, query])
    error,   // 用这个方法展示错误页:error(params) 。params 参数应该包含 statusCode 和 message 字段
    $config  // 访问运行配置
  } = context
  // Server-side
  if (process.server) {
    const { req, res, beforeNuxtRender } = context
  }
  // Client-side
  if (process.client) {
    const { from, nuxtState } = context
  }
}
  • 官方图给了详细的用法:上下文用法详情nuxt 中的asyncData和fetch方法及区别_第1张图片
  • 注意:由于asyncData和fetch方法是在组件 初始化 前被调用的,所以在方法内是没有办法通过 this 来引用组件的实例对象

2. asyncData()和fetch()的不同点

2.1 asyncData()
  • 应用场景:在服务器端获取并渲染数据(异步请求数据,返回给当前组件的data),asyncData方法使得你能够在渲染组件之前异步获取数据
  • 什么时候被调用:
    • asyncData方法会在组件(限于页面组件)每次加载之前被调用。
    • 它可以在服务端或路由更新之前被调用
  • 利用 asyncData方法来获取数据并返回给当前组件
<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.description }}</p>
  </div>
</template>

<script>
  export default {
    async asyncData({ params }) {
      const post = await await axios.get(`https://api.nuxtjs.dev/posts/${params.id}`)
      return { post }
    }
  }
</script>
2.2 fetch()
  • 应用场景: 在渲染页面前填充应用的状态树(store)数据(不会设置组件的数据)
  • 什么时候被调用:
    • 组件每次加载前被调用(在服务端或切换至目标路由之前)
  • 可以用 fetch 方法来获取数据填充应用的状态树(vuex)。为了让获取过程可以异步,你需要返回一个 Promise,Nuxt.js 会等这个 promise 完成后再渲染组件,如:
<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>
  • 失效:查询字符串(query)更改, fetch()不会调用。
    • 失效解决方案:设置通过页面组件的watchQuery属性来监听参数的变化
2.3 异步数据:
  • asyncData是通用数据获取的另一个钩子。不像fetch,它需要您在组件实例上设置属性(或调度 Vuex 操作)以保存您的异步状态,asyncData只需将其返回值合并到组件的本地状态中

你可能感兴趣的:(nuxt,vue.js,javascript,前端)