Skip to content
This repository has been archived by the owner on Sep 3, 2024. It is now read-only.

Commit

Permalink
Translate api/asyncData
Browse files Browse the repository at this point in the history
  • Loading branch information
rspt committed Apr 25, 2017
1 parent 0e76338 commit d3ca872
Showing 1 changed file with 46 additions and 0 deletions.
46 changes: 46 additions & 0 deletions fr/api/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
---
title: "API: La méthode asyncData"
description: Vous voudrez peut-être récupérer des données et faire le rendu côté serveur. Nuxt.js ajoute une méthode `asyncData` vous permettant de gérer des opérations asynchrones avant de définir les données du composant.
---

# La méthode asyncData

> Vous voudrez peut-être récupérer des données et faire le rendu côté serveur. Nuxt.js ajoute une méthode `asyncData` vous permettant de gérer des opérations asynchrones avant de définir les données du composant.
- **Type:** `Function`

`asyncData` est appelée avant chaque chargement de composant (**uniquement pour les composants pages**). Elle peut être appelée côté serveur ou avant de nvaiguer sur la route correspondante. Cette méthode reçoit le **context** (objet) comme premier argument; vous pouvez l'utiliser afin de récupérer des données et retourner les données du composant.

Le résultat d'asyncData sera **mergé** avec les données.

```js
export default {
data () {
return { project: 'default' }
},
asyncData (context) {
return { project: 'nuxt' }
}
}
```

<div class="Alert Alert--orange">Vous **n'avez pas** accès à l'instance du composant via `this` au sein de `data` parce que la fonciton est appelée **avant d'initialiser** le composant.</div>

## Context

Liste des key disponibles dans `context`:

| Key | Type | Disponibilité | Description |
|-----|------|--------------|-------------|
| `isClient` | Boolean | Client & Serveur | Booléen vous permettant de savoir si vous faites le rendu côté client |
| `isServer` | Boolean | Client & Serveur | Booléen vous permettant de savoir si vous faites le rendu côté serveur |
| `isDev` | Boolean | Client & Serveur | Booléen vous permettan de savoir si vous êtes en mode dev, peut être utile pour cacher certaines données en production |
| `route` | [vue-router route](https://router.vuejs.org/en/api/route-object.html) | Client & Server | `vue-router` route instance. |
| `store` | [vuex store](http://vuex.vuejs.org/en/api.html#vuexstore-instance-properties) | Client & Server | `Vuex.Store` instance. **Disponible uniquement si [vuex store](/guide/vuex-store) est configuré.** |
| `env` | Object | Client & Serveur | Variables d'environnement configurées dans `nuxt.config.js`, voir [env api](/api/configuration-env) |
| `params` | Object | Client & Serveur | Alias de route.params |
| `query` | Object | Client & Serveur | Alias de route.query |
| `req` | [http.Request](https://nodejs.org/api/http.html#http_class_http_incomingmessage) | Serveur | Requête du serveur node.js. Si nuxt est utilisé comme middleware, l'objet req pourrait être différent en fonction du framework que vous utilisez. **Non disponible via `nuxt generate`*. |
| `res` | [http.Response](https://nodejs.org/api/http.html#http_class_http_serverresponse) | Serveur | Réponse du serveur node.js. Si nuxt est utilisé comme middleware, l'bjet res pourrait être différent en fonction du framework que vous utilisez. **Non disponible via `nuxt generate`*. |
| `redirect` | Function | Client & Serveur | Utilisez cette méthode pour rediriger l'utilisateur d'une route à une autre; le code de statut utilisé côté serveur par défaut est 302. `redirect([status,] path [, query])` |
| `error` | Function | Client & Serveur | Utilisez cette méthode pour afficher la page d'erreur: `error(params)`. `params` devrait avoir les champs `statusCode` et `message`. |

0 comments on commit d3ca872

Please sign in to comment.