Skip to content

Commit 7ef86ce

Browse files
committed
Revu de Sylvain
Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com>
1 parent cdf8a47 commit 7ef86ce

File tree

1 file changed

+13
-13
lines changed

1 file changed

+13
-13
lines changed

src/v2/guide/state-management.md

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
---
2-
title: Gestion des états
2+
title: Gestion de l'état
33
type: guide
44
order: 22
55
---
66

7-
## Implémentation officielle à la Flux
7+
## Implémentation officielle semblable à Flux
88

9-
Les grosses applications peuvent souvent augmenter en complexité du fait des multiples parties d'états disséminés à travers divers composants et les interactions entre eux. Pour résoudre ce problème, Vue offre [Vuex](https://github.com/vuejs/vuex) : sa propre bibliothèque de gestion d'état inpiré par Elm. Il est même intégré à [vue-devtools](https://github.com/vuejs/vue-devtools), fournissant une possibilité de voir l'état dans le temps sans aucune configuration préalable.
9+
Les grosses applications peuvent souvent augmenter en complexité du fait des multiples parties d'état disséminées à travers divers composants et les interactions entre eux. Pour résoudre ce problème, Vue offre [vuex](https://github.com/vuejs/vuex) : notre propre bibliothèque de gestion d'état inpiré par Elm. Il est même intégré à [vue-devtools](https://github.com/vuejs/vue-devtools), permettant le voyage dans le temps sans aucune configuration préalable.
1010

1111
### Information pour les développeurs React
1212

13-
Si vous venez de React, vous vous demanderez probablement quels sont les points de comparaisons entre Vuex et [Redux](https://github.com/reactjs/redux) (l'implémentation de Flux la plus populaire dans cet écosystème). Redux est actuellement une couche de vue agnostique, il peut donc être facilement utilisé avec Vue à l'aide de plusieurs [liaisons simples](https://github.com/egoist/revue). Vuex est différent dans le sens où il _sait_ ce qu'il y a dans une application Vue. Cela lui permet d'être mieux intégré à Vue, offrant une API plus intuitive et une meilleure expérience de développement.
13+
Si vous venez de React, vous pouvez vous demander comment Vuex se compare à [Redux](https://github.com/reactjs/redux) (l'implémentation de Flux la plus populaire dans cet écosystème). Redux est en fait agnostique de la couche vue, et peut donc être facilement utilisé avec Vue à l'aide de plusieurs [liaisons simples](https://github.com/egoist/revue). Vuex est différent dans le sens où il _sait_ qu'il est dans une application Vue. Cela lui permet de mieux s'intégrer avec Vue, offrant une API plus intuitive et une meilleure expérience de développement.
1414

1515
## Gestion d'état simple à partir de rien
1616

17-
Nous n'avons pas assez insisté sur le fait que, dans des applications Vue, c'est l'objet `data` qui fait office de « source de vérité ». Une instance de Vue ne fait que proxifier l'accès à cet objet. Par conséquent, si vous avez une partie d'état qui doit être partagée par plusieurs instances, vous pouvez simplement la partager par référence :
17+
On n'insiste souvent pas assez sur le fait que, dans des applications Vue, c'est l'objet `data` qui fait office de « source de vérité ». Une instance de Vue ne fait que proxifier l'accès à cet objet. Par conséquent, si vous avez une partie d'état qui doit être partagée par plusieurs instances, vous pouvez simplement la partager par référence :
1818

1919
``` js
2020
const sourceOfTruth = {}
@@ -28,9 +28,9 @@ const vmB = new Vue({
2828
})
2929
```
3030

31-
Maintenant, quelque soit la manière dont `sourceOfTruth` sera mutée, les instances vmA` et `vmB` mettrons à jour leurs vues automatiquement. Les sous-composants à l'intérieur de chacune de ces instances y auront aussi accès via la propriété `this.$root.$data`. Maintenant, nous avons une unique source de vérité, mais le débogue pourrait être un vrai cauchemar. N'importe quel fragment de donnée pourrait être changé par n'importe quelle partie de notre application, à n'importe quel moment, et sans laisser de trace.
31+
Maintenant, quelle que soit la manière dont `sourceOfTruth` sera mutée, les instances `vmA` et `vmB` mettront à jour leurs vues automatiquement. Les sous-composants à l'intérieur de chacune de ces instances y auront aussi accès via la propriété `this.$root.$data`. Maintenant, nous avons une unique source de vérité, mais le débogage serait un cauchemar. N'importe quel fragment de donnée pourrait être changé par n'importe quelle partie de notre application, à n'importe quel moment, et sans laisser de trace.
3232

33-
Pour nous aider à résoudre ce problème, nous allons adopter un simple **modèle de stockage (« store »)** :
33+
Pour nous aider à résoudre ce problème, nous pouvons adopter un simple **modèle de stockage (« store »)** :
3434

3535
``` js
3636
var store = {
@@ -49,9 +49,9 @@ var store = {
4949
}
5050
```
5151

52-
Notez que toutes les actions qui changent l'état du store sont mises à l'intérieur du store lui-même. Ce type de gestion d'état centralisé permet de comprendre plus facilement quelles types de mutations sont faites et comment elles sont déclenchées. Maintenant, quand quelque chose se passera mal, nous auront des logs sur ce qui a conduit à ce bogue.
52+
Notez que toutes les actions qui changent l'état du store sont mises à l'intérieur du store lui-même. Ce type de gestion d'état centralisé permet de comprendre plus facilement quel type de mutations peuvent survenir et comment elles sont déclenchées. Maintenant, quand quelque-chose tourne mal, nous auront également un log sur ce qui a conduit à ce bogue.
5353

54-
De plus, chaque instance/composant peut gérer lui-même sont propre état privé :
54+
De plus, chaque instance/composant peut gérer lui-même son propre état privé :
5555

5656
``` js
5757
var vmA = new Vue({
@@ -69,10 +69,10 @@ var vmB = new Vue({
6969
})
7070
```
7171

72-
![Gestion des états](/images/state.png)
72+
![Gestion de l'état](/images/state.png)
7373

74-
<p class="tip">Il est important de noter que vous ne devriez jamais remplacer l'objet d'état original dans vos actions. Les composants et le store ont besoin de partager une référence sur le même objet pour que les mutations puissent être observées.</p>
74+
<p class="tip">Il est important de noter que vous ne devriez jamais remplacer l'objet d'état original dans vos actions. Les composants et le store ont besoin de partager une référence au même objet pour que les mutations puissent être observées.</p>
7575

76-
En élargissant notre convention au fait qu'il ne serait jamais permis à un composant de directement muter un état qui appartient au store, mais que l'on devrait à la place propager des évènements pour notifier le store qu'une action a été entreprise ; nous arriverions éventuellement à une architecture [Flux](https://facebook.github.io/flux/). Le bénéfice de cette convention est que nous pouvons enregistrer toutes les mutations de l'état qui apparaissent dans le store et implémenter des fonctions utilitaires avancées de débogage comme des logs de mutations, des instantanés, des rejouabilités d'historique ou de l'observation dans le temps.
76+
Alors que nous continuons à développer la convention selon laquelle il n'est jamais permis à un composant de directement muter un état qui appartient au store, mais devrait à la place propager des évènements pour notifier le store qu'une action a été entreprise ; nous arriverons éventuellement à une architecture [Flux](https://facebook.github.io/flux/). Le bénéfice de cette convention est que nous pouvons enregistrer toutes les mutations d'état survenant sur le store et implémenter des fonctions utilitaires avancées de débogage telles que des logs de mutations, des clichés instantanés, et du voyage dans le temps sur l'historique des actions.
7777

78-
Nous avons fait le tour de la présentation de [Vuex](https://github.com/vuejs/vuex), aussi si vous êtes arrivé jusqu'ici, il est probablement temps de l'essayer !
78+
Nous avons fait le tour de la présentation de [vuex](https://github.com/vuejs/vuex), aussi si vous êtes arrivé jusqu'ici, il est probablement temps de l'essayer !

0 commit comments

Comments
 (0)