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 2 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
41 changes: 13 additions & 28 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 le state du store, par exemple pour filtrer une liste d'éléments et les compter :
Copy link
Member Author

Choose a reason for hiding this comment

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

l'état


``` 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 un helper séparé et l'importer aux endroits nécessaires — les deux idées sont loin d'être idéales.
Copy link
Member Author

Choose a reason for hiding this comment

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

l'extraire dans une fonction utilitaire séparée

nécessaires. Les deux


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 :
Copy link
Member Author

Choose a reason for hiding this comment

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

des accesseurs (« getters »)

Copy link
Member Author

Choose a reason for hiding this comment

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

voyez-les comme les propriétés calculées des stores

Copy link
Member Author

Choose a reason for hiding this comment

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

Les accesseurs prennent l'état

Copy link
Member

Choose a reason for hiding this comment

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

des stores


``` 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 getters seront exposé sur l'objet `store.getters` :
Copy link
Member Author

@MachinisteWeb MachinisteWeb May 20, 2017

Choose a reason for hiding this comment

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

Les accesseurs seront exposés


``` 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 :
Copy link
Member Author

Choose a reason for hiding this comment

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

Les accesseurs
les autres accesseurs


``` 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,32 +61,17 @@ 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`
Copy link
Member Author

@MachinisteWeb MachinisteWeb May 20, 2017

Choose a reason for hiding this comment

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

La fonction utilitaire 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 :
Copy link
Member Author

Choose a reason for hiding this comment

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

L'utilitaire mapGetters

vos accesseurs du store

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 getters dans computed avec l'object spread operator
Copy link
Member Author

Choose a reason for hiding this comment

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

les accesseurs dans computed avec l'opérateur de décomposition

...mapGetters([
'doneTodosCount',
'anotherGetter',
Expand All @@ -96,11 +81,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 :
Copy link
Member Author

Choose a reason for hiding this comment

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

un accesseur


``` js
...mapGetters({
// map this.doneCount to store.getters.doneTodosCount
mapGetters({
// attacher this.doneCount à store.getters.doneTodosCount
Copy link
Member Author

Choose a reason for hiding this comment

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

this.doneCount à store.getters.doneTodosCount

doneCount: 'doneTodosCount'
})
```