Skip to content

Commit 102eb49

Browse files
committed
Add changes after @haeresis and @kokal review.
Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com>
1 parent 0f73e76 commit 102eb49

File tree

1 file changed

+32
-29
lines changed

1 file changed

+32
-29
lines changed

docs/en/mutations.md

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Mutations
22

3-
La seule façon de vraiment modifier le state dans un store Vuex est de commiter une mutation. Les mutations Vuex sont très similaires aux events : chaque mutation a un **type** sous forme de chaîne de caractères et un **handler**. La fonction handler est là où nous procédons aux véritables modifications du state, et elle reçoit le state en premier argument :
3+
La seule façon de vraiment modifier l'état dans un store Vuex est d'acter une mutation. Les mutations Vuex sont très similaires aux évènements : chaque mutation a un **type** sous forme de chaîne de caractères et un **gestionnaire**. La fonction de gestion est en charge de procéder aux véritables modifications de l'état, et elle reçoit l'état en premier argument :
44

55
``` js
66
const store = new Vuex.Store({
@@ -9,22 +9,22 @@ const store = new Vuex.Store({
99
},
1010
mutations: {
1111
increment (state) {
12-
// mutate state
12+
// muter l'état
1313
state.count++
1414
}
1515
}
1616
})
1717
```
1818

19-
Vous ne pouvez pas appeler directement un handler de mutation. La façon de faire est plutôt comme un abonnement à un event : "Lorsqu'une mutation du type `increment` est déclenchée, appelle ce handler." Pour invoquer un handler de mutation, il faut appeler **store.commit** avec son type :
19+
Vous ne pouvez pas appeler directement un gestionnaire de mutation. Le parti-pris ici est proche de l'abonnement à un évènement : « Lorsqu'une mutation du type `increment` est déclenchée, appelle ce gestionnaire. » Pour invoquer un gestionnaire de mutation, il faut appeler `store.commit` avec son type :
2020

2121
``` js
2222
store.commit('increment')
2323
```
2424

25-
### commiter avec un Payload
25+
### Acter avec un argument additionnel
2626

27-
Vous pouvez donner un autre argument à **store.commit** pour la mutation, qui s'appelle **payload** :
27+
Vous pouvez donner un argument additionnel (« payload ») à la fonction `store.commit` lors de la mutation :
2828

2929
``` js
3030
// ...
@@ -38,7 +38,7 @@ mutations: {
3838
store.commit('increment', 10)
3939
```
4040

41-
Dans la plupart des cas, le payload devrait être un objet, ainsi il peut contenir plusieurs champs, et les mutations enregistrées seront également plus descriptives :
41+
Dans la plupart des cas, l'argument additionnel devrait être un objet, ainsi il peut contenir plusieurs champs, et les mutations enregistrées seront également plus descriptives :
4242

4343
``` js
4444
// ...
@@ -54,9 +54,9 @@ store.commit('increment', {
5454
})
5555
```
5656

57-
### Object-Style Commit
57+
### Acter avec un objet
5858

59-
Une méthode alternative pour commiter une mutation est d'utiliser directement un objet qui a une propriété `type` :
59+
Une méthode alternative pour acter une mutation est d'utiliser directement un objet qui a une propriété `type` :
6060

6161
``` js
6262
store.commit({
@@ -65,7 +65,7 @@ store.commit({
6565
})
6666
```
6767

68-
Lors de l'utlisation de l'object-style commit, l'objet entier sera fourni comme payload aux handlers de mutation, donc le handler reste inchangé :
68+
Lors de l'utilisation d'un objet pour acter, c'est l'objet lui-même qui ferra office d'argument pour aux gestionnaires de mutation, le gestionnaire reste donc inchangé :
6969

