nuxt中的asyncData和fetch方法及区别

asyncData

应用场景

asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。一般用来请求服务端数据。

使用方法

在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据并返回给当前组件。

export default {
  data() {
    return { 
        project: 'default' 
    }
  },
  asyncData(context) {
  // 将project的值赋值给data中的project
    return { project: 'nuxt' }
  }
}

fetch

应用场景

fetch 方法用于在渲染页面前填充应用的状态树（store）数据,主要是用来处理store中的数据，如更改store、异步获取store数据等.

用法

需要返回一个promise,nuxt会等待这个promise完成后再渲染

fetch({ store, params }) {
      return axios.get('http://my-api/stars').then(res => {
        store.commit('setStars', res.data)
      })
    }

asyncData和fetch

区别

• 都是在组件实例化前调用，无法使用this
• 看了一些例子，有的是在asyncData中获取服务端数据，有的是在fetch中获取服务端数据，甚至有一些是直接在methods中获取。根据官方的描述，我个人倾向在asyncData中获取数据，但是如果是针对store的数据，我会使用feth获取。