-
-
Notifications
You must be signed in to change notification settings - Fork 9.6k
[Translation WIP] Official French Translation from Vuejs-FR #787
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 3 commits
2760a53
f506497
bc901f4
42ed911
59a355b
1c7d8fe
e142ad3
adeb362
065b339
ef2b6df
3139afc
36f8d63
b693198
7c35cd4
a129a55
6b6e41f
678edd3
714409a
8ceff1e
c839f84
5124dc7
c80c83b
b998fca
3a5a270
ef3609f
9ce9f2b
6e43e28
4850dda
fb8f0c4
4ba4208
6ed64c7
55cb40a
92f578b
7222212
6fec9e4
30816d5
dff200a
fefc19e
73c8d0f
c11e884
5283090
900e65f
f37b667
a943210
0f73e76
102eb49
7a15c65
91b50b4
2ad1901
e17989a
11e1e29
131acb2
65f8e11
f8d117f
4230cf5
261e918
365a982
47f5ef0
ccdc719
6bc5043
3e5bec2
0f0b968
ae44a29
26aef80
8902f83
737b013
3afd7a8
dda4b44
4e0828c
a8bfa60
d72d70c
fcd43b6
020c644
8120f79
540d633
d74d646
6f2e805
a30286e
a07b01f
4dc4b9d
1f4b52b
dddd4c3
b120a02
9c9dbd8
7a49e01
cfa1fac
aa5bf46
315d454
d244645
684de06
15d78d8
82111eb
d00c872
e132a58
81afea1
c7d2caf
7638407
e8ead88
3275349
2ec05fd
3ca4122
d2a9cb0
236e54f
22b85dd
d53f837
44bcc98
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,19 +1,19 @@ | ||
# Débuter | ||
# Pour commencer | ||
|
||
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 : | ||
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 : | ||
|
||
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. | ||
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é. | ||
|
||
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. | ||
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. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. idem pour acter There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Petit exemple : nous croisons le mot « commit » faisant référence au commit de Github. Je regarde donc dans la documentation française par quoi cela est traduit. Les traducteurs ont pris le parti de conserver le terme « commit ». Nous utiliserons donc le mot « commit ». Nous croisons maintenant le mot commit pour Vuex. Se terme n'existe pas encore en français puisque nous sommes entrain de créer la version française. Nous décidons d'utiliser le verbe « acter », ce terme sera usuel pour « commit » dans la littérature française de Vue. Dois t-on pour autant en préciser le terme original à chaque fois ? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. l'intérêt de mettre state et commit entre parenthèse est pour faire le lien avec les vrai propriétés et qui sont dans les examples |
||
|
||
### Le store le plus simple | ||
|
||
> **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/) ! | ||
|
||
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 : | ||
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 : | ||
|
||
``` js | ||
// Make sure to call Vue.use(Vuex) first if using a module system | ||
// Assurez vous d'appeler `Vuex.use(Vuex)` en premier lieu si vous utilisez un système de module | ||
|
||
const store = new Vuex.Store({ | ||
state: { | ||
|
@@ -27,18 +27,18 @@ const store = new Vuex.Store({ | |
}) | ||
``` | ||
|
||
Maintenant, vous pouvez accéder à l'objet state avec `store.state`, et déclencher un changement de state avec la méthode `store.commit` : | ||
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` : | ||
|
||
``` js | ||
store.commit('increment') | ||
|
||
console.log(store.state.count) // -> 1 | ||
``` | ||
|
||
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. | ||
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. | ||
|
||
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. | ||
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. | ||
|
||
Voici un exemple de la [plus basique app Vuex de compteur](https://jsfiddle.net/n9jmu5v7/341/). | ||
Voici un exemple de l'[application de comptage Vuex la plus basique](https://jsfiddle.net/n9jmu5v7/341/). | ||
|
||
Ensuite, nous allons examiner chaque concept de base plus en détails, et commençons avec le [State](state.md). | ||
Ensuite, nous allons examiner chaque concept de base plus en détails, et commençons avec l'[État](state.md). |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,20 +1,20 @@ | ||
# Qu'est-ce que Vuex ? | ||
# Vuex, qu'est-ce que c'est ? | ||
|
||
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. | ||
Vuex est un **_gestionnaire d'état (« state management pattern »)_ et une bibliothèque** 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. | ||
|
||
### Qu'est-ce qu'un "State Management Pattern"? | ||
### Un « gestionnaire d'état », qu'est-ce que c'est ? | ||
|
||
Commençons avec une simple application Vue de compteur : | ||
Commençons par une simple application de comptage avec Vue : | ||
|
||
``` js | ||
new Vue({ | ||
// state | ||
// état | ||
data () { | ||
return { | ||
count: 0 | ||
} | ||
}, | ||
// view | ||
// vue | ||
template: ` | ||
<div>{{ count }}</div> | ||
`, | ||
|
@@ -27,39 +27,37 @@ new Vue({ | |
}) | ||
``` | ||
|
||
C'est une app auto-contenue avec les parties suivantes : | ||
C'est une application auto-suffisante avec les parties suivantes : | ||
|
||
- L'**État** (_state_), qui est la source de vérité qui dirige notre app; | ||
- La **Vue** (_view_), qui est juste un mapping déclaratif du **state**; | ||
- Les **actions**, qui sont les façons possibles pour le state de changer en réaction aux actions de l'utilisateur depuis la **vue**. | ||
- L'**état**, qui est la source de vérité qui pilotant votre application, | ||
- La **vue**, qui est une réflexion déclarative de l'**état**, | ||
- Les **actions**, qui sont les façons possibles pour l'état de changer en réaction aux actions utilisateurs depuis la **vue**. | ||
|
||
Voici une représentation extrèmement simple du concept de "one-way data flow" (_flux de données unidirectionnel_) : | ||
Voici une représentation extrèmement simple du concept de « flux de donnée unidirectionnel » : | ||
|
||
<p style="text-align: center; margin: 2em"> | ||
<img style="max-width:450px;" src="./images/flow.png"> | ||
</p> | ||
|
||
Cependant, la simplicité s'évapore rapidement lorsque nous avons **de multiples composants qui partagent le même state** : | ||
Cependant, la simplicité s'évapore rapidement lorsque nous avons **de multiples composants qui partagent un même état global** : | ||
|
||
- Plusieurs vues peuvent dépendre de la même partie du state. | ||
- Des actions dans différentes vues peuvent avoir besoin de muter la même partie du state. | ||
- Plusieurs vues peuvent dépendre de la même partie de l'état global. | ||
- Des actions dans différentes vues peuvent avoir besoin de muter la même partie de l'état global. | ||
|
||
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. | ||
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. | ||
|
||
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 ! | ||
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'importe quel composant peut accéder à l'état global ou déclencher des actions, peu importe où il se trouve dans l'arbre ! | ||
|
||
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. | ||
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. | ||
|
||
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. | ||
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. | ||
|
||
 | ||
|
||
### Quand l'utiliser ? | ||
|
||
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. | ||
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. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. boilerplate entre parantheses me semble une bonne idee vu le mot traduit 😄 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Là nous sommes dans le cas suivant : « Si le terme traduit ne reflète pas assez ce qu'il signifiait en anglais, nous ajoutons la version originale entre parenthèse après pour lever l’ambiguïté. » Aussi cela peut-être intéressant de préciser (« boilerplate ») même si fondamentalement je ne suis pas sur que ça ajoute « du sens » à la phrase. Tu n'aurais pas une meilleure alternative pour « boilerplate » dans ce contexte @posva ? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Je n'ai pas d'autre mot, mais c'est la première fois que je vois cas d'utilisation pré-conçu et personne dans mon entourage connaît ce mot ou préfère largement le mot Boilerplate qui parle à tout le monde There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Tu as l'air de t'en amuser :) Je t'assure que « boilerplate » ne voulait rien dire pour moi petit français quand je l'ai croisé dans la documentation. Peut-être « abstraction de code » ? C'est bien ce que ça veut dire non ? On abstrait du code dans un « package » tout prêt pour nous éviter d'avoir à comprendre ce qu'il y a dedans ? Proposition :
Le truc avec les cadors en anglais c'est que pour eux tout devrait être anglais. Je ne traduis pas la documentation de Vue pour faire plaisir aux anglophones. Cependant si la prochaine fois qu'un français croise le mot « boilerplate » il peut se dire « ah ouais c'est une abstraction de code » j'avais vu ça entre parenthèse sur Vue, je serais content :) Idem donc pour tes propositions de |
||
|
||
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 : | ||
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 : | ||
|
||
> Flux libraries are like glasses: you’ll know when you need them. | ||
> | ||
> _Les librairies Flux, c'est comme les lunettes : vous saurez quand vous en aurez besoin._ | ||
> « Les librairies Flux, c'est comme les lunettes : vous saurez quand vous en aurez besoin. » |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
autant rajouter aussi
state
entre parenthesesUh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Merci Posva pour tes retours !
Nous traquons l'état des traductions des termes ici : vuejs-fr/v2.vuejs.org#4
Nous avons ajouté « store » entre parenthèse car nous ne réutilisons pas le terme zone de stockage pour chaque itération de store faute de traduction plus probante, et nous avons le sentiment que « zone de stockage » ne porte pas tout le sens du mot « store ».
En ce qui concerne les termes « État », « État local », « État global » nous envisageons dans faire les termes usuels.
De la même manière que (par exemple) le moyen de connaître la version anglaise du terme opérateur de décomposition est d'aller sur la version anglaise Spread Operator nous ne souhaitons pas accoler le terme original pour chaque terme traduit sauf si nous envisageons plus loin dans la documentation de le réutiliser.
À mon sens, s'il y a quelque chose à mettre en place pour faciliter la mise en relation des termes traduit/originaux ; c'est de pouvoir permuter de version de langue depuis la page courante pour connaître les termes usuels d'un concept dans chaque langue plutôt que de forcer, pour chaque première occurrence de chaque page, la répétition original d'un concept traduit.
Aussi sachant cela,
Un bon argument en faveur de laisser le terme original entre parenthèse est qu'il permet de faire le lien avec la syntaxe des exemples de code, certe, mais l’exercice de traduction est également d'assumer ses choix de traduction comme MDN le fait très bien. Nous sommes donc en grande discussion pour savoir s'il faut traduire ou non les noms de variable : vuejs-fr/v2.vuejs.org#54
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
C'est suffisant de le faire une fois, c'est attendu que les personnes commencent par getting started 😄
Ne traduisez par les nom de variables dans les exemples si c'est ça ce que tu veux dire