Skip to content

Commit b998fca

Browse files
Merge pull request #8 from vuejs-fr/state
Relecture `state.md`
2 parents c80c83b + 5124dc7 commit b998fca

File tree

1 file changed

+21
-21
lines changed

1 file changed

+21
-21
lines changed

docs/en/state.md

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
# State
22

3-
### Single State Tree
3+
### Arbre d'état unique
44

5-
Vuex utilise un **single state tree** — cet unique objet contient tout le state au niveau applicatif et sert de "source unique de vérité". Cela signifie également que vous n'aurez qu'un seul store pour chaque application. Un _single state tree_ rend rapide la localisation d'une partie de state spécifique, et nous permet de facilement prendre des instantanés du state actuel de l'application à des fins de debugging.
5+
Vuex utilise un **arbre d'état unique**, c'est-à-dire que cet unique objet contient tout l'état au niveau applicatif et sert de « source de vérité unique ». Cela signifie également que vous n'aurez qu'un seul store pour chaque application. Un arbre d'état unique rend rapide la localisation d'une partie spécifique de l'état et permet de facilement prendre des instantanés de l'état actuel de l'application à des fins de débogage.
66

7-
Le _single state tree_ n'entre pas en conflit avec la modularité — dans les prochains chapitres, nous examinerons comment séparer votre state et vos mutations dans des sous-modules.
7+
L'arbre d'état unique n'entre pas en conflit avec la modularité. Dans les prochains chapitres, nous examinerons comment séparer votre état et vos mutations dans des sous-modules.
88

9-
### Récupérer le state Vuex dans des composants Vue
9+
### Récupération d'état Vuex dans des composants Vue
1010

