From 4ba4208169af935c85199f4cb3ff63dba778ab4b Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sat, 20 May 2017 10:03:55 +0200 Subject: [PATCH 1/7] Start getters.md review Signed-off-by: Bruno Lesieur --- docs/en/SUMMARY.md | 2 +- docs/en/getters.md | 42 ++++++++++++++---------------------------- 2 files changed, 15 insertions(+), 29 deletions(-) diff --git a/docs/en/SUMMARY.md b/docs/en/SUMMARY.md index 90aa682bd..f32a242bc 100644 --- a/docs/en/SUMMARY.md +++ b/docs/en/SUMMARY.md @@ -11,7 +11,7 @@ - [Pour commencer](getting-started.md) - Concepts de base - [État](state.md) - - [Getters](getters.md) + - [Accesseurs](getters.md) - [Mutations](mutations.md) - [Actions](actions.md) - [Modules](modules.md) diff --git a/docs/en/getters.md b/docs/en/getters.md index 81cc4106d..1a8bcb614 100644 --- a/docs/en/getters.md +++ b/docs/en/getters.md @@ -1,6 +1,7 @@ -# Getters -Sometimes we may need to compute derived state based on store state, for example filtering through a list of items and counting them: +# Accesseurs + +Parfois nous avons besoin de calculer des valeurs basées sur le state du store, par exemple pour filtrer une liste d'éléments et les compter : ``` js computed: { @@ -10,9 +11,9 @@ computed: { } ``` -If more than one component needs to make use of this, we have to either duplicate the function, or extract it into a shared helper and import it in multiple places - both are less than ideal. +Si plus d'un composant a besoin d'utiliser cela, il nous faut ou bien dupliquer cette fonction, ou bien l'extraire dans un helper séparé et l'importer aux endroits nécessaires — les deux idées sont loin d'être idéales. -Vuex allows us to define "getters" in the store (think of them as computed properties for stores). Getters will receive the state as their 1st argument: +Vuex nous permet de définir des "getters" dans le store (voyez-les comme les computed properties des store). Les getters prennent le state en premier argument : ``` js const store = new Vuex.Store({ @@ -30,13 +31,13 @@ const store = new Vuex.Store({ }) ``` -The getters will be exposed on the `store.getters` object: +Les getters seront exposé sur l'objet `store.getters` : ``` js store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }] ``` -Getters will also receive other getters as the 2nd argument: +Les getters recevront également les autres getters en second argument : ``` js getters: { @@ -51,7 +52,7 @@ getters: { store.getters.doneTodosCount // -> 1 ``` -We can now easily make use of it inside any component: +Nous pouvons maintenant facilement les utiliser dans n'importe quel composant : ``` js computed: { @@ -61,24 +62,9 @@ computed: { } ``` -You can also pass arguments to getters by returning a function. This is particularly useful when you want to query an array in the store: -```js -getters: { - // ... - getTodoById: (state, getters) => (id) => { - return state.todos.find(todo => todo.id === id) - } -} -``` - -``` js -store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false } -``` - - -### The `mapGetters` Helper +### Le helper `mapGetters` -The `mapGetters` helper simply maps store getters to local computed properties: +Le helper `mapGetters` attache simplement vos getters du store aux computed properties locales : ``` js import { mapGetters } from 'vuex' @@ -86,7 +72,7 @@ import { mapGetters } from 'vuex' export default { // ... computed: { - // mix the getters into computed with object spread operator + // rajouter les getters dans computed avec l'object spread operator ...mapGetters([ 'doneTodosCount', 'anotherGetter', @@ -96,11 +82,11 @@ export default { } ``` -If you want to map a getter to a different name, use an object: +Si vous voulez attacher un getter avec un nom différent, utilisez un objet : ``` js -...mapGetters({ - // map this.doneCount to store.getters.doneTodosCount +mapGetters({ + // attacher this.doneCount à store.getters.doneTodosCount doneCount: 'doneTodosCount' }) ``` From 6ed64c7346cbacf03d5692e7e8e3aa3b6c64b91c Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sat, 20 May 2017 10:07:08 +0200 Subject: [PATCH 2/7] Remove first line Signed-off-by: Bruno Lesieur --- docs/en/getters.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/en/getters.md b/docs/en/getters.md index 1a8bcb614..7ce5aa026 100644 --- a/docs/en/getters.md +++ b/docs/en/getters.md @@ -1,4 +1,3 @@ - # Accesseurs Parfois nous avons besoin de calculer des valeurs basées sur le state du store, par exemple pour filtrer une liste d'éléments et les compter : From 55cb40a2e590680caf89b03a7fad73ad6c5195b0 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sat, 20 May 2017 10:15:11 +0200 Subject: [PATCH 3/7] Add new english part Signed-off-by: Bruno Lesieur --- docs/en/getters.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/docs/en/getters.md b/docs/en/getters.md index 7ce5aa026..5b2fdedc1 100644 --- a/docs/en/getters.md +++ b/docs/en/getters.md @@ -61,6 +61,21 @@ computed: { } ``` +You can also pass arguments to getters by returning a function. This is particularly useful when you want to query an array in the store: + +```js +getters: { + // ... + getTodoById: (state, getters) => (id) => { + return state.todos.find(todo => todo.id === id) + } +} +``` + +``` js +store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false } +``` + ### Le helper `mapGetters` Le helper `mapGetters` attache simplement vos getters du store aux computed properties locales : From 92f578bd501c64967a559462471a384d1adbf810 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sat, 20 May 2017 10:46:01 +0200 Subject: [PATCH 4/7] Translate a new example Signed-off-by: Bruno Lesieur --- docs/en/getters.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/getters.md b/docs/en/getters.md index 5b2fdedc1..ef84048f9 100644 --- a/docs/en/getters.md +++ b/docs/en/getters.md @@ -61,7 +61,7 @@ computed: { } ``` -You can also pass arguments to getters by returning a function. This is particularly useful when you want to query an array in the store: +Vous pouvez aussi passer des arguments aux accesseurs en retournant une fonction. Cela est particulièrement utile quand vous souhaitez interroger un tableau dans le store : ```js getters: { From 7222212bf0500c992cdc07cf5053cfa0232b6272 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sat, 20 May 2017 10:55:36 +0200 Subject: [PATCH 5/7] Starting structure.md review Signed-off-by: Bruno Lesieur --- docs/en/structure.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/en/structure.md b/docs/en/structure.md index 2ba11e37b..41c94d3ed 100644 --- a/docs/en/structure.md +++ b/docs/en/structure.md @@ -1,16 +1,16 @@ -# Application Structure +# Structure d'une application -Vuex doesn't really restrict how you structure your code. Rather, it enforces a set of high-level principles: +Vuex ne vous restreint pas vraiment dans la façon dont vous voulez structurer votre code. Il impose plutôt un set de principes de haut niveau : -1. Application-level state is centralized in the store. +1. Le state d'application est centralisé dans le store. -2. The only way to mutate the state is by committing **mutations**, which are synchronous transactions. +2. La seule façon de muter le state est de commiter des **mutations**, qui sont des transactions synchrones. -3. Asynchronous logic should be encapsulated in, and can be composed with **actions**. +3. La logique asynchrone doit être composée et encapsulée dans des **actions**. -As long as you follow these rules, it's up to you how to structure your project. If your store file gets too big, simply start splitting the actions, mutations and getters into separate files. +Tant que vous suivez ces règles, c'est à vous de structurer votre projet. Si votre fichier de store devient trop gros, commencez simplement par séparer les actions, mutations et getters dans des fichiers séparés. -For any non-trivial app, we will likely need to leverage modules. Here's an example project structure: +Pour une application non-triviale, nous aurons probablement besoin de faire appel à des modules. Voici un exemple de structure de projet : ``` bash ├── index.html @@ -21,12 +21,12 @@ For any non-trivial app, we will likely need to leverage modules. Here's an exam │   ├── App.vue │   └── ... └── store - ├── index.js # where we assemble modules and export the store - ├── actions.js # root actions - ├── mutations.js # root mutations + ├── index.js # Là où l'on assemble nos modules et exportons le store + ├── actions.js # Actions racine + ├── mutations.js # Mutations racine └── modules    ├── cart.js # cart module    └── products.js # products module ``` -As a reference, check out the [Shopping Cart Example](https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart). +Vous pouvez jeter à un œil à [l'exemple Shopping Cart](https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart). From dff200aa0a5d2264feb34d471b4d55953ad51751 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sat, 20 May 2017 11:29:17 +0200 Subject: [PATCH 6/7] Remove structure.md traduction from this PR Signed-off-by: Bruno Lesieur --- docs/en/structure.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/en/structure.md b/docs/en/structure.md index 41c94d3ed..2ba11e37b 100644 --- a/docs/en/structure.md +++ b/docs/en/structure.md @@ -1,16 +1,16 @@ -# Structure d'une application +# Application Structure -Vuex ne vous restreint pas vraiment dans la façon dont vous voulez structurer votre code. Il impose plutôt un set de principes de haut niveau : +Vuex doesn't really restrict how you structure your code. Rather, it enforces a set of high-level principles: -1. Le state d'application est centralisé dans le store. +1. Application-level state is centralized in the store. -2. La seule façon de muter le state est de commiter des **mutations**, qui sont des transactions synchrones. +2. The only way to mutate the state is by committing **mutations**, which are synchronous transactions. -3. La logique asynchrone doit être composée et encapsulée dans des **actions**. +3. Asynchronous logic should be encapsulated in, and can be composed with **actions**. -Tant que vous suivez ces règles, c'est à vous de structurer votre projet. Si votre fichier de store devient trop gros, commencez simplement par séparer les actions, mutations et getters dans des fichiers séparés. +As long as you follow these rules, it's up to you how to structure your project. If your store file gets too big, simply start splitting the actions, mutations and getters into separate files. -Pour une application non-triviale, nous aurons probablement besoin de faire appel à des modules. Voici un exemple de structure de projet : +For any non-trivial app, we will likely need to leverage modules. Here's an example project structure: ``` bash ├── index.html @@ -21,12 +21,12 @@ Pour une application non-triviale, nous aurons probablement besoin de faire appe │   ├── App.vue │   └── ... └── store - ├── index.js # Là où l'on assemble nos modules et exportons le store - ├── actions.js # Actions racine - ├── mutations.js # Mutations racine + ├── index.js # where we assemble modules and export the store + ├── actions.js # root actions + ├── mutations.js # root mutations └── modules    ├── cart.js # cart module    └── products.js # products module ``` -Vous pouvez jeter à un œil à [l'exemple Shopping Cart](https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart). +As a reference, check out the [Shopping Cart Example](https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart). From fefc19e1846f5d25c08822dd50f5418684814e84 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sat, 20 May 2017 11:36:47 +0200 Subject: [PATCH 7/7] =?UTF-8?q?Relecture=20de=20getters.md=20apr=C3=A8s=20?= =?UTF-8?q?review=20de=20@Kokal=20et=20@Haeresis?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Bruno Lesieur --- docs/en/getters.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/en/getters.md b/docs/en/getters.md index ef84048f9..e4e3bf54d 100644 --- a/docs/en/getters.md +++ b/docs/en/getters.md @@ -1,6 +1,6 @@ # Accesseurs -Parfois nous avons besoin de calculer des valeurs basées sur le state du store, par exemple pour filtrer une liste d'éléments et les compter : +Parfois nous avons besoin de calculer des valeurs basées sur l'état du store, par exemple pour filtrer une liste d'éléments et les compter : ``` js computed: { @@ -10,9 +10,9 @@ computed: { } ``` -Si plus d'un composant a besoin d'utiliser cela, il nous faut ou bien dupliquer cette fonction, ou bien l'extraire dans un helper séparé et l'importer aux endroits nécessaires — les deux idées sont loin d'être idéales. +Si plus d'un composant a besoin d'utiliser cela, il nous faut ou bien dupliquer cette fonction, ou bien l'extraire dans une fonction utilitaire séparée et l'importer aux endroits nécessaires. Les deux idées sont loin d'être idéales. -Vuex nous permet de définir des "getters" dans le store (voyez-les comme les computed properties des store). Les getters prennent le state en premier argument : +Vuex nous permet de définir des accesseurs (« getters ») dans le store (oyez-les comme les propriétés calculées des stores). Les accesseurs prennent l'état en premier argument : ``` js const store = new Vuex.Store({ @@ -30,13 +30,13 @@ const store = new Vuex.Store({ }) ``` -Les getters seront exposé sur l'objet `store.getters` : +Les accesseurs seront exposés sur l'objet `store.getters` : ``` js store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }] ``` -Les getters recevront également les autres getters en second argument : +Les accesseurs recevront également les autres accesseurs en second argument : ``` js getters: { @@ -76,9 +76,9 @@ getters: { store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false } ``` -### Le helper `mapGetters` +### La fonction utilitaire `mapGetters` -Le helper `mapGetters` attache simplement vos getters du store aux computed properties locales : +La fonction utilitaire `mapGetters` attache simplement vos accesseurs du store aux propriétés calculées locales : ``` js import { mapGetters } from 'vuex' @@ -86,7 +86,7 @@ import { mapGetters } from 'vuex' export default { // ... computed: { - // rajouter les getters dans computed avec l'object spread operator + // rajouter les accesseurs dans `computed` avec l'opérateur de décomposition ...mapGetters([ 'doneTodosCount', 'anotherGetter', @@ -96,11 +96,11 @@ export default { } ``` -Si vous voulez attacher un getter avec un nom différent, utilisez un objet : +Si vous voulez attacher un accesseur avec un nom différent, utilisez un objet : ``` js mapGetters({ - // attacher this.doneCount à store.getters.doneTodosCount + // attacher `this.doneCount` à `store.getters.doneTodosCount` doneCount: 'doneTodosCount' }) ```