Skip to content

Traduction de state-management.md #72

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

Merged
merged 2 commits into from
Jul 13, 2017
Merged

Traduction de state-management.md #72

merged 2 commits into from
Jul 13, 2017

Conversation

MachinisteWeb
Copy link
Member

Une nouvelle traduction pour la doc principale.

Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com>
@MachinisteWeb MachinisteWeb self-assigned this Jun 28, 2017
@MachinisteWeb MachinisteWeb changed the title Traduction de State management Traduction de state-management.md Jun 28, 2017
Copy link
Member

@sylvainpolletvillard sylvainpolletvillard left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1ère relecture

@@ -1,20 +1,20 @@
---
title: State Management (En)
title: Gestion des états

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gestion de l'état

type: guide
order: 22
---

## Official Flux-Like Implementation
## Implémentation officielle à la Flux

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

un peu bizarre à la première lecture... que penses-tu de "façon Flux" ou "semblable à Flux" ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tu as raison. Je prends semblable :) merci.


<p class="tip">**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**</p><p>Large applications can often grow in complexity, due to multiple pieces of state scattered across many components and the interactions between them. To solve this problem, Vue offers [vuex](https://github.com/vuejs/vuex): our own Elm-inspired state management library. It even integrates into [vue-devtools](https://github.com/vuejs/vue-devtools), providing zero-setup access to time travel.</p>
Les grosses applications peuvent souvent augmenter en complexité du fait des multiples parties d'états disséminés à travers divers composants et les interactions entre eux. Pour résoudre ce problème, Vue offre [Vuex](https://github.com/vuejs/vuex) : sa propre bibliothèque de gestion d'état inpiré par Elm. Il est même intégré à [vue-devtools](https://github.com/vuejs/vue-devtools), fournissant une possibilité de voir l'état dans le temps sans aucune configuration préalable.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

parties d'état disséminées

vuex
(respecter la casse du texte d'origine pour les noms propres, valable pour tout le fichier)

notre propre bibliothèque

, permettant le voyage dans le temps sans aucune configuration préalable.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ils utilisent une majuscule dans la documentation officielle quand ils parlent de Vuex. Mais là, il parle du dépôt vuex (comme il y a le lien dessus) comme il parlerait de Vue Router en tant que vue-router. Donc je laisse la minuscule.

Je vais faire attention aux autres cas de figures dans le fichier


If you're coming from React, you may be wondering how vuex compares to [redux](https://github.com/reactjs/redux), the most popular Flux implementation in that ecosystem. Redux is actually view-layer agnostic, so it can easily be used with Vue via some [simple bindings](https://github.com/egoist/revue). Vuex is different in that it _knows_ it's in a Vue app. This allows it to better integrate with Vue, offering a more intuitive API and improved development experience.
Si vous venez de React, vous vous demanderez probablement quels sont les points de comparaisons entre Vuex et [Redux](https://github.com/reactjs/redux) (l'implémentation de Flux la plus populaire dans cet écosystème). Redux est actuellement une couche de vue agnostique, il peut donc être facilement utilisé avec Vue à l'aide de plusieurs [liaisons simples](https://github.com/egoist/revue). Vuex est différent dans le sens où il _sait_ ce qu'il y a dans une application Vue. Cela lui permet d'être mieux intégré à Vue, offrant une API plus intuitive et une meilleure expérience de développement.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

vous pouvez vous demander comment vuex se compare à redux

Refux est en fait agnostique de la couche vue, et peut donc être

il sait qu'il est dans une application Vue.

Cela lui permet de mieux s'intégrer avec Vue


It is often overlooked that the source of truth in Vue applications is the raw `data` object - a Vue instance simply proxies access to it. Therefore, if you have a piece of state that should be shared by multiple instances, you can simply share it by identity:
Nous n'avons pas assez insisté sur le fait que, dans des applications Vue, c'est l'objet `data` qui fait office de « source de vérité ». Une instance de Vue ne fait que proxifier l'accès à cet objet. Par conséquent, si vous avez une partie d'état qui doit être partagée par plusieurs instances, vous pouvez simplement la partager par référence :

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On n'insiste souvent pas assez

this.state.message = ''
}
}
```

Notice all actions that mutate the store's state are put inside the store itself. This type of centralized state management makes it easier to understand what type of mutations could happen and how are they triggered. Now when something goes wrong, we'll also have a log of what happened leading up to the bug.
Notez que toutes les actions qui changent l'état du store sont mises à l'intérieur du store lui-même. Ce type de gestion d'état centralisé permet de comprendre plus facilement quelles types de mutations sont faites et comment elles sont déclenchées. Maintenant, quand quelque chose se passera mal, nous auront des logs sur ce qui a conduit à ce bogue.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

quel type de mutations peuvent survenir

quand quelque-chose tourne mal

nous aurons également un log de ce qui a conduit


In addition, each instance/component can still own and manage its own private state:
De plus, chaque instance/composant peut gérer lui-même sont propre état privé :

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

son

@@ -69,10 +69,10 @@ var vmB = new Vue({
})
```

![State Management](/images/state.png)
![Gestion des états](/images/state.png)

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

de l'état


<p class="tip">It's important to note that you should never replace the original state object in your actions - the components and the store need to share reference to the same object in order for mutations to be observed.</p>
<p class="tip">Il est important de noter que vous ne devriez jamais remplacer l'objet d'état original dans vos actions. Les composants et le store ont besoin de partager une référence sur le même objet pour que les mutations puissent être observées.</p>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

référence au même objet


As we continue developing the convention where components are never allowed to directly mutate state that belongs to a store, but should instead dispatch events that notify the store to perform actions, we eventually arrive at the [Flux](https://facebook.github.io/flux/) architecture. The benefit of this convention is we can record all state mutations happening to the store and implement advanced debugging helpers such as mutation logs, snapshots, and history re-rolls / time travel.
En élargissant notre convention au fait qu'il ne serait jamais permis à un composant de directement muter un état qui appartient au store, mais que l'on devrait à la place propager des évènements pour notifier le store qu'une action a été entreprise ; nous arriverions éventuellement à une architecture [Flux](https://facebook.github.io/flux/). Le bénéfice de cette convention est que nous pouvons enregistrer toutes les mutations de l'état qui apparaissent dans le store et implémenter des fonctions utilitaires avancées de débogage comme des logs de mutations, des instantanés, des rejouabilités d'historique ou de l'observation dans le temps.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alors que nous continuons à développer la convention selon laquelle il n'est jamais permis

mais devrait à la place

qui notifient le store afin d'effectuer des actions

, nous arriverons

mutations d'état survenant sur le store

telles que des logs

clichés instantanés
(ou garder "snapshot" qui je pense est plus répandu parmi les devs francophones)

et la rejouabilité / le voyage dans le temps sur l'historique des actions.

Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com>
@MachinisteWeb
Copy link
Member Author

Seconde relecture bienvenue et bon pour un merge !

@MachinisteWeb
Copy link
Member Author

@Kocal ? @forresst ? Un peu de temps pour cette dernière page du guide ?

@Kocal
Copy link
Member

Kocal commented Jul 11, 2017

Je vais commencer une review.
(J'ai été assez occupé dernièrement avec le taf + des projets persos)

Kocal
Kocal previously requested changes Jul 11, 2017
Copy link
Member

@Kocal Kocal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bon, ça se voit que beaucoup de monde est passé avant, j'ai juste trouvé une petite erreur, mais qui ne nécessite probablement pas de correction. ^^


If you're coming from React, you may be wondering how vuex compares to [redux](https://github.com/reactjs/redux), the most popular Flux implementation in that ecosystem. Redux is actually view-layer agnostic, so it can easily be used with Vue via some [simple bindings](https://github.com/egoist/revue). Vuex is different in that it _knows_ it's in a Vue app. This allows it to better integrate with Vue, offering a more intuitive API and improved development experience.
Si vous venez de React, vous pouvez vous demander comment Vuex se compare à [Redux](https://github.com/reactjs/redux) (l'implémentation de Flux la plus populaire dans cet écosystème). Redux est en fait agnostique de la couche vue, et peut donc être facilement utilisé avec Vue à l'aide de plusieurs [liaisons simples](https://github.com/egoist/revue). Vuex est différent dans le sens où il _sait_ qu'il est dans une application Vue. Cela lui permet de mieux s'intégrer avec Vue, offrant une API plus intuitive et une meilleure expérience de développement.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

la couche Vue

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

non c'est bien la couche vue en minuscules (view layer)

@Kocal
Copy link
Member

Kocal commented Jul 11, 2017

Erf, j'ai dismiss ma review mais ça n'a pas vraiment fait ce que je voulais (+ je peux pas éditer mon message précédent...)

@sylvainpolletvillard
Copy link
Member

Github garde tout l'historique par défaut, mais c'est bien ce qu'il fallait faire, t'inquiète ;)

@MachinisteWeb
Copy link
Member Author

Je merge. Comme d'hab. Rien n'est figé dans le marbre. Petite PR et hop.

@MachinisteWeb MachinisteWeb merged commit 0baacfe into vuejs-fr:master Jul 13, 2017
@MachinisteWeb MachinisteWeb deleted the state-management branch July 13, 2017 06:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants