Skip to content

Relecture de async-data.md #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Sep 18, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 30 additions & 30 deletions en/guide/async-data.md
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
---
title: Async Data
description: You may want to fetch data and render it on the server-side. Nuxt.js adds an `asyncData` method to let you handle async operations before setting the component data.
title: Données asynchrones
description: Vous voudriez peut-être récupérer des données et faire le rendu côté serveur. Nuxt.js ajoute une méthode `asyncData` pour vous permettre de gérer les opérations asynchrones avant de définir les données du composant.
---

> You may want to fetch data and render it on the server-side.
Nuxt.js adds an `asyncData` method to let you handle async operations before setting the component data.
> Vous voudriez peut-être récupérer des données et faire le rendu côté serveur.
Nuxt.js ajoute une méthode `asyncData` pour vous permettre de gérer les opérations asynchrones avant de définir les données du composant.

## The asyncData Method
## La méthode asyncData

Sometimes you just want to fetch data and pre-render it on the server-side without using a store.
`asyncData` is called every time before loading the component (**only for pages components**).
It can be called server-side or before navigating to the corresponding route.
This method receives [the context](/api/context) as the first argument, you can use it to fetch some data and nuxt.js will merge it with the component data.
Parfois vous souhaitez simplement récupérer des données et faire le rendu côté serveur sans utiliser de store.
`asyncData` est appelé avant chaque chargement du composant (**uniquement pour les composants de pages**).
On peut l'appeler côté serveur ou avant de naviguer vers la route correspondante.
Cette méthode reçoit [le contexte](/api#context) comme premier argument, vous pouvez l'utiliser pour récupérer différentes données et Nuxt.js les fusionnera avec les données du composant.

<div class="Alert Alert--orange">You do **NOT** have access of the component instance through `this` inside `asyncData` because it is called **before initiating** the component.</div>
<div class="Alert Alert--orange">Vous **n'**avez **PAS** accès à l'instance du composant via `this` au sein de `asyncData` parce que la fonction est appelée **avant d'initier** le composant.</div>

Nuxt.js offers you different ways to use `asyncData`. Choose the one you're the most familiar with:
Nuxt.js vous propose différentes façons d'utiliser `asyncData`. Choisissez celle avec laquelle vous êtes le plus à l'aise :

1. Returning a `Promise`. Nuxt.js will wait for the promise to be resolved before rendering the component.
2. Using the [async/await proposal](https://github.com/lukehoban/ecmascript-asyncawait) ([learn more about it](https://zeit.co/blog/async-and-await))
3. Define a callback as second argument. It has to be called like this: `callback(err, data)`
1. Retourner une `Promise`. Nuxt.js attend que la promesse soit résolue avant de faire le rendu du composant.
2. En utilisant [async / await](https://github.com/lukehoban/ecmascript-asyncawait) ([en savoir plus](https://zeit.co/blog/async-and-await))
3. En définissant une fonction de rappel comme second argument. Elle doit être appelée comme suit : `callback(err, data)`

### Returning a Promise
### Retourner une promesse
```js
export default {
asyncData ({ params }) {
Expand All @@ -33,7 +33,7 @@ export default {
}
```

### Using async/await
### Utiliser async / await
```js
export default {
async asyncData ({ params }) {
Expand All @@ -43,7 +43,7 @@ export default {
}
```

### Using a callback
### Utiliser une fonction de rappel
```js
export default {
asyncData ({ params }, callback) {
Expand All @@ -55,30 +55,30 @@ export default {
}
```

### Displaying the data
### Afficher les données

The result from asyncData will be **merged** with data.
You can display the data inside your template like you're used to doing:
Le résultat de `asyncData` sera **fusionné** avec les données.
Vous pouvez afficher les données au sein du template comme habituellement :

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

## The Context
## Le contexte

To see the list of available keys in `context`, take a look at the [API Pages data](/api).
Pour voir la liste des attributs disponibles dans `context`, jeter un œil à [la partie Essentielle de l'API pour `context`](/api/context).

### Accessing dynamic route data
### Accéder aux données des routes dynamiques

You can use the context object injected into the `asyncData` property to access dynamic route data. For example, dynamic route params can be accessed using the name of the file or folder that configured it. So if you define a file named `_slug.vue`, you can acccess it via `context.params.slug`.
Vous pouvez utiliser l'objet du contexte injecté à la propriété `asyncData` afin d'accéder aux données des routes dynamiques. Par exemple, les données des routes dynamiques peuvent être accédées en utilisant le nom du fichier ou du dossier qui la configure. Si vous définissez un fichier nommé `_slug.vue`, vous pourrez y accéder via `context.params.slug`.

## Handling Errors
## Gestion des erreurs

Nuxt.js adds the `error(params)` method in the `context`, you can call it to display the error page. `params.statusCode` will be also used to render the proper status code form the server-side.
Nuxt.js ajoute la méthode `error(params)` au `context`, vous pouvez l'appeler pour afficher la page d'erreur. `params.statusCode` sera également utilisée pour faire le rendu avec le code de statut approprié côté serveur.

Example with a `Promise`:
Exemple avec une `Promise` :
```js
export default {
asyncData ({ params, error }) {
Expand All @@ -87,13 +87,13 @@ export default {
return { title: res.data.title }
})
.catch((e) => {
error({ statusCode: 404, message: 'Post not found' })
error({ statusCode: 404, message: 'Billet non trouvé' })
})
}
}
```

If you're using the `callback` argument, you can call it directly with the error and nuxt.js will call the `error` method for you:
Si vous utilisez l'argument `callback`, vous pouvez l'appeler directement en lui passant l'erreur et Nuxt.js appellera la méthode `error` pour vous :
```js
export default {
asyncData ({ params }, callback) {
Expand All @@ -108,4 +108,4 @@ export default {
}
```

To customize the error page, take a look at the [VIEWS layouts section](/guide/views#layouts).
Pour personnaliser la page d'erreur, consultez [la partie Mises en page de la section Vues](/guide/views#mises-en-page).
2 changes: 1 addition & 1 deletion en/guide/directory-structure.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ _Ce répertoire ne peut pas être renommé._

### Le répertoire des stores

Le répertoire `store` contient vos fichiers [de store Vuex](https://vuex.vuejs.org/fr/). Les stores Vuex sont implémentés de manière optionnelle dans le framework Nuxt.js. La création d'un fichier `index.js` dans ce répertoire active automatiquement l'option dans le framework.
Le répertoire `store` contient vos fichiers de [store Vuex](https://vuex.vuejs.org/fr/). Les stores Vuex sont implémentés de manière optionnelle dans le framework Nuxt.js. La création d'un fichier `index.js` dans ce répertoire active automatiquement l'option dans le framework.

_Ce répertoire ne peut pas être renommé._

Expand Down
10 changes: 5 additions & 5 deletions en/guide/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@ En tant que framework, Nuxt.js est doté de nombreuses fonctionnalités pour vou

Nuxt.js inclut les éléments suivants afin de créer une expérience de développement optimale :

- [Vue 2](https://github.com/vuejs/vue)
- [Vue Router](https://github.com/vuejs/vue-router)
- [Vuex](https://github.com/vuejs/vuex) (inclut uniquement quand l'[option `store`](/guide/vuex-store) est activée)
- [Vue Meta](https://github.com/declandewet/vue-meta)
- [Vue 2](https://fr.vuejs.org/)
- [Vue Router](https://router.vuejs.org/fr/)
- [Vuex](https://ssr.vuejs.org/fr/) (inclut uniquement quand l'[option `store`](/guide/vuex-store) est activée)
- [vue-meta](https://github.com/declandewet/vue-meta)

Un total de seulement **57ko min+gzip** (53ko avec Vuex).

Expand Down Expand Up @@ -68,7 +68,7 @@ Si pour une quelconque raison vous préférez ne pas utiliser le rendu côté se

Jetez un œil à [la liste des commandes](/guide/commands) pour en savoir plus.

Si vous avez déjà un serveur, vous pouvez greffer Nuxt.js en l'utilisant comme middleware. Il n'y a aucune restriction quand vous utilisez Nuxt.js pour développer votre application web universelle. Consultez le guide [d'utilisation de Nuxt.js par programmation](/api/nuxt).
Si vous avez déjà un serveur, vous pouvez greffer Nuxt.js en l'utilisant comme middleware. Il n'y a aucune restriction quand vous utilisez Nuxt.js pour développer votre application web universelle. Consultez le guide d'[Utilisation de Nuxt.js par programmation](/api/nuxt).

## Génération statique (pré-rendu)

Expand Down
4 changes: 2 additions & 2 deletions en/guide/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ L'application est désormais accessible à l'adresse http://localhost:3000.

<p class="Alert">Nuxt.js va surveiller les modifications faites sur les fichiers du répertoire <code>pages</code> aussi il n'y a pas besoin de redémarrer le serveur quand vous ajoutez de nouvelles pages.</p>

Pour en savoir plus sur la structure des répertoires du projet, consultez [la documentation de l'architecture des répertoires](/guide/directory-structure).
Pour en savoir plus sur l'organisation des répertoires dans un projet, consultez la documentation de l'[Architecture des répertoires](/guide/directory-structure).

## Commencer depuis zéro

Expand Down Expand Up @@ -89,4 +89,4 @@ L'application est désormais accessible à l'adresse http://localhost:3000.

<p class="Alert">Nuxt.js va surveiller les modifications faites sur les fichiers du répertoire <code>pages</code> aussi il n'y a pas besoin de redémarrer le serveur quand vous ajoutez de nouvelles pages</p>

Pour en savoir plus sur la structure des dossiers du projet, consultez [la documentation de l'architecture des dossiers](/guide/directory-structure).
Pour en savoir plus sur la structure des dossiers du projet, consultez la documentation de l'[Architecture des répertoires](/guide/directory-structure).
8 changes: 4 additions & 4 deletions en/guide/routing.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ router: {

Comme vous pouvez le voir, la route nommée `users-id` contient le chemin `:id?` ce qui le rend optionnel. Si vous voulez le rendre obligatoire, créez un fichier `index.vue` dans le dossier `users/_id`.

<p class="Alert Alert--info"><b>Attention :</b> les routes dynamiques sont ignorées par la commande `generate` : [ Configuration de l'API pour la génération](/api/configuration-generate#routes)</p>
<p class="Alert Alert--info"><b>Attention :</b> les routes dynamiques sont ignorées par la commande `generate`, consultez la configuration de l'API pour La propriété `generate`](/api/configuration-generate#routes)</p>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Même question également pour les noms de section que sur la PR #14 ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cette fois c'est le bon nom de page :)

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Est-ce qu'il ne manquerais pas un '['?

Copy link
Member Author

@MachinisteWeb MachinisteWeb Sep 18, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oui bien vu. J'ai commit ça : 8768bc4


### Validation des paramètres de route

Expand All @@ -107,7 +107,7 @@ export default {

Si la méthode de validation ne renvoie pas `true`, Nuxt.js chargera automatiquement la page d'erreur 404.

Plus d'informations à propos de la méthode de validation : [API pour la validation de pages](/api/pages-validate)
Pour plus d'informations à propos de la méthode de validation, consultez [la partie Pages de l'API pour La méthode `validate`](/api/pages-validate)

## Routes imbriquées

Expand Down Expand Up @@ -240,7 +240,7 @@ module.exports = {
}
```

Plus d'informations à propos des transitions : [Configuration de l'API pour les transitions](/api/pages-transition)
Pour plus d'informations à propos des transitions, consultez [la partie Configuration de l'API pour La propriété `transition`](/api/pages-transition)

### Paramètres des pages

Expand All @@ -263,7 +263,7 @@ export default {
}
```

Plus d'informations à propos de la propriété transition : [API pour la transition de pages](/api/pages-transition)
Pour plus d'informations à propos de la propriété transition, consultez [la partie Configuration de l'API pour La propriété `transition`](/api/pages-transition)

## Middleware

Expand Down
24 changes: 12 additions & 12 deletions en/guide/views.md
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export default {
</script>
```

Plus d'informations à propos de la propriété `layout` dans [la partie pages de l'API sur `layout`](/api/pages-layout)
Pour plus d'informations, consultez la configuration de l'API à propos de [La propriété `layout`](/api/pages-layout).

Regardez la [vidéo de démonstration](https://www.youtube.com/watch?v=YOKnSTp7d38) pour la voir en action (EN).

Expand Down Expand Up @@ -150,16 +150,16 @@ export default {

| Attribut | Description |
|-----------|-------------|
| asyncData | L'attribut le plus important. Il peut être asynchrone et reçoit le contexte comme argument, lisez la [documentation sur les données asynchrones](/guide/async-data) pour savoir comment il fonctionne. |
| fetch | Utilisé pour peupler le store avant de faire le rendu de la page, équivalent à la méthode `data` sauf qu'il ne peuple pas le composant `data`. Voir [la partie pages de l'API sur `fetch`](/api/pages-fetch). |
| head | Défini des balises meta spécifiques pour la page en cours, voir [la partie pages de l'API sur `head`](/api/pages-head). |
| layout | Défini une mise en page existantes dans le répertoire `layouts`, voir [la partie pages de l'API sur `layout`](/api/pages-layout). |
| transition | Défini une transition spécifique pour une page, voir [la partie pages de l'API sur `transition`](/api/pages-transition). |
| scrollToTop | Booléen, par défaut: `false`. Indiquez si vous souhaitez que la position se déplace vers le haut avant d'afficher la page, est utilisé pour les [routes imbriquées](/guide/routing#routes-imbriqu-es). |
| validate | Fonction de validation pour les [routes dynamiques](/guide/routing#routes-dynamiques). |
| middleware | Défini un middleware pour cette page, ce middleware sera exécuté avant d'effectuer le rendu de la page, voir [middleware dans le routage](/guide/routing#middleware). |
| asyncData | L'attribut le plus important. Il peut être asynchrone et reçoit le contexte comme argument, lisez la documentation sur les [Données asynchrones](/guide/async-data) pour savoir comment il fonctionne. |
| fetch | Utilisé pour peupler le store avant de faire le rendu de la page, équivalent à la méthode `data` sauf qu'il ne peuple pas le composant `data`. Voir [la partie Pages de l'API sur `fetch`](/api/pages-fetch). |
| head | Défini des balises meta spécifiques pour la page en cours, voir [la partie Pages de l'API sur `head`](/api/pages-head). |
| layout | Défini une mise en page existantes dans le répertoire `layouts`, voir [la partie Pages de l'API sur `layout`](/api/pages-layout). |
| transition | Défini une transition spécifique pour une page, voir [la partie Pages de l'API sur `transition`](/api/pages-transition). |
| scrollToTop | Booléen, par défaut: `false`. Indiquez si vous souhaitez que la position se déplace vers le haut avant d'afficher la page, est utilisé pour les [Routes imbriquées](/guide/routing#routes-imbriqu-es). |
| validate | Fonction de validation pour les [Routes dynamiques](/guide/routing#routes-dynamiques). |
| middleware | Défini un middleware pour cette page, ce middleware sera exécuté avant d'effectuer le rendu de la page, voir le [Middleware dans le Routage](/guide/routing#middleware). |

Plus d'informations à propos de l'utilisation des attributs des pages : [La partie pages de l'API](/api)
Pour plus d'informations à propos de l'utilisation des attributs de pages, consultez [la partie Pages de l'API](/api)

## Entête HTML

Expand Down Expand Up @@ -194,10 +194,10 @@ head: {

Pour connaitre la liste des options que vous pouvez donner à `head`, jeter un œil à la [documentation vue-meta](https://github.com/declandewet/vue-meta#recognized-metainfo-properties).

Plus d'informations à propos de la méthode `head` dans [la partie configuration de l'API sur `head`](/api/configuration-head).
Plus d'informations à propos de la méthode `head` dans [la partie Configuration de l'API sur `head`](/api/configuration-head).

### Balises meta personnalisées pour une page

Plus d'informations à propos de la méthode `head` dans [la partie configuration de l'API sur `head`](/api/pages-head).
Plus d'informations à propos de la méthode `head` dans [la partie Configuration de l'API sur `head`](/api/pages-head).

<p class="Alert">Afin d'éviter toutes duplications lors de l'utilisation d'un composant enfant, donnez un identifiant unique à l'aide de l'attribut `hid`. Pour [en savoir plus](https://github.com/declandewet/vue-meta#lists-of-tags).</p>