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/en/modules.md
+19-19Lines changed: 19 additions & 19 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,8 +1,8 @@
1
1
# Modules
2
2
3
-
Parce qu'il utilise un _single state tree_, tout le state de notre application est contenu dans un seul et même gros objet. Cependant, au fur et à mesure que notre application grandit, le store peut devenir très engorgé.
3
+
Du fait de l'utilisation d'un arbre d'état unique, tout l'état de notre application est contenu dans un seul et même gros objet. Cependant, au fur et à mesure que notre application grandit, le store peut devenir très engorgé.
4
4
5
-
Pour y remédier, Vuex nous permet de diviser notre store en **modules**. Chaque module peut contenir son propre state, mutations, actions, getters, et même d'autres modules.
5
+
Pour y remédier, Vuex nous permet de diviser notre store en **modules**. Chaque module peut contenir ses propres état, mutations, actions, accesseurs. Il peut même contenir ses propres modules internes.
6
6
7
7
```js
8
8
constmoduleA= {
@@ -25,20 +25,20 @@ const store = new Vuex.Store({
25
25
}
26
26
})
27
27
28
-
store.state.a// -> le state du module A
29
-
store.state.b// -> le state du module B
28
+
store.state.a// -> l'état du `moduleA`
29
+
store.state.b// -> l'état du `moduleB`
30
30
```
31
31
32
-
### State local d'un module
32
+
### État local d'un module
33
33
34
-
Dans les mutations et getters d'un module, le premier argument reçu sera le **state local du module**.
34
+
Dans les mutations et accesseurs d'un module, le premier argument reçu sera **l'état local du module**.
35
35
36
36
```js
37
37
constmoduleA= {
38
38
state: { count:0 },
39
39
mutations: {
40
40
increment (state) {
41
-
// state est le state du module local
41
+
//`state` est l'état du module local
42
42
state.count++
43
43
}
44
44
},
@@ -51,7 +51,7 @@ const moduleA = {
51
51
}
52
52
```
53
53
54
-
De façon similaire, dans les actions du module, `context.state` exposera le state local, et le state racine sera disponible avec `context.rootState` :
54
+
De façon similaire, dans les actions du module, `context.state` exposera l'état local, et l'état racine sera disponible avec `context.rootState` :
55
55
56
56
```js
57
57
constmoduleA= {
@@ -66,7 +66,7 @@ const moduleA = {
66
66
}
67
67
```
68
68
69
-
Également, dans les getters du module, le state racine sera exposé en troisième argument :
69
+
Également, dans les accesseurs du module, l'état racine sera exposé en troisième argument :
70
70
71
71
```js
72
72
constmoduleA= {
@@ -81,9 +81,9 @@ const moduleA = {
81
81
82
82
### Espace de nom
83
83
84
-
Par défaut, les actions, mutations et accesseurs à l'intérieur d'un module son toujours enregistré sous l'**espace de nom global**. Cela permet a de multiple module d'être réactif au même type de mutation et action.
84
+
Par défaut, les actions, mutations et accesseurs à l'intérieur d'un module sont toujours enregistrés sous l'**espace de nom global**. Cela permet à de multiples modules d'être réactifs au même type de mutation et d'action.
85
85
86
-
Si vous souhaitez que votre module soit auto-suffisant et réutilisable, vous pouvez le ranger sous un espace de nom avec `namespaced: true`. Quand le module est enregistré, tous ses accesseurs, actions et mutations seront automatiquement basé sur l'espace de nom du module dans lesquels ils sont rangés. Par exemple :
86
+
Si vous souhaitez que votre module soit auto-suffisant et réutilisable, vous pouvez le ranger sous un espace de nom avec `namespaced: true`. Quand le module est enregistré, tous ses accesseurs, actions et mutations seront automatiquement basés sur l'espace de nom du module dans lesquels ils sont rangés. Par exemple :
87
87
88
88
```js
89
89
conststore=newVuex.Store({
@@ -128,11 +128,11 @@ const store = new Vuex.Store({
128
128
})
129
129
```
130
130
131
-
Les accesseurs et actions sous espace de nom reçoivent des `getters`, `dispatch` et `commit`localisé. En d'autres termes, vous pouvez utiliser les paramètres de module sans écrire de prefix dans le même module. Permuter entre un espace de nom ou pas n'affecte pas le code à l'intérieur du module.
131
+
Les accesseurs et actions sous espace de nom reçoivent des `getters`, `dispatch` et `commit`localisés. En d'autres termes, vous pouvez utiliser les paramètres de module sans écrire de prefix dans ce même module. Permuter entre un espace de nom ou non n'affecte pas le code à l'intérieur du module.
132
132
133
133
#### Accéder aux propriétés globales dans les modules à espace de nom
134
134
135
-
Si vous voulez utiliser des état et accesseurs globaux, `rootState` et `rootGetters` sont passés en 3ième et 4ième arguments des fonctions accès et sont également exposés en tant que propriété de l'objet `context` passé aux fonctions d'action.
135
+
Si vous voulez utiliser des états et accesseurs globaux, `rootState` et `rootGetters` sont passés en 3ième et 4ième arguments des fonctions d'accès et sont également exposés en tant que propriété de l'objet `context` passé aux fonctions d'action.
136
136
137
137
Pour propager les actions ou les mutations actées dans l'espace de nom global, passez `{ root: true }` en 3ième argument à `dispatch` et `commit`.
138
138
@@ -142,7 +142,7 @@ modules: {
142
142
namespaced:true,
143
143
144
144
getters: {
145
-
// Les `getters` sont localisé dans le module des accesseurs
145
+
// Les `getters` sont localisés dans le module des accesseurs
146
146
// vous pouvez utiliser `rootGetters` via le 4ième argument des accesseurs
#### Fonctions utilitaires liées avec espace de nom
174
174
175
-
Quand nous lions un module à espace de nom à un composant avec les fonctions utilitaires `mapState`, `mapGetters`, `mapActions` and `mapMutations`, cela peut être légèrement verbeux :
175
+
Quand nous lions un module sous espace de nom à un composant avec les fonctions utilitaires `mapState`, `mapGetters`, `mapActions` and `mapMutations`, cela peut être légèrement verbeux :
176
176
177
177
```js
178
178
computed: {
@@ -206,9 +206,9 @@ methods: {
206
206
}
207
207
```
208
208
209
-
#### Limitations pour les plugins de développeurs
209
+
#### Limitations pour les plugins des développeurs
210
210
211
-
Vous devez faire attention ou nom d'espace imprévisible pour vos modules quand vous créez un [plugin](plugins.md) qui fournit les modules et laisser les utilisateurs les ajouter au store de Vuex. Vos modules seront également sous espace de nom si l'utilisateur du plugin l'ajoute sous un module sous espace de nom. Pour vous adaptez à la situation, vous devez recevoir la valeur de l'espace de nom via vos options de plugin :
211
+
Vous devez faire attention au nom d'espace imprévisible pour vos modules quand vous créez un [plugin](plugins.md) qui fournit les modules et laisser les utilisateurs les ajouter au store de Vuex. Vos modules seront également sous espace de nom si l'utilisateur du plugin l'ajoute sous un module sous espace de nom. Pour vous adaptez à la situation, vous devez recevoir la valeur de l'espace de nom via vos options de plugin :
212
212
213
213
```js
214
214
// passer la valeur d'espace de nom via une option du plugin
L'état des modules seront disponibles dans `store.state.myModule` et `store.state.nested.myModule`.
241
+
L'état des modules est disponible dans `store.state.myModule` et `store.state.nested.myModule`.
242
242
243
243
L'enregistrement dynamique de module permet aux autres plugins Vue de bénéficier de la gestion de l'état de Vuex en attachant un module au store de l'application. Par exemple, la bibliothèque [`vuex-router-sync`](https://github.com/vuejs/vuex-router-sync) intègre vue-router avec vuex en gérant l'état de la route d'application dans un module enregistré dynamiquement.
244
244
245
245
Vous pouvez aussi supprimer un module enregistré dynamiquement avec `store.unregisterModule(moduleName)`. Notez que vous ne pouvez pas supprimer des modules statiques (déclarés à la création du store) avec cette méthode.
246
246
247
247
### Ré-utiliser un module
248
248
249
-
Parfois nous devrons créer de multiples instances d'un module pour par exemple :
249
+
Parfois nous devrons créer de multiples instances d'un module pour, par exemple :
250
250
251
251
- créer plusieurs stores qui utilisent le même module ou
252
252
- enregistrer le même module plusieurs fois dans le même store.
0 commit comments