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
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.
6
6
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.
8
8
9
-
### Récupérer le state Vuex dans des composants Vue
9
+
### Récupération d'état Vuex dans des composants Vue
10
10
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) :
12
12
13
13
```js
14
14
// créons un composant Counter
@@ -22,16 +22,16 @@ const Counter = {
22
22
}
23
23
```
24
24
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.
26
26
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.
28
28
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)`) :
30
30
31
31
```js
32
32
constapp=newVue({
33
33
el:'#app',
34
-
// fournit le store avec l'option "store".
34
+
// fournit le store avec l'option `store`.
35
35
// cela injectera l'instance du store dans tous les composants enfants.
36
36
store,
37
37
components: { Counter },
@@ -43,7 +43,7 @@ const app = new Vue({
43
43
})
44
44
```
45
45
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` :
47
47
48
48
```js
49
49
constCounter= {
@@ -56,12 +56,12 @@ const Counter = {
56
56
}
57
57
```
58
58
59
-
### Le helper`mapState`
59
+
### La fonction utilitaire`mapState`
60
60
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 :
62
62
63
63
```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`
65
65
import { mapState } from'vuex'
66
66
67
67
exportdefault {
@@ -73,37 +73,37 @@ export default {
73
73
// passer la valeur littérale 'count' revient à écrire `state => state.count`
74
74
countAlias:'count',
75
75
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
77
77
countPlusLocalState (state) {
78
78
returnstate.count+this.localCount
79
79
}
80
80
})
81
81
}
82
82
```
83
83
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.
85
85
86
86
```js
87
87
computed:mapState([
88
-
// attacher this.count à store.state.count
88
+
// attacher `this.count` à `store.state.count`
89
89
'count'
90
90
])
91
91
```
92
92
93
-
### Object Spread Operator
93
+
### Opérateur de décomposition
94
94
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 :
96
96
97
97
```js
98
98
computed: {
99
99
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
101
101
...mapState({
102
102
// ...
103
103
})
104
104
}
105
105
```
106
106
107
-
### Les composants peuvent toujours avoir un state local
107
+
### Les composants peuvent toujours avoir un état local
108
108
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