You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: en/data.md
+10-10
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,4 @@
1
-
# Pré-chargement et état
1
+
# Récupération de données et état
2
2
3
3
## Gestionnaire d'état des données
4
4
@@ -76,9 +76,9 @@ export function createApp () {
76
76
77
77
## Collocation logique avec les composants
78
78
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 ?
80
80
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.
82
82
83
83
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 :
84
84
@@ -105,7 +105,7 @@ export default {
105
105
</script>
106
106
```
107
107
108
-
## Pré-chargement de données côté serveur
108
+
## Récupération de données côté serveur
109
109
110
110
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.
111
111
@@ -160,9 +160,9 @@ if (window.__INITIAL_STATE__) {
160
160
}
161
161
```
162
162
163
-
## Pré-chargement de données côté client
163
+
## Récupération de données côté client
164
164
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 :
166
166
167
167
1.**Résoudre les données avant de changer de route :**
168
168
@@ -177,7 +177,7 @@ Côté client, il y a deux différentes approches pour gérer du pré-chargement
177
177
178
178
router.onReady(() => {
179
179
// 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
181
181
// des données que nous avons déjà. Utilisation de `router.beforeResolve()`, ainsi tous
182
182
// les composants asynchrones sont résolues.
183
183
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
213
213
})
214
214
```
215
215
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 :**
217
217
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.
219
219
220
220
Cela peut être réalisé avec un mixin global uniquement côté client :
221
221
@@ -224,7 +224,7 @@ Côté client, il y a deux différentes approches pour gérer du pré-chargement
224
224
beforeMount () {
225
225
const { asyncData } =this.$options
226
226
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
228
228
// ainsi tout ce que nous devons faire dans un composant est `this.dataPromise.then(...)`
229
229
// pour exécuter la suite des tâches une fois que les données sont prêtes
0 commit comments