Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Traduction getters.md #9

Merged
merged 7 commits into from
May 20, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/en/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
30 changes: 15 additions & 15 deletions docs/en/getters.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Getters
# Accesseurs

Sometimes we may need to compute derived state based on store state, for example filtering through a list of items and counting them:
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: {
Expand All @@ -10,9 +10,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 une fonction utilitaire séparée 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 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({
Expand All @@ -30,13 +30,13 @@ const store = new Vuex.Store({
})
```

The getters will be exposed on the `store.getters` object:
Les accesseurs seront exposés 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 accesseurs recevront également les autres accesseurs en second argument :

``` js
getters: {
Expand All @@ -51,7 +51,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: {
Expand All @@ -61,7 +61,8 @@ 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: {
// ...
Expand All @@ -75,18 +76,17 @@ getters: {
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
```

### La fonction utilitaire `mapGetters`

### The `mapGetters` Helper

The `mapGetters` helper simply maps store getters to local computed properties:
La fonction utilitaire `mapGetters` attache simplement vos accesseurs du store aux propriétés calculées locales :

``` js
import { mapGetters } from 'vuex'

export default {
// ...
computed: {
// mix the getters into computed with object spread operator
// rajouter les accesseurs dans `computed` avec l'opérateur de décomposition
...mapGetters([
'doneTodosCount',
'anotherGetter',
Expand All @@ -96,11 +96,11 @@ export default {
}
```

If you want to map a getter to a different name, use an object:
Si vous voulez attacher un accesseur 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'
})
```