7070
``` js
7171
mutations: {
@@ -77,23 +77,23 @@ mutations: {
7777

7878
### Les mutations suivent les règles de réactivité de Vue
7979

80-
Puisqu'un state de store de Vuex est rendu réactif par Vue, lorsque nous mutons le state, les composants Vue observant ce state seront automatiquement mis à jour. Cela signifie également que les mutations Vuex sont sujettes aux mêmes inconvénients que lorsqu'on travaille avec Vue :
80+
Puisqu'un état de store de Vuex est rendu réactif par Vue, lorsque nous mutons l'état, les composants Vue observant cet état seront automatiquement mis à jour. Cela signifie également que les mutations Vuex sont sujettes aux mêmes limitations qu'avec l'utilisation de Vue seul :
8181

82-
1. Initialisez de préférence le state initial de votre state avec tous les champs désirés auparavant.
82+
1. Initialisez de préférence le store initial de votre état avec tous les champs désirés auparavant.
8383

84-
2. Lorsque vous ajoutez de nouvelles propriétés à un Object, vous devriez soit :
84+
2. Lorsque vous ajoutez de nouvelles propriétés à un objet, vous devriez soit :
8585

86-
- Utiliser `Vue.set(obj, 'newProp', 123)`, ou -
86+
- Utiliser `Vue.set(obj, 'newProp', 123)`, ou
8787

88-
- Remplacer cet Object par un nouvel Object. Par exemple, en utilisant [object spread syntax](https://github.com/sebmarkbage/ecmascript-rest-spread) (stage-2), il est possible d'écrire :
88+
- Remplacer cet objet par un nouvel objet. Par exemple, en utilisant [opérateur de décomposition](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition) (stage-2), il est possible d'écrire :
8989

9090
``` js
9191
state.obj = { ...state.obj, newProp: 123 }
9292
```
9393

9494
### Utilisation de constante pour les noms de mutation
9595

96-
C'est une façon de faire régulière que d'utiliser des constantes pour les types de mutations dans diverses implémentations de Flux. Cela permet au code de bénéficier d'outils comme les linters, et écrire toutes ces constantes dans un seul fichier permet à vos collaborateurs d'avoir un aperçu de quelles mutations sont possibles dans toute l'application :
96+
C'est une façon de faire régulière que d'utiliser des constantes pour les types de mutations dans diverses implémentations de Flux. Cela permet au code de bénéficier d'outils comme les linters (des outils d'aide à l'analyse syntaxique), et écrire toutes ces constantes dans un seul fichier permet à vos collaborateurs d'avoir un aperçu de quelles mutations sont possibles dans toute l'application :
9797
9898
``` js
9999
// mutation-types.js
@@ -108,20 +108,20 @@ import { SOME_MUTATION } from './mutation-types'
108108
const store = new Vuex.Store({
109109
state: { ... },
110110
mutations: {
111-
// we can use the ES2015 computed property name feature
112-
// to use a constant as the function name
111+
// nous pouvons utiliser la fonctionnalité de nom de propriété calculée
112+
// pour utiliser une constante en tant que nom de fonction
113113
[SOME_MUTATION] (state) {
114-
// mutate state
114+
// muter l'état
115115
}
116116
}
117117
})
118118
```
119119

120-
Utiliser les constantes ou non relève de la préférence personnelle &mdash; cela peut être bénéfique sur un gros projet avec beaucoup de développeurs, mais c'est totalement optionnel si vous n'aimez pas cette pratique.
120+
Utiliser les constantes ou non relève de la préférence personnelle. Cela peut être bénéfique sur un gros projet avec beaucoup de développeurs, mais c'est totalement optionnel si vous n'aimez pas cette pratique.
121121

122122
### Les mutations doivent être synchrones
123123

124-
Une règle importante à retenir est que **les fonctions handler de mutations doivent être synchrones**. Pourquoi ? Considérons l'exemple suivant :
124+
Une règle importante à retenir est que **les fonctions de gestion des mutations doivent être synchrones**. Pourquoi ? Considérons l'exemple suivant :
125125

126126
``` js
127127
mutations: {
@@ -133,11 +133,11 @@ mutations: {
133133
}
134134
```
135135

136-
Maintenant imaginons que nous debuggons l'application et que nous regardons dans les logs de mutation des devtools. Pour chaque mutation enregistrée, le devtool aura besoin de capturer un instantané du state "avant" et un instantané "après". Cependant, le callback asynchrone du l'exemple ci-dessus rend l'opération impossible : le callback n'est pas encore appelé lorsque la mutation est committée, et il n'y a aucun moyen pour le devtool de savoir quand le callback sera véritablement appelé &mdash; toute mutation du state effectuée dans le callack est essentiellement intraçable !
136+
Maintenant imaginons que nous deboguons l'application et que nous regardons dans les logs de mutation des outils de développement (« devtools »). Pour chaque mutation enregistrée, le devtool aura besoin de capturer un instantané de l'état « avant » et un instantané « après ». Cependant, la fonction de rappel asynchrone de l'exemple ci-dessus rend l'opération impossible : la fonction de rappel n'est pas encore appelée lorsque la mutation est actée, et il n'y a aucun moyen pour le devtool de savoir quand la fonction de rappel sera véritablement appelée. Toute mutation d'état effectuée dans la fonction de rappel est essentiellement intraçable !
137137

138-
### commiter des mutations dans les composants
138+
### Acter des mutations dans les composants
139139

140-
Vous pouvez commiter des mutations dans les composants avec `this.$store.commit('xxx')`, ou en utilisant le helper `mapMutations` qui attache les méthodes du composant aux appels de `store.commit` (nécessite l'injection de `store` à la racine) :
140+
Vous pouvez acter des mutations dans les composants avec `this.$store.commit('xxx')`, ou en utilisant la fonction utilitaire `mapMutations` qui attache les méthodes du composant aux appels de `store.commit` (nécessite l'injection de `store` à la racine) :
141141

142142
``` js
143143
import { mapMutations } from 'vuex'
@@ -146,23 +146,26 @@ export default {
146146
// ...
147147
methods: {
148148
...mapMutations([
149-
'increment' // map this.increment() to this.$store.commit('increment')
149+
'increment' // attacher `this.increment()` à `this.$store.commit('increment')`
150+
151+
// `mapMutations` supporte également les paramètres additionnels :
152+
'incrementBy' // attacher `this.incrementBy(amount)` à `this.$store.commit('incrementBy', amount)`
150153
]),
151154
...mapMutations({
152-
add: 'increment' // map this.add() to this.$store.commit('increment')
155+
add: 'increment' // attacher `this.add()` à `this.$store.commit('increment')`
153156
})
154157
}
155158
}
156159
```
157160

158161
### En avant vers les actions
159162

160-
L'asynchronisme combiné à la mutation du state peut rendre votre programme très difficile à comprendre. Par exemple, lorsque vous appelez deux méthodes avec toutes les deux des callbacks asynchrones qui changent le state, comment savez-vous quand elles sont appelées et quel callback est appelé en premier ? C'est exactement la raison pour laquelle nous voulons séparer les deux concepts. Avec Vuex, **les mutations sont des transactions synchrones** :
163+
L'asynchronisme combiné à la mutation de l'état peut rendre votre programme très difficile à comprendre. Par exemple, lorsque vous appelez deux méthodes avec toutes les deux des foncitons de rappel asynchrones qui changent l'état, comment savez-vous quelle fonction de rappel est appelée en première ? C'est exactement la raison pour laquelle nous voulons séparer les deux concepts. Avec Vuex, **les mutations sont des transactions synchrones** :
161164

162165
``` js
163166
store.commit('increment')
164-
// any state change that the "increment" mutation may cause
165-
// should be done at this moment.
167+
// n'importe quel changement d'état de « increment » par mutation
168+
// devrait être faite de manière synchrone.
166169
```
167170

168-
Pour gérer les opérations asynchrones, présentons les [Actions](actions.md).
171+
Pour gérer les opérations asynchrones, tournons-nous vers les [Actions](actions.md).

0 commit comments

Comments
 (0)