From c839f8477ab3c07dbf651600feb1e8db29903d08 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Thu, 18 May 2017 17:36:39 +0200 Subject: [PATCH 1/2] Update website Signed-off-by: Bruno Lesieur --- docs/en/SUMMARY.md | 20 ++++++++++---------- docs/en/state.md | 46 +++++++++++++++++++++++----------------------- 2 files changed, 33 insertions(+), 33 deletions(-) diff --git a/docs/en/SUMMARY.md b/docs/en/SUMMARY.md index a55a22376..90aa682bd 100644 --- a/docs/en/SUMMARY.md +++ b/docs/en/SUMMARY.md @@ -1,24 +1,24 @@ # Vuex -> Note: This is docs for vuex@2.x. +> Note : Ceci est la documentation pour vuex@2.x. -- [Looking for 1.0 Docs?](https://github.com/vuejs/vuex/tree/1.0/docs) +- [Vous cherchez la documentation de la v1.0 ?](https://github.com/vuejs/vuex/tree/1.0/docs) - [Release Notes](https://github.com/vuejs/vuex/releases) - [Installation](installation.md) -- [What is Vuex?](intro.md) -- [Getting Started](getting-started.md) -- Core Concepts - - [State](state.md) +- [Vuex, qu'est-ce que c'est ?](intro.md) +- [Pour commencer](getting-started.md) +- Concepts de base + - [État](state.md) - [Getters](getters.md) - [Mutations](mutations.md) - [Actions](actions.md) - [Modules](modules.md) -- [Application Structure](structure.md) +- [Structure d'une application](structure.md) - [Plugins](plugins.md) - [Strict Mode](strict.md) -- [Form Handling](forms.md) -- [Testing](testing.md) +- [Formulaires](forms.md) +- [Tests](testing.md) - [Hot Reloading](hot-reload.md) -- [API Reference](api.md) +- [Documentation API](api.md) diff --git a/docs/en/state.md b/docs/en/state.md index cc7b29fb6..b470ede1a 100644 --- a/docs/en/state.md +++ b/docs/en/state.md @@ -2,16 +2,16 @@ ### Single State Tree -Vuex uses a **single state tree** - that is, this single object contains all your application level state and serves as the "single source of truth". This also means usually you will have only one store for each application. A single state tree makes it straightforward to locate a specific piece of state, and allows us to easily take snapshots of the current app state for debugging purposes. +Vuex utilise un **single state tree** — cet unique objet contient tout le state au niveau applicatif et sert de "source unique de vérité". Cela signifie également que vous n'aurez qu'un seul store pour chaque application. Un _single state tree_ rend rapide la localisation d'une partie de state spécifique, et nous permet de facilement prendre des instantanés du state actuel de l'application à des fins de debugging. -The single state tree does not conflict with modularity - in later chapters we will discuss how to split your state and mutations into sub modules. +Le _single state tree_ n'entre pas en conflit avec la modularité — dans les prochains chapitres, nous examinerons comment séparer votre state et vos mutations dans des sous-modules. -### Getting Vuex State into Vue Components +### Récupérer le state Vuex dans des composants Vue -So how do we display state inside the store in our Vue components? Since Vuex stores are reactive, the simplest way to "retrieve" state from it is simply returning some store state from within a [computed property](http://vuejs.org/guide/computed.html): +Alors, comment affichons-nous le state du store dans nos composants Vue ? Puisque les stores Vuex sont réactifs, la façon la plus simple d'y "récupérer" le state est de simplement retourner une partie du state depuis une [computed property](http://vuejs.org/guide/computed.html) : ``` js -// let's create a Counter component +// créons un composant Counter const Counter = { template: `
{{ count }}
`, computed: { @@ -22,17 +22,17 @@ const Counter = { } ``` -Whenever `store.state.count` changes, it will cause the computed property to re-evaluate, and trigger associated DOM updates. +Lorsque `store.state.count` change, cela entraînera la ré-évaluation de la computed property, et déclenchera les actions DOM associées. -However, this pattern causes the component to rely on the global store singleton. When using a module system, it requires importing the store in every component that uses store state, and also requires mocking when testing the component. +Cependant, ce pattern oblige le composant à compter sur le singleton global du store. Lorsqu'on utilise un système de module, il est nécessaire d'importer le store dans tous les composants qui utilisent le state du store, et il est également nécessaire de créer un mock lorsque l'on teste le composant. -Vuex provides a mechanism to "inject" the store into all child components from the root component with the `store` option (enabled by `Vue.use(Vuex)`): +Vuex fournit un méchanisme pour "injecter" le store dans tous les composants enfants du composant racine avec l'option `store` (activée par `Vue.use(Vuex)`) : ``` js const app = new Vue({ el: '#app', - // provide the store using the "store" option. - // this will inject the store instance to all child components. + // fournit le store avec l'option "store". + // cela injectera l'instance du store dans tous les composants enfants. store, components: { Counter }, template: ` @@ -43,7 +43,7 @@ const app = new Vue({ }) ``` -By providing the `store` option to the root instance, the store will be injected into all child components of the root and will be available on them as `this.$store`. Let's update our `Counter` implementation: +En fournissant l'option `store` à l'instance racine, le store sera injecté dans tous les composants enfants de la racine et sera disponible sur ceux-ci avec `this.$store`. Mettons à jours notre implémentation de `Counter` : ``` js const Counter = { @@ -56,24 +56,24 @@ const Counter = { } ``` -### The `mapState` Helper +### Le helper `mapState` -When a component needs to make use of multiple store state properties or getters, declaring all these computed properties can get repetitive and verbose. To deal with this we can make use of the `mapState` helper which generates computed getter functions for us to help us save some keystrokes: +Lorsqu'un composant a besoin d'utiliser plusieurs propriétés ou getters du state du store, déclarer toutes ces computed properties peut devenir répétitif et verbeux. Afin de palier à ça, nous pouvons utiliser le helper `mapState` qui génère des fonctions getters pour nous et nous épargne quelques coups de clavier : ``` js -// in full builds helpers are exposed as Vuex.mapState +// dans la version standalone, les helpers sont exposés comme Vuex.mapState import { mapState } from 'vuex' export default { // ... computed: mapState({ - // arrow functions can make the code very succinct! + // les fonctions fléchées peuvent rendre le code très succinct ! count: state => state.count, - // passing the string value 'count' is same as `state => state.count` + // passer la valeur littérale 'count' revient à écrire `state => state.count` countAlias: 'count', - // to access local state with `this`, a normal function must be used + // pour accéder au state local avec `this`, une fonction normale doit être utilisée countPlusLocalState (state) { return state.count + this.localCount } @@ -81,29 +81,29 @@ export default { } ``` -We can also pass a string array to `mapState` when the name of a mapped computed property is same as a state sub tree name. +Il est également possible de fournir un tableau de chaînes de caractères à `mapState` lorsque le nom de la propriété du state du store est la même que celui du composant. ``` js computed: mapState([ - // map this.count to store.state.count + // attacher this.count à store.state.count 'count' ]) ``` ### Object Spread Operator -Note that `mapState` returns an object. How do we use it in combination with other local computed properties? Normally, we'd have to use a utility to merge multiple objects into one so that we can pass the final object to `computed`. However with the [object spread operator](https://github.com/sebmarkbage/ecmascript-rest-spread) (which is a stage-3 ECMAScript proposal), we can greatly simplify the syntax: +Notez que `mapState` renvoie un objet. Comment l'utiliser en complément des autres computed properties locales ? Normalement, il faudrait utiliser un outil pour fusionner les multiples objets en un seul afin de passer cet objet final à `computed`. Cependant avec le [object spread operator](https://github.com/sebmarkbage/ecmascript-rest-spread) (qui est une proposition stage-3 ECMASCript), nous pouvons grandement simplifier la syntaxe : ``` js computed: { localComputed () { /* ... */ }, - // mix this into the outer object with the object spread operator + // rajouter cet objet dans l'objet `computed` avec l'object spread operator ...mapState({ // ... }) } ``` -### Components Can Still Have Local State +### Les composants peuvent toujours avoir un state local -Using Vuex doesn't mean you should put **all** the state in Vuex. Although putting more state into Vuex makes your state mutations more explicit and debuggable, sometimes it could also make the code more verbose and indirect. If a piece of state strictly belongs to a single component, it could be just fine leaving it as local state. You should weigh the trade-offs and make decisions that fit the development needs of your app. +Utiliser Vuex ne signifie pas que vous devez mettre **tout** votre state dans Vuex. Bien que le fait de mettre plus de state dans Vuex rende vos mutations de state plus explicites et plus debuggables, parfois il peut aussi rendre le code plus verbeux et indirect. Si une partie de state appartient directement à un seul composant, il est parfaitement sain de la laisser dans le state local. Assurez vous de prendre en compte les avantages et inconvénients d'une telle décision afin de vous adaptez le mieux aux besoins de votre application. From 5124dc79f2b67dac9dc3029d948cd12bd2aaf035 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Fri, 19 May 2017 18:01:18 +0200 Subject: [PATCH 2/2] Update state.md with haeresis and kocal review Signed-off-by: Bruno Lesieur --- docs/en/state.md | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/docs/en/state.md b/docs/en/state.md index b470ede1a..277010270 100644 --- a/docs/en/state.md +++ b/docs/en/state.md @@ -1,14 +1,14 @@ # State -### Single State Tree +### Arbre d'état unique -Vuex utilise un **single state tree** — cet unique objet contient tout le state au niveau applicatif et sert de "source unique de vérité". Cela signifie également que vous n'aurez qu'un seul store pour chaque application. Un _single state tree_ rend rapide la localisation d'une partie de state spécifique, et nous permet de facilement prendre des instantanés du state actuel de l'application à des fins de debugging. +Vuex utilise un **arbre d'état unique**, c'est-à-dire que cet unique objet contient tout l'état au niveau applicatif et sert de « source de vérité unique ». Cela signifie également que vous n'aurez qu'un seul store pour chaque application. Un arbre d'état unique rend rapide la localisation d'une partie spécifique de l'état et permet de facilement prendre des instantanés de l'état actuel de l'application à des fins de débogage. -Le _single state tree_ n'entre pas en conflit avec la modularité — dans les prochains chapitres, nous examinerons comment séparer votre state et vos mutations dans des sous-modules. +L'arbre d'état unique n'entre pas en conflit avec la modularité. Dans les prochains chapitres, nous examinerons comment séparer votre état et vos mutations dans des sous-modules. -### Récupérer le state Vuex dans des composants Vue +### Récupération d'état Vuex dans des composants Vue -Alors, comment affichons-nous le state du store dans nos composants Vue ? Puisque les stores Vuex sont réactifs, la façon la plus simple d'y "récupérer" le state est de simplement retourner une partie du state depuis une [computed property](http://vuejs.org/guide/computed.html) : +Alors, comment affichons-nous l'état du store dans nos composants Vue ? Puisque les stores Vuex sont réactifs, la façon la plus simple d'y « récupérer » l'état est tout simplement de retourner une partie de l'état depuis une [une propriété calculée](http://fr.vuejs.org/guide/computed.html) : ``` js // créons un composant Counter @@ -22,16 +22,16 @@ const Counter = { } ``` -Lorsque `store.state.count` change, cela entraînera la ré-évaluation de la computed property, et déclenchera les actions DOM associées. +Lorsque `store.state.count` change, cela entraînera la ré-évaluation de la propriété calculée, et déclenchera les actions associées au DOM. -Cependant, ce pattern oblige le composant à compter sur le singleton global du store. Lorsqu'on utilise un système de module, il est nécessaire d'importer le store dans tous les composants qui utilisent le state du store, et il est également nécessaire de créer un mock lorsque l'on teste le composant. +Cependant, ce modèle oblige le composant à compter sur le singleton global du store. Lorsqu'on utilise un système de module, il est nécessaire d'importer le store dans tous les composants qui utilisent l'état du store, et il est également nécessaire de créer un jeu de test lorsque l'on teste le composant. -Vuex fournit un méchanisme pour "injecter" le store dans tous les composants enfants du composant racine avec l'option `store` (activée par `Vue.use(Vuex)`) : +Vuex fournit un méchanisme pour « injecter » le store dans tous les composants enfants du composant racine avec l'option `store` (activée par `Vue.use(Vuex)`) : ``` js const app = new Vue({ el: '#app', - // fournit le store avec l'option "store". + // fournit le store avec l'option `store`. // cela injectera l'instance du store dans tous les composants enfants. store, components: { Counter }, @@ -43,7 +43,7 @@ const app = new Vue({ }) ``` -En fournissant l'option `store` à l'instance racine, le store sera injecté dans tous les composants enfants de la racine et sera disponible sur ceux-ci avec `this.$store`. Mettons à jours notre implémentation de `Counter` : +En fournissant l'option `store` à l'instance racine, le store sera injecté dans tous les composants enfants de la racine et sera disponible dans ces derniers avec `this.$store`. Mettons à jour notre implémentation de `Counter` : ``` js const Counter = { @@ -56,12 +56,12 @@ const Counter = { } ``` -### Le helper `mapState` +### La fonction utilitaire `mapState` -Lorsqu'un composant a besoin d'utiliser plusieurs propriétés ou getters du state du store, déclarer toutes ces computed properties peut devenir répétitif et verbeux. Afin de palier à ça, nous pouvons utiliser le helper `mapState` qui génère des fonctions getters pour nous et nous épargne quelques coups de clavier : +Lorsqu'un composant a besoin d'utiliser plusieurs accesseurs ou propriétés de l'état du store, déclarer toutes ces propriétés calculées peut devenir répétitif et verbeux. Afin de palier à ça, nous pouvons utiliser la fonction utilitaire `mapState` qui génère des fonctions d'accession pour nous et nous épargne quelques coups de clavier : ``` js -// dans la version standalone, les helpers sont exposés comme Vuex.mapState +// dans la version complète, des fonctions utilitaires sont exposées tel que `Vuex.mapState` import { mapState } from 'vuex' export default { @@ -73,7 +73,7 @@ export default { // passer la valeur littérale 'count' revient à écrire `state => state.count` countAlias: 'count', - // pour accéder au state local avec `this`, une fonction normale doit être utilisée + // pour accéder à l'état local avec `this`, une fonction normale doit être utilisée countPlusLocalState (state) { return state.count + this.localCount } @@ -81,29 +81,29 @@ export default { } ``` -Il est également possible de fournir un tableau de chaînes de caractères à `mapState` lorsque le nom de la propriété du state du store est la même que celui du composant. +Il est également possible de fournir un tableau de chaînes de caractères à `mapState` lorsque le nom de la propriété de l'état du store est la même que celui du composant. ``` js computed: mapState([ - // attacher this.count à store.state.count + // attacher `this.count` à `store.state.count` 'count' ]) ``` -### Object Spread Operator +### Opérateur de décomposition -Notez que `mapState` renvoie un objet. Comment l'utiliser en complément des autres computed properties locales ? Normalement, il faudrait utiliser un outil pour fusionner les multiples objets en un seul afin de passer cet objet final à `computed`. Cependant avec le [object spread operator](https://github.com/sebmarkbage/ecmascript-rest-spread) (qui est une proposition stage-3 ECMASCript), nous pouvons grandement simplifier la syntaxe : +Notez que `mapState` renvoie un objet. Comment l'utiliser en complément des autres propriétés calculées locales ? Normalement, il faudrait utiliser un outil pour fusionner les multiples objets en un seul afin de passer cet objet final à `computed`. Cependant avec l'[opérateur de décomposition](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition) (qui est une proposition stage-3 ECMASCript), nous pouvons grandement simplifier la syntaxe : ``` js computed: { localComputed () { /* ... */ }, - // rajouter cet objet dans l'objet `computed` avec l'object spread operator + // rajouter cet objet dans l'objet `computed` avec l'opérateur de décomposition ...mapState({ // ... }) } ``` -### Les composants peuvent toujours avoir un state local +### Les composants peuvent toujours avoir un état local -Utiliser Vuex ne signifie pas que vous devez mettre **tout** votre state dans Vuex. Bien que le fait de mettre plus de state dans Vuex rende vos mutations de state plus explicites et plus debuggables, parfois il peut aussi rendre le code plus verbeux et indirect. Si une partie de state appartient directement à un seul composant, il est parfaitement sain de la laisser dans le state local. Assurez vous de prendre en compte les avantages et inconvénients d'une telle décision afin de vous adaptez le mieux aux besoins de votre application. +Utiliser Vuex ne signifie pas que vous devez mettre **tout** votre état dans Vuex. Bien que le fait de mettre plus d'état dans Vuex rende vos mutation d'état plus explicites et plus débogable, parfois il peut aussi rendre le code plus verbeux et indirect. Si une partie de l'état appartient directement à un seul composant, il est parfaitement sain de la laisser dans l'état local. Assurez vous de prendre en compte les avantages et inconvénients d'une telle décision afin de vous adapter au mieux aux besoins de votre application.