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: docs/fr/actions.md
+25-21Lines changed: 25 additions & 21 deletions
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
Les actions sont similaires aux mutations, à la différence que :
4
4
5
-
- Au lieu de modifier le state, les actions committent des mutations.
5
+
- Au lieu de modifier l'état, les actions actent des mutations.
6
6
- Les actions peuvent contenir des opérations asynchrones.
7
7
8
8
Enregistrons une simple action :
@@ -25,9 +25,9 @@ const store = new Vuex.Store({
25
25
})
26
26
```
27
27
28
-
Les handlers d'action reçoivent un objet contexte qui expose le même set de méthodes/propriétés que l'instance du store, donc vous pouvez appeler `context.commit` pour commiter une mutation, ou accéder au state et aux getters via `context.state` et `context.getters`. Nous verrons pourquoi cet objet contexte n'est pas l'instance du store elle-même lorsque nous présenterons les [Modules](moduels.md) plus tard.
28
+
Les gestionnaires d'action reçoivent un objet contexte qui expose le même ensemble de méthodes et propriétés que l'instance du store, donc vous pouvez appeler `context.commit` pour acter une mutation, ou accéder à l'état et aux accesseurs via `context.state` et `context.getters`. Nous verrons pourquoi cet objet contexte n'est pas l'instance du store elle-même lorsque nous présenterons les [Modules](modules.md) plus tard.
29
29
30
-
En pratique, nous utilisons souvent la [destructuration d'argument](https://github.com/lukehoban/es6features#destructuring) (*argument destructuring*) pour simplifier quelque peu le code (particulièrement si nous avons besoin d'appeler `commit` plusieurs fois) :
30
+
En pratique, nous utilisons souvent la [destructuration d'argument](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Affecter_par_d%C3%A9composition) pour simplifier quelque peu le code (particulièrement si nous avons besoin d'appeler `commit` plusieurs fois) :
31
31
32
32
```js
33
33
actions: {
@@ -37,7 +37,7 @@ actions: {
37
37
}
38
38
```
39
39
40
-
### Dispatcher des actions dans les composants
40
+
### Propager des actions dans les composants
41
41
42
42
Les actions sont déclenchées par la méthode `store.dispatch` :
43
43
@@ -57,47 +57,48 @@ actions: {
57
57
}
58
58
```
59
59
60
-
Les actions prennent en charge le même format de payload et *object-style dispatch* :
60
+
Les actions prennent également en charge les paramètres additionnels (« payload ») et les objets pour propager :
61
61
62
62
```js
63
-
//dispatcher avec un payload
63
+
//propager avec un paramètre additionnel
64
64
store.dispatch('incrementAsync', {
65
65
amount:10
66
66
})
67
67
68
-
//dispatcher avec un object
68
+
//propager avec un objet
69
69
store.dispatch({
70
70
type:'incrementAsync',
71
71
amount:10
72
72
})
73
73
```
74
74
75
-
Un exemple plus pratique d'une application du monde réel serait une action pour check-out un panier d'achats, ce qui implique **d'appeler une API asynchrone** et de **comitter de multiples mutations** :
75
+
Un exemple concret d'application serait une action pour vider un panier d'achats, ce qui implique **d'appeler une API asynchrone** et d'**acter de multiples mutations** :
76
76
77
77
```js
78
78
actions: {
79
79
checkout ({ commit, state }, products) {
80
80
// sauvegarder les articles actuellement dans le panier
81
81
constsavedCartItems= [...state.cart.added]
82
-
// envoyer la requête de checkout, et vider le panier
82
+
// envoyer la requête de checkout,
83
+
// et vider le panier
83
84
commit(types.CHECKOUT_REQUEST)
84
-
// l'API du shop prend un callback success et un callback failure
85
+
// l'API de la boutique en ligne prend une fonction de rappel en cas de succès et une autre en cas d'échec
Notez que nous procédons à un flux d'opérations asynchrones, et enregistrons les effets de bord (mutation du state) de l'action en les committant.
97
+
Notez que nous procédons à un flux d'opérations asynchrones, et enregistrons les effets de bord (mutation de l'état) de l'action en les actant.
97
98
98
-
### Dispatcher des actions dans les composants
99
+
### Propager des actions dans les composants
99
100
100
-
Vous pouvez dispatcher des actions dans les composants avec `this.$store.dispatch('xxx')`, ou en utilisant le helper`mapActions` qui attache les méthodes du composant aux appels de `store.dispatch` (nécessite l'injection de `store` à la racine) :
101
+
Vous pouvez propager des actions dans les composants avec `this.$store.dispatch('xxx')`, ou en utilisant la fonction utilitaire`mapActions` qui attache les méthodes du composant aux appels de `store.dispatch` (nécessite l'injection de `store` à la racine) :
101
102
102
103
```js
103
104
import { mapActions } from'vuex'
@@ -106,10 +107,13 @@ export default {
106
107
// ...
107
108
methods: {
108
109
...mapActions([
109
-
'increment'// attacher this.increment() à this.$store.dispatch('increment')
110
+
'increment'// attacher `this.increment()` à `this.$store.dispatch('increment')`
111
+
112
+
// `mapActions` supporte également les paramètres additionnels :
113
+
'incrementBy'// attacher `this.incrementBy(amount)` à `this.$store.dispatch('incrementBy', amount)`
110
114
]),
111
115
...mapActions({
112
-
add:'increment'// attacher this.add() à this.$store.dispatch('increment')
116
+
add:'increment'// attacher `this.add()` à `this.$store.dispatch('increment')`
113
117
})
114
118
}
115
119
}
@@ -119,7 +123,7 @@ export default {
119
123
120
124
Les actions sont souvent asynchrones, donc comment savoir lorsqu'une action est terminée ? Et plus important, comment composer plusieurs actions ensemble pour manipuler des flux asynchrones plus complexes ?
121
125
122
-
La première chose à savoir est que `store.dispatch`retourne la valeur retournée par le handler de l'action déclenchée, vous pouvez donc retourner une Promise :
126
+
La première chose à savoir est que `store.dispatch`peut gérer la Promesse (« Promise ») retournée par le gestionnaire d'action déclenché et par conséquent vous pouvez également retourner une Promesse :
123
127
124
128
```js
125
129
actions: {
@@ -158,17 +162,17 @@ actions: {
158
162
Pour finir, nous pouvons utiliser de [async / await](https://tc39.github.io/ecmascript-asyncawait/), une fonctionnalité JavaScript qui sera disponible très bientôt, nous pouvons composer nos actions ainsi :
159
163
160
164
```js
161
-
// sachant que getData() et getOtherData() retournent des Promises
165
+
// sachant que `getData()` et `getOtherData()` retournent des Promesses.
162
166
163
167
actions: {
164
168
asyncactionA ({ commit }) {
165
169
commit('gotData', awaitgetData())
166
170
},
167
171
asyncactionB ({ dispatch, commit }) {
168
-
awaitdispatch('actionA') //wait for actionA to finish
172
+
awaitdispatch('actionA') //attendre que `actionA` soit finie
169
173
commit('gotOtherData', awaitgetOtherData())
170
174
}
171
175
}
172
176
```
173
177
174
-
> Il est possible pour un `store.dispatch` de déclencher plusieurs handlers d'action dans différents modules. Dans ce genre de cas, la valeur retournée sera une Promise qui se résoud quand tous les handlers déclenchés ont été résolus.
178
+
> Il est possible pour un `store.dispatch` de déclencher plusieurs gestionnaires d'action dans différents modules. Dans ce genre de cas, la valeur retournée sera une Promesse qui se résoud quand tous les gestionnaires déclenchés ont été résolus.
0 commit comments