-
Notifications
You must be signed in to change notification settings - Fork 1
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
Changes from 2 commits
4ba4208
6ed64c7
55cb40a
92f578b
7222212
dff200a
fefc19e
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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 : | ||
|
||
``` js | ||
computed: { | ||
|
@@ -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. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
||
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 : | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
||
``` js | ||
const store = new Vuex.Store({ | ||
|
@@ -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` : | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
||
``` 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 : | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
||
``` js | ||
getters: { | ||
|
@@ -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: { | ||
|
@@ -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` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. La fonction utilitaire |
||
|
||
The `mapGetters` helper simply maps store getters to local computed properties: | ||
Le helper `mapGetters` attache simplement vos getters du store aux computed properties locales : | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
||
``` 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 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
...mapGetters([ | ||
'doneTodosCount', | ||
'anotherGetter', | ||
|
@@ -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 : | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
||
``` js | ||
...mapGetters({ | ||
// map this.doneCount to store.getters.doneTodosCount | ||
mapGetters({ | ||
// attacher this.doneCount à store.getters.doneTodosCount | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
doneCount: 'doneTodosCount' | ||
}) | ||
``` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.