Skip to content

Commit f474251

Browse files
darenjuktsn
authored andcommitted
Translated docs in French 🇫🇷 (#391)
* Starting french translation. * Translated more pages and corrected grammar/typos. * Translated actions page. * Fixed typo. * Translated more pages and fixed typos/mistakes. * Fixing more mistakes and sentences * More mistakes * Some more mistakes. Should be complete
1 parent 3ee1e9f commit f474251

21 files changed

+1547
-0
lines changed

docs/LANGS.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
* [2.0 - English](en/)
2+
* [2.0 - Français](fr/)
23
* [1.0 Docs](old/)

docs/fr/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
SUMMARY.md

docs/fr/SUMMARY.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# Vuex
2+
3+
> Note : Ceci est la documentation pour vuex@2.x.
4+
5+
- [Vous cherchez la documentation de la v1.0 ?](https://github.com/vuejs/vuex/tree/1.0/docs)
6+
- [Release Notes](https://github.com/vuejs/vuex/releases)
7+
- [Installation](installation.md)
8+
- [Qu'est-ce que Vuex ?](intro.md)
9+
- [Débuter](getting-started.md)
10+
- Concepts de base
11+
- [State](state.md)
12+
- [Getters](getters.md)
13+
- [Mutations](mutations.md)
14+
- [Actions](actions.md)
15+
- [Modules](modules.md)
16+
- [Structure d'une application](structure.md)
17+
- [Plugins](plugins.md)
18+
- [Strict Mode](strict.md)
19+
- [Formulaires](forms.md)
20+
- [Tests](testing.md)
21+
- [Hot Reloading](hot-reload.md)
22+
- [Documentation API](api.md)

docs/fr/actions.md

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
# Actions
2+
3+
Les actions sont similaires aux mutations, à la différence que :
4+
5+
- Au lieu de modifier le state, les actions committent des mutations.
6+
- Les actions peuvent contenir des opérations asynchrones.
7+
8+
Enregistrons une simple action :
9+
10+
``` js
11+
const store = new Vuex.Store({
12+
state: {
13+
count: 0
14+
},
15+
mutations: {
16+
increment (state) {
17+
state.count++
18+
}
19+
},
20+
actions: {
21+
increment (context) {
22+
context.commit('increment')
23+
}
24+
}
25+
})
26+
```
27+
28+
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.
29+
30+
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) :
31+
32+
``` js
33+
actions: {
34+
increment ({ commit }) {
35+
commit('increment')
36+
}
37+
}
38+
```
39+
40+
### Dispatcher des actions dans les composants
41+
42+
Les actions sont déclenchées par la méthode `store.dispatch` :
43+
44+
``` js
45+
store.dispatch('increment')
46+
```
47+
48+
Cela peut sembler idiot au premier abord : si nous avons besoin d'incrémenter le compteur, pourquoi ne pas simplement appeler `store.commit('increment')` directement ? Et bien, vous rappelez-vous que **les mutations doivent être synchrones** ? Les actions ne suivent pas cette règle. Il est possible de procéder à des opérations **asynchrones** dans une action :
49+
50+
``` js
51+
actions: {
52+
incrementAsync ({ commit }) {
53+
setTimeout(() => {
54+
commit('increment')
55+
}, 1000)
56+
}
57+
}
58+
```
59+
60+
Les actions prennent en charge le même format de payload et *object-style dispatch* :
61+
62+
``` js
63+
// dispatcher avec un payload
64+
store.dispatch('incrementAsync', {
65+
amount: 10
66+
})
67+
68+
// dispatcher avec un object
69+
store.dispatch({
70+
type: 'incrementAsync',
71+
amount: 10
72+
})
73+
```
74+
75+
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** :
76+
77+
``` js
78+
actions: {
79+
checkout ({ commit, state }, payload) {
80+
// sauvegarder les articles actuellement dans le panier
81+
const savedCartItems = [...state.cart.added]
82+
// envoyer la requête de checkout, et vider le panier
83+
commit(types.CHECKOUT_REQUEST)
84+
// l'API du shop prend un callback success et un callback failure
85+
shop.buyProducts(
86+
products,
87+
// handle success
88+
() => commit(types.CHECKOUT_SUCCESS),
89+
// handle failure
90+
() => commit(types.CHECKOUT_FAILURE, savedCartItems)
91+
)
92+
}
93+
}
94+
```
95+
96+
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.
97+
98+
### Dispatcher des actions dans les composants
99+
100+
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) :
101+
102+
``` js
103+
import { mapActions } from 'vuex'
104+
105+
export default {
106+
// ...
107+
methods: {
108+
...mapActions([
109+
'increment' // attacher this.increment() à this.$store.dispatch('increment')
110+
]),
111+
...mapActions({
112+
add: 'increment' // attacher this.add() à this.$store.dispatch('increment')
113+
})
114+
}
115+
}
116+
```
117+
118+
### Composer les actions
119+
120+
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 ?
121+
122+
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 :
123+
124+
``` js
125+
actions: {
126+
actionA ({ commit }) {
127+
return new Promise((resolve, reject) => {
128+
setTimeout(() => {
129+
commit('someMutation')
130+
resolve()
131+
}, 1000)
132+
})
133+
}
134+
}
135+
```
136+
137+
Maintenant vous pouvez faire :
138+
139+
``` js
140+
store.dispatch('actionA').then(() => {
141+
// ...
142+
})
143+
```
144+
145+
Et également dans une autre action :
146+
147+
``` js
148+
actions: {
149+
// ...
150+
actionB ({ dispatch, commit }) {
151+
return dispatch('actionA').then(() => {
152+
commit('someOtherMutation')
153+
})
154+
}
155+
}
156+
```
157+
158+
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 :
159+
160+
``` js
161+
// sachant que getData() et getOtherData() retournent des Promises
162+
163+
actions: {
164+
async actionA ({ commit }) {
165+
commit('gotData', await getData())
166+
},
167+
async actionB ({ dispatch, commit }) {
168+
await dispatch('actionA') // wait for actionA to finish
169+
commit('gotOtherData', await getOtherData())
170+
}
171+
}
172+
```
173+
174+
> 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.

docs/fr/api.md

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
# Documentation API
2+
3+
### Vuex.Store
4+
5+
``` js
6+
import Vuex from 'vuex'
7+
8+
const store = new Vuex.Store({ ...options })
9+
```
10+
11+
### Options de constructeur de Vuex.Store
12+
13+
- **state**
14+
15+
- type: `Object`
16+
17+
L'objet state racine pour le store Vuex.
18+
19+
[Détails](state.md)
20+
21+
- **mutations**
22+
23+
- type: `{ [type: string]: Function }`
24+
25+
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.
26+
27+
[Détails](mutations.md)
28+
29+
- **actions**
30+
31+
- type: `{ [type: string]: Function }`
32+
33+
Enregistrer les actions sur le store. La fonction handler reçoit un objet `context` qui expose les propriétés suivantes :
34+
35+
``` js
36+
{
37+
state, // identique à store.state, ou au state local si dans des modules
38+
rootState, // identique à store.state, seulement dans des modules
39+
commit, // identique à store.commit
40+
dispatch, // identique à store.dispatch
41+
getters // identique à store.getters
42+
}
43+
```
44+
45+
[Détails](actions.md)
46+
47+
- **getters**
48+
49+
- type: `{ [key: string]: Function }`
50+
51+
Enregistrer les getters sur le store. La fonction getter reçoit les arguments suivants :
52+
53+
```
54+
state, // sera le state local du module si défini dans un module.
55+
getters, // indentique à store.getters
56+
rootState // indentique à store.state
57+
```
58+
Les getters enregistrés sont exposés sur `store.getters`.
59+
60+
[Détails](getters.md)
61+
62+
- **modules**
63+
64+
- type: `Object`
65+
66+
Un objet contenant des sous-modules qui seront regroupés dans le store, de la forme suivante :
67+
68+
``` js
69+
{
70+
key: {
71+
state,
72+
mutations,
73+
actions?,
74+
getters?,
75+
modules?
76+
},
77+
...
78+
}
79+
```
80+
81+
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.
82+
83+
[Détails](modules.md)
84+
85+
- **plugins**
86+
87+
- type: `Array<Function>`
88+
89+
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).
90+
91+
[Détails](plugins.md)
92+
93+
- **strict**
94+
95+
- type: `Boolean`
96+
- default: `false`
97+
98+
Force le store Vuex en mode strict. En mode strict, toute mutation du state en dehors des handlers de mutation lancera une Error.
99+
100+
[Détails](strict.md)
101+
102+
### Propriétés d'instance de Vuex.Store
103+
104+
- **state**
105+
106+
- type: `Object`
107+
108+
Le state racine. Lecture seule.
109+
110+
- **getters**
111+
112+
- type: `Object`
113+
114+
Expose les getters enregistrés. Lecture seule.
115+
116+
### Méthodes d'instance de Vuex.Store
117+
118+
- **`commit(type: string, payload?: any) | commit(mutation: Object)`**
119+
120+
commiter une mutation. [Détails](mutations.md)
121+
122+
- **`dispatch(type: string, payload?: any) | dispatch(action: Object)`**
123+
124+
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)
125+
126+
- **`replaceState(state: Object)`**
127+
128+
Remplacer le state racine du store. Utiliser seulement pour hydrater le state ou voir le state dans le temps.
129+
130+
- **`watch(getter: Function, cb: Function, options?: Object)`**
131+
132+
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.
133+
134+
Pour arrêter d'observer, appeler la fonction retournée.
135+
136+
- **`subscribe(handler: Function)`**
137+
138+
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 :
139+
140+
``` js
141+
store.subscribe((mutation, state) => {
142+
console.log(mutation.type)
143+
console.log(mutation.payload)
144+
})
145+
```
146+
147+
Utilisé plus communément dans les plugins. [Détails](plugins.md)
148+
149+
- **`registerModule(path: string | Array<string>, module: Module)`**
150+
151+
Enregistrer un module dynamique. [Détails](modules.md#enregistrement-dynamique-de-module)
152+
153+
- **`unregisterModule(path: string | Array<string>)`**
154+
155+
Supprimer un module dynamique. [Détails](modules.md#enregistrement-dynamique-de-module)
156+
157+
- **`hotUpdate(newOptions: Object)`**
158+
159+
Remplacement à la volée des nouvelles actions et mutations. [Détails](hot-reload.md)
160+
161+
### Helpers d'attachement au composant
162+
163+
- **`mapState(map: Array<string> | Object): Object`**
164+
165+
Créer des computed properties qui retournent le sub tree du store Vuex au composant. [Détails](state.md#le-helper-mapstate)
166+
167+
- **`mapGetters(map: Array<string> | Object): Object`**
168+
169+
Créer des computed properties qui retournent la valeur calculée d'un getter. [Détails](getters.md#le-helper-mapgetters)
170+
171+
- **`mapActions(map: Array<string> | Object): Object`**
172+
173+
Créer des méthodes de composant qui dispatchent une action. [Détails](actions.md#dispatcher-des-actions-dans-les-composants)
174+
175+
- **`mapMutations(map: Array<string> | Object): Object`**
176+
177+
Créer des méthodes de composant qui committent une mutation. [Détails](mutations.md#commiter-des-mutations-dans-les-composants)

docs/fr/book.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../book.json

0 commit comments

Comments
 (0)