Skip to content

[Doc FR] — All files — French Translation Done #847

New issue

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

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

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Aug 5, 2017
Merged
Show file tree
Hide file tree
Changes from 1 commit
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
18 changes: 9 additions & 9 deletions docs/fr/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,20 @@
<!--/email_off-->

- [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)
- [Notes de version](https://github.com/vuejs/vuex/releases)
- [Installation](installation.md)
- [Qu'est-ce que Vuex ?](intro.md)
- [Débuter](getting-started.md)
- [Vuex, qu'est-ce que c'est ?](intro.md)
- [Pour commencer](getting-started.md)
- Concepts de base
- [State](state.md)
- [Getters](getters.md)
- [État](state.md)
- [Accesseurs](getters.md)
- [Mutations](mutations.md)
- [Actions](actions.md)
- [Modules](modules.md)
- [Structure d'une application](structure.md)
- [Plugins](plugins.md)
- [Strict Mode](strict.md)
- [Formulaires](forms.md)
- [Mode strict](strict.md)
- [Gestion des formulaires](forms.md)
- [Tests](testing.md)
- [Hot Reloading](hot-reload.md)
- [Documentation API](api.md)
- [Rechargement à chaud](hot-reload.md)
- [Documentation de l'API](api.md)
46 changes: 25 additions & 21 deletions docs/fr/actions.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

Les actions sont similaires aux mutations, à la différence que :

- Au lieu de modifier le state, les actions committent des mutations.
- Au lieu de modifier l'état, les actions actent des mutations.
- Les actions peuvent contenir des opérations asynchrones.

Enregistrons une simple action :
Expand All @@ -25,9 +25,9 @@ const store = new Vuex.Store({
})
```

Les handlers d'action reçoivent un objet contexte qui expose le même set de méthodes/propriétés que l'instance du store, donc vous pouvez appeler `context.commit` pour commiter une mutation, ou accéder au state et aux getters via `context.state` et `context.getters`. Nous verrons pourquoi cet objet contexte n'est pas l'instance du store elle-même lorsque nous présenterons les [Modules](moduels.md) plus tard.
Les gestionnaires d'action reçoivent un objet contexte qui expose le même ensemble de méthodes et propriétés que l'instance du store, donc vous pouvez appeler `context.commit` pour acter une mutation, ou accéder à l'état et aux accesseurs via `context.state` et `context.getters`. Nous verrons pourquoi cet objet contexte n'est pas l'instance du store elle-même lorsque nous présenterons les [Modules](modules.md) plus tard.

En pratique, nous utilisons souvent la [destructuration d'argument](https://github.com/lukehoban/es6features#destructuring) (*argument destructuring*) pour simplifier quelque peu le code (particulièrement si nous avons besoin d'appeler `commit` plusieurs fois) :
En pratique, nous utilisons souvent la [destructuration d'argument](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Affecter_par_d%C3%A9composition) pour simplifier quelque peu le code (particulièrement si nous avons besoin d'appeler `commit` plusieurs fois) :

``` js
actions: {
Expand All @@ -37,7 +37,7 @@ actions: {
}
```

### Dispatcher des actions dans les composants
### Propager des actions dans les composants

Les actions sont déclenchées par la méthode `store.dispatch` :

Expand All @@ -57,47 +57,48 @@ actions: {
}
```

Les actions prennent en charge le même format de payload et *object-style dispatch* :
Les actions prennent également en charge les paramètres additionnels (« payload ») et les objets pour propager :

``` js
// dispatcher avec un payload
// propager avec un paramètre additionnel
store.dispatch('incrementAsync', {
amount: 10
})

// dispatcher avec un object
// propager avec un objet
store.dispatch({
type: 'incrementAsync',
amount: 10
})
```

Un exemple plus pratique d'une application du monde réel serait une action pour check-out un panier d'achats, ce qui implique **d'appeler une API asynchrone** et de **comitter de multiples mutations** :
Un exemple concret d'application serait une action pour vider un panier d'achats, ce qui implique **d'appeler une API asynchrone** et d'**acter de multiples mutations** :

``` js
actions: {
checkout ({ commit, state }, products) {
// sauvegarder les articles actuellement dans le panier
const savedCartItems = [...state.cart.added]
// envoyer la requête de checkout, et vider le panier
// envoyer la requête de checkout,
// et vider le panier
commit(types.CHECKOUT_REQUEST)
// l'API du shop prend un callback success et un callback failure
// l'API de la boutique en ligne prend une fonction de rappel en cas de succès et une autre en cas d'échec
shop.buyProducts(
products,
// handle success
// gérer le succès
() => commit(types.CHECKOUT_SUCCESS),
// handle failure
// gérer l'échec
() => commit(types.CHECKOUT_FAILURE, savedCartItems)
)
}
}
```

Notez que nous procédons à un flux d'opérations asynchrones, et enregistrons les effets de bord (mutation du state) de l'action en les committant.
Notez que nous procédons à un flux d'opérations asynchrones, et enregistrons les effets de bord (mutation de l'état) de l'action en les actant.

### Dispatcher des actions dans les composants
### Propager des actions dans les composants

Vous pouvez dispatcher des actions dans les composants avec `this.$store.dispatch('xxx')`, ou en utilisant le helper `mapActions` qui attache les méthodes du composant aux appels de `store.dispatch` (nécessite l'injection de `store` à la racine) :
Vous pouvez propager des actions dans les composants avec `this.$store.dispatch('xxx')`, ou en utilisant la fonction utilitaire `mapActions` qui attache les méthodes du composant aux appels de `store.dispatch` (nécessite l'injection de `store` à la racine) :

``` js
import { mapActions } from 'vuex'
Expand All @@ -106,10 +107,13 @@ export default {
// ...
methods: {
...mapActions([
'increment' // attacher this.increment() à this.$store.dispatch('increment')
'increment' // attacher `this.increment()` à `this.$store.dispatch('increment')`

// `mapActions` supporte également les paramètres additionnels :
'incrementBy' // attacher `this.incrementBy(amount)` à `this.$store.dispatch('incrementBy', amount)`
]),
...mapActions({
add: 'increment' // attacher this.add() à this.$store.dispatch('increment')
add: 'increment' // attacher `this.add()` à `this.$store.dispatch('increment')`
})
}
}
Expand All @@ -119,7 +123,7 @@ export default {

Les actions sont souvent asynchrones, donc comment savoir lorsqu'une action est terminée ? Et plus important, comment composer plusieurs actions ensemble pour manipuler des flux asynchrones plus complexes ?

La première chose à savoir est que `store.dispatch` retourne la valeur retournée par le handler de l'action déclenchée, vous pouvez donc retourner une Promise :
La première chose à savoir est que `store.dispatch` peut gérer la Promesse (« Promise ») retournée par le gestionnaire d'action déclenché et par conséquent vous pouvez également retourner une Promesse :

``` js
actions: {
Expand Down Expand Up @@ -158,17 +162,17 @@ actions: {
Pour finir, nous pouvons utiliser de [async / await](https://tc39.github.io/ecmascript-asyncawait/), une fonctionnalité JavaScript qui sera disponible très bientôt, nous pouvons composer nos actions ainsi :

``` js
// sachant que getData() et getOtherData() retournent des Promises
// sachant que `getData()` et `getOtherData()` retournent des Promesses.

actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // wait for actionA to finish
await dispatch('actionA') // attendre que `actionA` soit finie
commit('gotOtherData', await getOtherData())
}
}
```

> Il est possible pour un `store.dispatch` de déclencher plusieurs handlers d'action dans différents modules. Dans ce genre de cas, la valeur retournée sera une Promise qui se résoud quand tous les handlers déclenchés ont été résolus.
> Il est possible pour un `store.dispatch` de déclencher plusieurs gestionnaires d'action dans différents modules. Dans ce genre de cas, la valeur retournée sera une Promesse qui se résoud quand tous les gestionnaires déclenchés ont été résolus.
120 changes: 69 additions & 51 deletions docs/fr/api.md
Original file line number Diff line number Diff line change
@@ -1,75 +1,85 @@
# Documentation API
# Documentation de l'API

### Vuex.Store
### `Vuex.Store`

``` js
import Vuex from 'vuex'

const store = new Vuex.Store({ ...options })
```

### Options de constructeur de Vuex.Store
### Options du constructeur de `Vuex.Store`

- **state**

- type: `Object`
- type : `Object`

L'objet state racine pour le store Vuex.
L'objet d'état racine pour le store Vuex.

[Détails](state.md)

- **mutations**

- type: `{ [type: string]: Function }`
- type : `{ [type: string]: Function }`

Enregistrer les mutations sur le store. La fonction handler reçoit toujours `state` comme premier argument (sera le state local du module si défini dans un module), et reçoit le `payload` en second argument s'il y en a un.
Enregistrer les mutations sur le store. La fonction gestionnaire reçoit toujours `state` comme premier argument (sera l'état local du module si défini dans un module), et reçoit le `payload` en second argument s'il y en a un.

[Détails](mutations.md)

- **actions**

- type: `{ [type: string]: Function }`
- type : `{ [type: string]: Function }`

Enregistrer les actions sur le store. La fonction handler reçoit un objet `context` qui expose les propriétés suivantes :
Enregistrer les actions sur le store. La fonction gestionnaire reçoit un objet `context` qui expose les propriétés suivantes :

``` js
{
state, // identique à store.state, ou au state local si dans des modules
rootState, // identique à store.state, seulement dans des modules
commit, // identique à store.commit
dispatch, // identique à store.dispatch
getters // identique à store.getters
state, // identique à `store.state`, ou à l'état local si dans des modules
rootState, // identique à `store.state`, seulement dans des modules
commit, // identique à `store.commit`
dispatch, // identique à `store.dispatch`
getters // identique à `store.getters`
}
```

[Détails](actions.md)

- **getters**

- type: `{ [key: string]: Function }`
- type : `{ [key: string]: Function }`

Enregistrer les getters sur le store. La fonction getter reçoit les arguments suivants :
Enregistrer les accesseurs sur le store. La fonction accesseur reçoit les arguments suivants :

```
state, // sera le state local du module si défini dans un module.
getters, // indentique à store.getters
rootState // indentique à store.state
state, // sera l'état local du module si défini dans un module.
getters // indentique à `store.getters`
```
Les getters enregistrés sont exposés sur `store.getters`.

Arguments spécifiques quand défini dans un module

```
state, // sera l'état local du module si défini dans un module.
getters, // module local getters of the current module
rootState, // état global
rootGetters // tous les accesseurs
```

Les accesseurs enregistrés sont exposés sur `store.getters`.

[Détails](getters.md)

- **modules**

- type: `Object`
- type : `Object`

Un objet contenant des sous-modules qui seront regroupés dans le store, de la forme suivante :
Un objet contenant des sous-modules qui seront regroupés dans le store, sous la forme suivante :

``` js
{
key: {
state,
mutations,
namespaced?,
mutations?,
actions?,
getters?,
modules?
Expand All @@ -78,64 +88,64 @@ const store = new Vuex.Store({ ...options })
}
```

Chaque module peut contenir `state` et `mutations`, tout comme les options racine. Le state d'un module sera attaché au state racine du store en utilisant la clé du module. Les mutations et getters d'un module recevront seulement le state local du module en premier argument au lieu du state racine, et le `context.state` des actions du module pointeront également vers le state local.
Chaque module peut contenir `state` et `mutations`, tout comme les options racine. L'état d'un module sera attaché à l'état racine du store en utilisant la clé du module. Les mutations et accesseurs d'un module recevront seulement l'état local du module en premier argument au lieu de l'état racine, et le `context.state` des actions du module pointeront également vers l'état local.

[Détails](modules.md)

- **plugins**

- type: `Array<Function>`
- type : `Array<Function>`

Un tableau de fonctions plugin qui seront appliqués au store. Un plugin reçoit simplement le store comme seul argument et peut soit écouter les mutations (pour la persistence de données, logging ou debugging) ou dispatcher des mutations (pour les données internes, i.e. websockets ou observables).
Un tableau de fonctions plugins qui seront appliquées au store. Un plugin reçoit simplement le store comme seul argument et peut soit écouter les mutations (pour la persistence de données, les logs ou le débogage) ou propager des mutations (pour les données internes, c.-à-d. websockets ou observables).

[Détails](plugins.md)

- **strict**

- type: `Boolean`
- type : `Boolean`
- default: `false`

Force le store Vuex en mode strict. En mode strict, toute mutation du state en dehors des handlers de mutation lancera une Error.
Force le store Vuex en mode strict. En mode strict, toute mutation de l'état en dehors des gestionnaires de mutation lancera une erreur.

[Détails](strict.md)

### Propriétés d'instance de Vuex.Store
### Propriétés d'instance de `Vuex.Store`

- **state**

- type: `Object`
- type : `Object`

Le state racine. Lecture seule.
L'état racine. Lecture seule.

- **getters**

- type: `Object`
- type : `Object`

Expose les getters enregistrés. Lecture seule.
Expose les accesseurs enregistrés. Lecture seule.

### Méthodes d'instance de Vuex.Store
### Méthodes d'instance de `Vuex.Store`

- **`commit(type: string, payload?: any) | commit(mutation: Object)`**
- **`commit(type: string, payload?: any, options?: Object) | commit(mutation: Object, options?: Object)`**

commiter une mutation. [Détails](mutations.md)
Acter une mutation. `options` peut avoir `root: true` ce qui permet d'acter des mutations racines dans des [modules sous espace de nom](modules.md#namespacing). [Détails](mutations.md)

- **`dispatch(type: string, payload?: any) | dispatch(action: Object)`**
- **`dispatch(type : string, payload?: any, options?: Object) | dispatch(action: Object, options?: Object)`**

Dispatcher une action. Retourne la valeur renvoyée par le handler d'action déclenché, ou une Promise si plusieurs handlers ont été déclenchés. [Détails](actions.md)
Propager une action. Retourne la valeur renvoyée par le gestionnaire d'action déclenché, ou une Promesse si plusieurs gestionnaires ont été déclenchés. [Détails](actions.md)

- **`replaceState(state: Object)`**

Remplacer le state racine du store. Utiliser seulement pour hydrater le state ou voir le state dans le temps.
Remplacer l'état racine du store. Utiliser seulement pour hydrater l'état ou dans le but de voyager dans le temps.

- **`watch(getter: Function, cb: Function, options?: Object)`**

Observer de façon réactive la valeur de retour d'une fonction getter, et appeler le callback lorsque la valeur change. Le getter reçoit le state du store comme unique argument. Accepte un objet options optionnel qui prend les mêmes options que la méthode `vm.$watch` de Vue.
Observer de façon réactive la valeur de retour d'une fonction accesseur, et appeler la fonction de rappel lorsque la valeur change. L'accesseur reçoit l'état du store comme unique argument. Accepte un objet optionnel d'options qui prend les mêmes options que la méthode `vm.$watch` de Vue.

Pour arrêter d'observer, appeler la fonction retournée.
Pour arrêter d'observer, appeler la fonction gestionnaire retournée.

- **`subscribe(handler: Function)`**

S'abonner aux mutations du store. Le `handler` est appelé après chaque mutation et reçoit le descripteur de mutation et le state post-mutation comme arguments :
S'abonner aux mutations du store. Le `handler` est appelé après chaque mutation et reçoit le descripteur de mutation et l'état post-mutation comme arguments :

``` js
store.subscribe((mutation, state) => {
Expand All @@ -158,20 +168,28 @@ const store = new Vuex.Store({ ...options })

Remplacement à la volée des nouvelles actions et mutations. [Détails](hot-reload.md)

### Helpers d'attachement au composant
### Fonctions utilitaires d'attachement au composant

- **`mapState(namespace?: string, map: Array<string> | Object): Object`**

Créer des propriétés calculées qui retournent le sous arbre du store Vuex au composant. [Détails](state.md#le-helper-mapstate)

Le premier argument peut être de façon optionnel une chaîne d'espace de nom. [Details](modules.md#Fonctions-utilitaires-liées-avec-espace-de-nom)

- **`mapGetters(namespace?: string, map: Array<string> | Object): Object`**

- **`mapState(map: Array<string> | Object): Object`**
Créer des propriétés calculées qui retournent la valeur calculée d'un accesseur. [Détails](getters.md#la-function-utilitaire-mapgetters)

Créer des computed properties qui retournent le sub tree du store Vuex au composant. [Détails](state.md#le-helper-mapstate)
Le premier argument peut être de façon optionnel une chaîne d'espace de nom. [Details](modules.md#Fonctions-utilitaires-liées-avec-espace-de-nom)

- **`mapGetters(map: Array<string> | Object): Object`**
- **`mapActions(namespace?: string, map: Array<string> | Object): Object`**

Créer des computed properties qui retournent la valeur calculée d'un getter. [Détails](getters.md#le-helper-mapgetters)
Créer des méthodes de composant qui propagent une action. [Détails](actions.md#propager-des-actions-dans-les-composants)

- **`mapActions(map: Array<string> | Object): Object`**
Le premier argument peut être de façon optionnel une chaîne d'espace de nom. [Details](modules.md#Fonctions-utilitaires-liées-avec-espace-de-nom)

Créer des méthodes de composant qui dispatchent une action. [Détails](actions.md#dispatcher-des-actions-dans-les-composants)
- **`mapMutations(namespace?: string, map: Array<string> | Object): Object`**

- **`mapMutations(map: Array<string> | Object): Object`**
Créer des méthodes de composant qui actent une mutation. [Détails](mutations.md#acter-des-mutations-dans-les-composants)

Créer des méthodes de composant qui committent une mutation. [Détails](mutations.md#commiter-des-mutations-dans-les-composants)
Le premier argument peut être de façon optionnel une chaîne d'espace de nom. [Details](modules.md#Fonctions-utilitaires-liées-avec-espace-de-nom)
Loading