11-
Alors, comment affichons-nous le state du store dans nos composants Vue ? Puisque les stores Vuex sont réactifs, la façon la plus simple d'y "récupérer" le state est de simplement retourner une partie du state depuis une [computed property](http://vuejs.org/guide/computed.html) :
11+
Alors, comment affichons-nous l'état du store dans nos composants Vue ? Puisque les stores Vuex sont réactifs, la façon la plus simple d'y « récupérer » l'état est tout simplement de retourner une partie de l'état depuis une [une propriété calculée](http://fr.vuejs.org/guide/computed.html) :
1212

1313
``` js
1414
// créons un composant Counter
@@ -22,16 +22,16 @@ const Counter = {
2222
}
2323
```
2424

25-
Lorsque `store.state.count` change, cela entraînera la ré-évaluation de la computed property, et déclenchera les actions DOM associées.
25+
Lorsque `store.state.count` change, cela entraînera la ré-évaluation de la propriété calculée, et déclenchera les actions associées au DOM.
2626

27-
Cependant, ce pattern oblige le composant à compter sur le singleton global du store. Lorsqu'on utilise un système de module, il est nécessaire d'importer le store dans tous les composants qui utilisent le state du store, et il est également nécessaire de créer un mock lorsque l'on teste le composant.
27+
Cependant, ce modèle oblige le composant à compter sur le singleton global du store. Lorsqu'on utilise un système de module, il est nécessaire d'importer le store dans tous les composants qui utilisent l'état du store, et il est également nécessaire de créer un jeu de test lorsque l'on teste le composant.
2828

29-
Vuex fournit un méchanisme pour "injecter" le store dans tous les composants enfants du composant racine avec l'option `store` (activée par `Vue.use(Vuex)`) :
29+
Vuex fournit un méchanisme pour « injecter » le store dans tous les composants enfants du composant racine avec l'option `store` (activée par `Vue.use(Vuex)`) :
3030

3131
``` js
3232
const app = new Vue({
3333
el: '#app',
34-
// fournit le store avec l'option "store".
34+
// fournit le store avec l'option `store`.
3535
// cela injectera l'instance du store dans tous les composants enfants.
3636
store,
3737
components: { Counter },
@@ -43,7 +43,7 @@ const app = new Vue({
4343
})
4444
```
4545

46-
En fournissant l'option `store` à l'instance racine, le store sera injecté dans tous les composants enfants de la racine et sera disponible sur ceux-ci avec `this.$store`. Mettons à jours notre implémentation de `Counter` :
46+
En fournissant l'option `store` à l'instance racine, le store sera injecté dans tous les composants enfants de la racine et sera disponible dans ces derniers avec `this.$store`. Mettons à jour notre implémentation de `Counter` :
4747

4848
``` js
4949
const Counter = {
@@ -56,12 +56,12 @@ const Counter = {
5656
}
5757
```
5858

59-
### Le helper `mapState`
59+
### La fonction utilitaire `mapState`
6060

61-
Lorsqu'un composant a besoin d'utiliser plusieurs propriétés ou getters du state du store, déclarer toutes ces computed properties peut devenir répétitif et verbeux. Afin de palier à ça, nous pouvons utiliser le helper `mapState` qui génère des fonctions getters pour nous et nous épargne quelques coups de clavier :
61+
Lorsqu'un composant a besoin d'utiliser plusieurs accesseurs ou propriétés de l'état du store, déclarer toutes ces propriétés calculées peut devenir répétitif et verbeux. Afin de palier à ça, nous pouvons utiliser la fonction utilitaire `mapState` qui génère des fonctions d'accession pour nous et nous épargne quelques coups de clavier :
6262

6363
``` js
64-
// dans la version standalone, les helpers sont exposés comme Vuex.mapState
64+
// dans la version complète, des fonctions utilitaires sont exposées tel que `Vuex.mapState`
6565
import { mapState } from 'vuex'
6666

6767
export default {
@@ -73,37 +73,37 @@ export default {
7373
// passer la valeur littérale 'count' revient à écrire `state => state.count`
7474
countAlias: 'count',
7575

76-
// pour accéder au state local avec `this`, une fonction normale doit être utilisée
76+
// pour accéder à l'état local avec `this`, une fonction normale doit être utilisée
7777
countPlusLocalState (state) {
7878
return state.count + this.localCount
7979
}
8080
})
8181
}
8282
```
8383

84-
Il est également possible de fournir un tableau de chaînes de caractères à `mapState` lorsque le nom de la propriété du state du store est la même que celui du composant.
84+
Il est également possible de fournir un tableau de chaînes de caractères à `mapState` lorsque le nom de la propriété de l'état du store est la même que celui du composant.
8585

8686
``` js
8787
computed: mapState([
88-
// attacher this.count à store.state.count
88+
// attacher `this.count` à `store.state.count`
8989
'count'
9090
])
9191
```
9292

93-
### Object Spread Operator
93+
### Opérateur de décomposition
9494

95-
Notez que `mapState` renvoie un objet. Comment l'utiliser en complément des autres computed properties locales ? Normalement, il faudrait utiliser un outil pour fusionner les multiples objets en un seul afin de passer cet objet final à `computed`. Cependant avec le [object spread operator](https://github.com/sebmarkbage/ecmascript-rest-spread) (qui est une proposition stage-3 ECMASCript), nous pouvons grandement simplifier la syntaxe :
95+
Notez que `mapState` renvoie un objet. Comment l'utiliser en complément des autres propriétés calculées locales ? Normalement, il faudrait utiliser un outil pour fusionner les multiples objets en un seul afin de passer cet objet final à `computed`. Cependant avec l'[opérateur de décomposition](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition) (qui est une proposition stage-3 ECMASCript), nous pouvons grandement simplifier la syntaxe :
9696

9797
``` js
9898
computed: {
9999
localComputed () { /* ... */ },
100-
// rajouter cet objet dans l'objet `computed` avec l'object spread operator
100+
// rajouter cet objet dans l'objet `computed` avec l'opérateur de décomposition
101101
...mapState({
102102
// ...
103103
})
104104
}
105105
```
106106

107-
### Les composants peuvent toujours avoir un state local
107+
### Les composants peuvent toujours avoir un état local
108108

109-
Utiliser Vuex ne signifie pas que vous devez mettre **tout** votre state dans Vuex. Bien que le fait de mettre plus de state dans Vuex rende vos mutations de state plus explicites et plus debuggables, parfois il peut aussi rendre le code plus verbeux et indirect. Si une partie de state appartient directement à un seul composant, il est parfaitement sain de la laisser dans le state local. Assurez vous de prendre en compte les avantages et inconvénients d'une telle décision afin de vous adaptez le mieux aux besoins de votre application.
109+
Utiliser Vuex ne signifie pas que vous devez mettre **tout** votre état dans Vuex. Bien que le fait de mettre plus d'état dans Vuex rende vos mutation d'état plus explicites et plus débogable, parfois il peut aussi rendre le code plus verbeux et indirect. Si une partie de l'état appartient directement à un seul composant, il est parfaitement sain de la laisser dans l'état local. Assurez vous de prendre en compte les avantages et inconvénients d'une telle décision afin de vous adapter au mieux aux besoins de votre application.

0 commit comments

Comments
 (0)