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
Au cœur de chaque application Vuex, il y a le**store**. Un "store" est tout simplement un conteneur avec le **state** de votre application. Il y a deux choses qui différencient un store Vuex d'un simple objet global :
3
+
Au cœur de chaque application Vuex, il y a la**zone de stockage (« store »)**. Un « store » est tout simplement un conteneur avec l'**état** de votre application. Il y a deux choses qui différencient un store Vuex d'un simple objet global :
4
4
5
-
1. Les stores Vuex sont réactifs. Quand les composants Vue y récupèrent le state, ils modifieront efficacement et de façon réactive si le state du store change.
5
+
1. Les stores Vuex sont réactifs. Quand les composants Vue y récupèrent l'état, ils se mettront à jour de façon réactive et efficace si l'état du store a changé.
6
6
7
-
2. Vous ne pouvez pas muter directement le state du store. La seule façon de modifier le state d'un store est de **commiter** explicitement des **mutations**. Cela assure que chaque état laisse un enregistrement traçable, et permette à des outils de mieux nous aider à comprendre nos applications.
7
+
2. Vous ne pouvez pas muter directement l'état du store. La seule façon de modifier l'état d'un store est d'**acter** explicitement des **mutations**. Cela assure que chaque état laisse un enregistrement traçable, et permet à des outils de nous aider à mieux appréhender nos applications.
8
8
9
9
### Le store le plus simple
10
10
11
11
> **NOTE:** Nous allons utiliser la syntaxe ES2015 dans les exemples de code pour le reste de la documentation. Si vous ne vous êtes pas encore penché dessus, [vous devriez](https://babeljs.io/docs/learn-es2015/) !
12
12
13
-
Après [avoir installé](installation.md) Vuex, nous allons créer un store. C'est assez simple — définissez juste un objet state initial et quelques mutations :
13
+
Après [avoir installé](installation.md) Vuex, nous allons créer un store. C'est assez simple ; définissez juste un objet d'état initial et quelques mutations :
14
14
15
15
```js
16
-
//Make sure to call Vue.use(Vuex) first if using a module system
16
+
//Assurez vous d'appeler `Vuex.use(Vuex)` en premier lieu si vous utilisez un système de module
17
17
18
18
conststore=newVuex.Store({
19
19
state: {
@@ -27,18 +27,18 @@ const store = new Vuex.Store({
27
27
})
28
28
```
29
29
30
-
Maintenant, vous pouvez accéder à l'objet state avec `store.state`, et déclencher un changement de state avec la méthode `store.commit` :
30
+
Maintenant, vous pouvez accéder à l'objet d'état avec `store.state`, et déclencher un changement d'état avec la méthode `store.commit` :
31
31
32
32
```js
33
33
store.commit('increment')
34
34
35
35
console.log(store.state.count) // -> 1
36
36
```
37
37
38
-
Encore une fois, la raison pour laquelle nous committons une mutation au lieu de modifier `store.state.count` directement, c'est parce que nous voulons le tracer explicitement. Cette simple convention rend votre intention plus explicite, ainsi vous pouvez raisonner plus facilement les changements de state en lisant votre code. De plus, cela nous donne l'opportunité d'implémenter des outils qui peuvent enregistrer chaque mutation, prendre des instantanés du state, ou même procéder à du debugging dans le temps.
38
+
Encore une fois, la raison pour laquelle nous actons une mutation au lieu de modifier `store.state.count` directement, c'est parce que nous voulons le tracer explicitement. Cette simple convention rend votre intention plus explicite, ainsi vous pouvez raisonner plus facilement les les changements d'état en lisant votre code. De plus, cela nous donne l'opportunité d'implémenter des outils qui peuvent enregistrer chaque mutation, prendre des instantanés de l'état, ou même procéder à de la visualisation d'état dans le temps.
39
39
40
-
Utiliser le state du store dans un composant implique simplement de retourner le state dans une *computed property*, car le state du store est réactif. Déclencher des changements signifie simplement commiter des mutations dans les méthodes du composant.
40
+
Utiliser l'état du store dans un composant implique simplement de retourner l'état dans une *propriété calculée*, car l'état du store est réactif. Déclencher des changements signifie simplement d'acter des mutations dans les méthodes du composant.
41
41
42
-
Voici un exemple de la [plus basique app Vuex de compteur](https://jsfiddle.net/n9jmu5v7/341/).
42
+
Voici un exemple de l'[application de comptage Vuex la plus basique](https://jsfiddle.net/n9jmu5v7/341/).
43
43
44
-
Ensuite, nous allons examiner chaque concept de base plus en détails, et commençons avec le [State](state.md).
44
+
Ensuite, nous allons examiner chaque concept de base plus en détails, et commençons avec l'[État](state.md).
Vuex est un ***state management pattern* et une bibliothèque** pour des applications Vue.js. Il sert de store centralisé pour tous les composants dans une application, avec des règles pour s'assurer que l'état ne peut subir des mutations que d'une manière prévisible. Il s'intègre également avec [l'extension officielle](https://github.com/vuejs/vue-devtools) de Vue afin de fournir des fonctionnalités avancées comme voir l'état dans le temps et débugger sans configuration, ainsi que de prendre des instantanés, importer et exporter l'état.
3
+
Vuex est un ***gestionnaire d'état (« state management pattern »)* et une bibliothèque** pour des applications Vue.js. pour des applications Vue.js. Il sert de zone de stockage de données centralisée pour tous les composants dans une application, avec des règles pour s'assurer que l'état ne puisse subir de mutations que d'une manière prévisible. Il s'intègre également avec [l'extension officielle](https://github.com/vuejs/vue-devtools) de Vue afin de fournir des fonctionnalités avancées comme de la visualisation d'état dans le temps et des exports et imports d’instantanés (« snapshot ») d'état.
4
4
5
-
### Qu'est-ce qu'un "State Management Pattern"?
5
+
### Un « gestionnaire d'état », qu'est-ce que c'est ?
6
6
7
-
Commençons avec une simple application Vue de compteur :
7
+
Commençons par une simple application de comptage avec Vue :
8
8
9
9
```js
10
10
newVue({
11
-
//state
11
+
//état
12
12
data () {
13
13
return {
14
14
count:0
15
15
}
16
16
},
17
-
//view
17
+
//vue
18
18
template:`
19
19
<div>{{ count }}</div>
20
20
`,
@@ -27,39 +27,37 @@ new Vue({
27
27
})
28
28
```
29
29
30
-
C'est une app auto-contenue avec les parties suivantes :
30
+
C'est une application auto-suffisante avec les parties suivantes :
31
31
32
-
- L'**État** (_state_), qui est la source de vérité qui dirige notre app;
33
-
- La **Vue** (_view_), qui est juste un mapping déclaratif du **state**;
34
-
- Les **actions**, qui sont les façons possibles pour le state de changer en réaction aux actions de l'utilisateur depuis la **vue**.
32
+
- L'**état**, qui est la source de vérité qui pilotant votre application,
33
+
- La **vue**, qui est une réflexion déclarative de l'**état**,
34
+
- Les **actions**, qui sont les façons possibles pour l'état de changer en réaction aux actions utilisateurs depuis la **vue**.
35
35
36
-
Voici une représentation extrèmement simple du concept de "one-way data flow" (_flux de données unidirectionnel_) :
36
+
Voici une représentation extrèmement simple du concept de « flux de donnée unidirectionnel » :
Cependant, la simplicité s'évapore rapidement lorsque nous avons **de multiples composants qui partagent le même state** :
42
+
Cependant, la simplicité s'évapore rapidement lorsque nous avons **de multiples composants qui partagent un même état global** :
43
43
44
-
- Plusieurs vues peuvent dépendre de la même partie du state.
45
-
- Des actions dans différentes vues peuvent avoir besoin de muter la même partie du state.
44
+
- Plusieurs vues peuvent dépendre de la même partie de l'état global.
45
+
- Des actions dans différentes vues peuvent avoir besoin de muter la même partie de l'état global.
46
46
47
-
Pour le premier problème, passer des propriétés peut être fastidieux pour les composants profondément imbriqués, et ça ne fonctionne tout simplement pas pour les composants d'un même parent. Pour le deuxième problème, on se retrouve souvent à se rabattre sur des solutions telles qu'accéder aux références d'instance du parent/enfant direct ou essayer de muter et synchroniser de multiples copies du state via des events. Ces deux patterns sont fragiles et posent rapidement des problèmes de maintenabilité du code.
47
+
Pour le premier problème, passer des props peut être fastidieux pour les composants profondément imbriqués, et ça ne fonctionne tout simplement pas pour les composants d'un même parent. Pour le deuxième problème, on se retrouve souvent à se rabattre sur des solutions telles qu'accéder aux références d'instance du parent/enfant direct ou essayer de muter et synchroniser de multiples copies de l'état via des évènements. Ces deux modèles sont fragiles et posent rapidement des problèmes de maintenabilité du code.
48
48
49
-
Alors pourquoi ne pas extraire le state partagé des composants, et le gérer dans un singleton global ? De cette manière, notre arbre de composant devient une grosse "view", et n'importe-quel composant peut accéder au state ou déclencher des actions, peu importe où il se trouve dans l'arbre !
49
+
Alors pourquoi ne pas extraire l'état global partagé des composants, et le gérer dans un singleton global ? De cette manière, notre arbre de composant devient une grosse « vue », et n'importequel composant peut accéder à l'état global ou déclencher des actions, peu importe où il se trouve dans l'arbre !
50
50
51
-
De plus, en définissant et en séparant les concepts impliqués dans la gestion d'un state et en appliquant certaines règles, on donne aussi une structure et une maintenabilité à notre code.
51
+
De plus, en définissant et en séparant les concepts impliqués dans la gestion de l'état global et en appliquant certaines règles, on donne aussi une structure et une maintenabilité à notre code.
52
52
53
-
Voilà l'idée de base derrière Vuex, inspiré par [Flux](https://facebook.github.io/flux/docs/overview.html), [Redux](http://redux.js.org/) et [l'Architecture Elm](https://guide.elm-lang.org/architecture/). À l'inverse des autres patterns, Vuex est aussi une bibliothèque d'implémentation conçue spécialement pour Vue.js afin de bénéficier de son système de réactivité granulaire pour des modifications efficaces.
53
+
Voilà l'idée de base derrière Vuex, inspiré par [Flux](https://facebook.github.io/flux/docs/overview.html), [Redux](http://redux.js.org/) et [l'architecture Elm](https://guide.elm-lang.org/architecture/). À l'inverse des autres modèles, Vuex est aussi une bibliothèque d'implémentation conçue spécialement pour Vue.js afin de bénéficier de son système de réactivité granulaire pour des modifications efficaces.
54
54
55
55
56
56
57
57
### Quand l'utiliser ?
58
58
59
-
Bien que Vuex nous aide à gérer une state partagé, il apporte aussi le coût de nouveaux concepts et _boilerplate_. C'est un compromis entre la productivité à court terme et à long terme.
59
+
Bien que Vuex nous aide à gérer un état global partagé, il apporte aussi le coût de nouveaux concepts et _cas d'utilisation pré-conçu_. C'est un compromis entre la productivité à court terme et à long terme.
60
60
61
-
Si vous n'avez jamais créé une _Single Page Application_à grande échelle et que vous sautez directement dans Vuex, cela peut paraître verbeux et intimidant. C'est parfaitement normal — si votre application est simple, vous vous en sortirez sans doute très bien sans Vuex. Un simple [bus d'event global](http://vuejs.org/guide/components.html#Non-Parent-Child-Communication) pourrait très bien vous suffire. Mais si vous devez créer une SPA à moyenne ou grande échelle, il y a des chances que vous vous trouviez dans des situations qui vous feront penser à une meilleure façon de gérer le state en-dehors de votre composant Vue, et Vuex sera naturellement la prochaine étape pour vous. Voici une bonne citation de Dan Abramov, l'auteur de Redux :
61
+
Si vous n'avez jamais créé une _application monopage_à grande échelle et que vous sautez directement dans Vuex, cela peut paraître verbeux et intimidant. C'est parfaitement normal ; si votre application est simple, vous vous en sortirez sans doute très bien sans Vuex. Un simple [bus d'évènement global](https://fr.vuejs.org/v2/guide/components.html#Communication-non-parent-enfant) pourrait très bien vous suffire. Mais si vous devez créer une application monopage à moyenne ou grande échelle, il y a des chances que vous vous trouviez dans des situations qui vous feront vous interroger sur une meilleure gestion de l'état global, détaché de votre composant Vue, et Vuex sera naturellement la prochaine étape pour vous. Voici une bonne citation de Dan Abramov, l'auteur de Redux :
62
62
63
-
> Flux libraries are like glasses: you’ll know when you need them.
64
-
>
65
-
> _Les librairies Flux, c'est comme les lunettes : vous saurez quand vous en aurez besoin._
63
+
> « Les librairies Flux, c'est comme les lunettes : vous saurez quand vous en aurez besoin. »
0 commit comments