Skip to content

Commit 84ccc85

Browse files
committed
Récupération au lieu de pré-chargement
Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com>
1 parent 1c3bfe2 commit 84ccc85

File tree

2 files changed

+11
-11
lines changed

2 files changed

+11
-11
lines changed

en/SUMMARY.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
- [Écrire du code universel (En)](universal.md)
33
- [Structure de code (En)](structure.md)
44
- [Routage et scission du code](routing.md)
5-
- [Pré-chargement et état (En)](data.md)
5+
- [Récupération de données et état (En)](data.md)
66
- [Hydratation côté client (En)](hydration.md)
77
- [Introduction à l'empaquetage (En)](bundle-renderer.md)
88
- [Configuration de pré-compilation (En)](build-config.md)

en/data.md

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Pré-chargement et état
1+
# Récupération de données et état
22

33
## Gestionnaire d'état des données
44

@@ -76,9 +76,9 @@ export function createApp () {
7676

7777
## Collocation logique avec les composants
7878

79-
Donc, où devons nous appeler le code en charge de l'action de pré-chargement ?
79+
Donc, où devons nous appeler le code en charge de l'action de récupération de données ?
8080

81-
Les données que nous avons besoin de pré-charger sont déterminées par la route visitée, qui va aussi déterminer quels composants vont être rendus. En fait, les données nécessaires a une route donnée sont aussi les données nécessaires aux composants pour être rendus pour une route. Aussi il serait naturel de placer la logique de pré-chargement à l'intérieur des composants de route.
81+
Les données que nous avons besoin de pré-charger sont déterminées par la route visitée, qui va aussi déterminer quels composants vont être rendus. En fait, les données nécessaires a une route donnée sont aussi les données nécessaires aux composants pour être rendus pour une route. Aussi il serait naturel de placer la logique de récupération de données à l'intérieur des composants de route.
8282

8383
Nous allons exposer une fonction statique personnalisée `asyncData` sur nos composants de route. Notez que, puisque cette fonction va être appelée avant l'instanciation des composants, l'accès à `this` ne sera pas possible. Le store et les informations de route ont donc besoin d'être passés en tant qu'arguments :
8484

@@ -105,7 +105,7 @@ export default {
105105
</script>
106106
```
107107

108-
## Pré-chargement de données côté serveur
108+
## Récupération de données côté serveur
109109

110110
Dans `entry-server.js` nous pouvons obtenir les composants qui concordent avec une route grâce à `router.getMatchedComponents()`, et appeler `asyncData` si le composant l'expose. Nous avons ensuite besoin d'attacher l'état résolu au contexte de rendu.
111111

@@ -160,9 +160,9 @@ if (window.__INITIAL_STATE__) {
160160
}
161161
```
162162

163-
## Pré-chargement de données côté client
163+
## Récupération de données côté client
164164

165-
Côté client, il y a deux différentes approches pour gérer du pré-chargement de données :
165+
Côté client, il y a deux différentes approches pour gérer du récapération de données :
166166

167167
1. **Résoudre les données avant de changer de route :**
168168

@@ -177,7 +177,7 @@ Côté client, il y a deux différentes approches pour gérer du pré-chargement
177177

178178
router.onReady(() => {
179179
// Ajouter le hook du routeur pour gérer `asyncData`
180-
// Cela étant fait après la résolution de la route initial, évitons un double pré-chargement
180+
// Cela étant fait après la résolution de la route initial, évitons une double récupération de données
181181
// des données que nous avons déjà. Utilisation de `router.beforeResolve()`, ainsi tous
182182
// les composants asynchrones sont résolues.
183183
router.beforeResolve((to, from, next) => {
@@ -213,9 +213,9 @@ Côté client, il y a deux différentes approches pour gérer du pré-chargement
213213
})
214214
```
215215

216-
2. **Pré-charger les données après que les vues concordantes soient rendues :**
216+
2. **Récupérer les données après que les vues concordantes soient rendues :**
217217

218-
Cette stratégie place la logique de pré-chargement côté client dans la fonction `beforeMount` de la vue du composant. Cela permet aux vues de changer instantanément quand un changement de route est enclenché, aussi l'application semblera un peu plus réactive. Cependant, la vue suivante n'aura pas l'intégralité de ses données disponibles lors du rendu. Il est donc nécessaire d'avoir un état de chargement conditionnel pour chaque vue de composant utilisant cette stratégie.
218+
Cette stratégie place la logique de récupération de données côté client dans la fonction `beforeMount` de la vue du composant. Cela permet aux vues de changer instantanément quand un changement de route est enclenché, aussi l'application semblera un peu plus réactive. Cependant, la vue suivante n'aura pas l'intégralité de ses données disponibles lors du rendu. Il est donc nécessaire d'avoir un état de chargement conditionnel pour chaque vue de composant utilisant cette stratégie.
219219

220220
Cela peut être réalisé avec un mixin global uniquement côté client :
221221

@@ -224,7 +224,7 @@ Côté client, il y a deux différentes approches pour gérer du pré-chargement
224224
beforeMount () {
225225
const { asyncData } = this.$options
226226
if (asyncData) {
227-
// assigner une opération de pré-chargement à une Promesse
227+
// assigner une opération de récupération de données à une Promesse
228228
// ainsi tout ce que nous devons faire dans un composant est `this.dataPromise.then(...)`
229229
// pour exécuter la suite des tâches une fois que les données sont prêtes
230230
this.dataPromise = asyncData({

0 commit comments

Comments
 (0)