Асинхронные данные

Nuxt.js перегружает метод data от Vue.js, чтобы позволить обрабатывать асинхронные данные прежде, чем сохранить их.

Метод data

Метод data вызывается каждый раз перед загрузкой компонента (только для компонентов страниц). Он может быть вызван на стороне сервера или перед переходом к соответствующему маршруту. Этот метод получает контекст в виде первого аргумента, который вы можете использовать для выборки нужных данных, и вернуть обработанные данные.

НЕ используйте this внутри data для обращения к экземпляру компонента, потому что метод вызывается перед инициализацией компонента.

Чтобы сделать метод data асинхронным, Nuxt.js предлагает различные пути. Выберите тот, который вам больше подходит:

  1. Возвращая Promise, Nuxt.js будет ожидать его состояния resolved перед тем, как отобразить компонент.
  2. Используя директивы async/await (Подробнее)
  3. Определить колбэк в качестве второго аргумента и вызывать его в виде: callback(err, data)

Способ первый: возвращая Promise

export default {
  data ({ params }) {
    return axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      return { title: res.data.title }
    })
  }
}

Используя async/await

export default {
  async data ({ params }) {
    let { data } = await axios.get(`https://my-api/posts/${params.id}`)
    return { title: data.title }
  }
}

Используя callback

export default {
  data ({ params }, callback) {
    axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      callback(null, { title: res.data.title })
    })
  }
}

Возвращая объект

Если асинхронного вызов не требуется, то можно просто вернуть объект:

export default {
  data (context) {
    return { foo: 'bar' }
  }
}

Отображение данных

Когда метод data определён, можно отобразить данные внутри шаблона, как обычно:

<template>
  <h1>{{ title }}</h1>
</template>

Аргумент context

Для просмотра списка доступных параметров в 'context', смотрите API контекста страниц.

Обработка ошибок

Добавив метод error(params) в аргумент context, вы можете показать страницу ошибки. Также значение params.statusCode, пришедшее с сервера, будет использоваться для отображения соответствующей ошибки.

Пример с Promise:

export default {
  data ({ params, error }) {
    return axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      return { title: res.data.title }
    })
    .catch((e) => {
      error({ statusCode: 404, message: 'Страница не найдена' })
    })
  }
}

При использовании параметра 'callback' можно вызвать его непосредственно с нужной ошибкой, и тогда Nuxt.js сам вызовет метод error:

export default {
  data ({ params }, callback) {
    axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      callback(null, { title: res.data.title })
    })
    .catch((e) => {
      callback({ statusCode: 404, message: 'Сообщение не найдено' })
    })
  }
}

Для настройки страницы ошибки, пожалуйста, прочитайте про шаблоны.

Обнаружили ошибку или хотите внести свой вклад в документацию? Отредактировать эту страницу на GitHub!