Skip to content

Commit f64a89c

Browse files
Slashgearktsn
Slashgear
authored and
ktsn
committed
docs(vuepress): move 🇫🇷 doc in vuepress (#1412)
* doc(vuepress): move fr doc in vuepress * move gitbook doc to vuepress * fixup! move gitbook doc to vuepress
1 parent be75d41 commit f64a89c

16 files changed

+1897
-1
lines changed

Diff for: ‎docs/.vuepress/config.js

+47-1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,11 @@ module.exports = {
2929
lang: 'pt-BR',
3030
title: 'Vuex',
3131
description: 'Gerenciamento de Estado Centralizado para Vue.js'
32+
},
33+
'/fr/': {
34+
lang: 'fr-FR',
35+
title: 'Vuex',
36+
description: 'Gestion d\'état centralisé pour Vue.js'
3237
}
3338
},
3439
serviceWorker: true,
@@ -280,7 +285,48 @@ module.exports = {
280285
'/ptbr/guide/testing',
281286
'/ptbr/guide/hot-reload'
282287
]
283-
}
288+
},
289+
'/fr/': {
290+
label: 'Français',
291+
selectText: 'Langues',
292+
editLinkText: 'Éditer la page sur GitHub',
293+
nav: [
294+
{
295+
text: 'Guide',
296+
link: '/guide/'
297+
},
298+
{
299+
text: 'API',
300+
link: '/api/'
301+
},
302+
{
303+
text: 'Notes de release',
304+
link: 'https://github.com/vuejs/vuex/releases'
305+
}
306+
],
307+
sidebar: [
308+
'/fr/installation',
309+
'/fr/',
310+
'/fr/guide/',
311+
{
312+
title: 'Concepts centraux',
313+
collapsable: false,
314+
children: [
315+
'/fr/guide/state',
316+
'/fr/guide/getters',
317+
'/fr/guide/mutations',
318+
'/fr/guide/actions',
319+
'/fr/guide/modules'
320+
]
321+
},
322+
'/fr/guide/structure',
323+
'/fr/guide/plugins',
324+
'/fr/guide/strict',
325+
'/fr/guide/forms',
326+
'/fr/guide/testing',
327+
'/fr/guide/hot-reload'
328+
]
329+
},
284330
}
285331
}
286332
}

Diff for: ‎docs/fr/README.md

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# Vuex, qu'est-ce que c'est ?
2+
3+
Vuex est un **_gestionnaire d'état (« state management pattern »)_ et une bibliothèque** pour des applications Vue.js. Il sert de zone de stockage de données centralisée pour tous les composants dans une application, avec des règles pour s'assurer que l'état ne puisse subir de mutations que d'une manière prévisible. Il s'intègre également avec [l'extension officielle](https://github.com/vuejs/vue-devtools) de Vue afin de fournir des fonctionnalités avancées comme de la visualisation d'état dans le temps et des exports et imports d’instantanés (« snapshot ») d'état.
4+
5+
### Un « gestionnaire d'état », qu'est-ce que c'est ?
6+
7+
Commençons par une simple application de comptage avec Vue :
8+
9+
``` js
10+
new Vue({
11+
// état
12+
data () {
13+
return {
14+
count: 0
15+
}
16+
},
17+
// vue
18+
template: `
19+
<div>{{ count }}</div>
20+
`,
21+
// actions
22+
methods: {
23+
increment () {
24+
this.count++
25+
}
26+
}
27+
})
28+
```
29+
30+
C'est une application autosuffisante avec les parties suivantes :
31+
32+
- L'**état**, qui est la source de vérité qui pilote votre application,
33+
- La **vue**, qui est une réflexion déclarative de l'**état**,
34+
- Les **actions**, qui sont les façons possibles pour l'état de changer en réaction aux actions utilisateurs depuis la **vue**.
35+
36+
Voici une représentation extrêmement simple du concept de « flux de donnée unidirectionnel » :
37+
38+
<p style="text-align: center; margin: 2em">
39+
<img style="width:100%;max-width:450px;" src="/flow.png">
40+
</p>
41+
42+
Cependant, la simplicité s'évapore rapidement lorsque nous avons **de multiples composants qui partagent un même état global** :
43+
44+
- Plusieurs vues peuvent dépendre de la même partie de l'état global.
45+
- Des actions dans différentes vues peuvent avoir besoin de muter la même partie de l'état global.
46+
47+
Pour le premier problème, passer des props peut être fastidieux pour les composants profondément imbriqués, et ça ne fonctionne tout simplement pas pour les composants d'un même parent. Pour le deuxième problème, on se retrouve souvent à se rabattre sur des solutions telles qu'accéder aux références d'instance du parent/enfant direct ou essayer de muter et synchroniser de multiples copies de l'état via des évènements. Ces deux modèles sont fragiles et posent rapidement des problèmes de maintenabilité du code.
48+
49+
Alors pourquoi ne pas extraire l'état global partagé des composants, et le gérer dans un singleton global ? De cette manière, notre arbre de composant devient une grosse « vue », et n'importe quel composant peut accéder à l'état global ou déclencher des actions, peu importe où il se trouve dans l'arbre !
50+
51+
De plus, en définissant et en séparant les concepts impliqués dans la gestion de l'état global et en appliquant certaines règles, on donne aussi une structure et une maintenabilité à notre code.
52+
53+
Voilà l'idée de base derrière Vuex, inspiré par [Flux](https://facebook.github.io/flux/docs/overview.html), [Redux](http://redux.js.org/) et [l'architecture Elm](https://guide.elm-lang.org/architecture/). À l'inverse des autres modèles, Vuex est aussi une bibliothèque d'implémentation conçue spécialement pour Vue.js afin de bénéficier de son système de réactivité granulaire pour des modifications efficaces.
54+
55+
![vuex](/vuex.png)
56+
57+
### Quand l'utiliser ?
58+
59+
Bien que Vuex nous aide à gérer un état global partagé, il apporte aussi le cout de nouveaux concepts et _abstraction de code_ (« boilerplate »). C'est un compromis entre la productivité à court terme et à long terme.
60+
61+
Si vous n'avez jamais créé une _application monopage_ à grande échelle et que vous sautez directement dans Vuex, cela peut paraitre verbeux et intimidant. C'est parfaitement normal ; si votre application est simple, vous vous en sortirez sans doute très bien sans Vuex. Un simple [canal d'évènement global](https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch) pourrait très bien vous suffire. Mais si vous devez créer une application monopage à moyenne ou grande échelle, il y a des chances que vous vous trouviez dans des situations qui vous feront vous interroger sur une meilleure gestion de l'état global, détaché de votre composant Vue, et Vuex sera naturellement la prochaine étape pour vous. Voici une bonne citation de Dan Abramov, l'auteur de Redux :
62+
> « Les librairies Flux, c'est comme les lunettes : vous saurez quand vous en aurez besoin. »

Diff for: ‎docs/fr/api/README.md

+251
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
---
2+
sidebar: auto
3+
---
4+
5+
# Documentation de l'API
6+
7+
## Vuex.Store
8+
9+
``` js
10+
import Vuex from 'vuex'
11+
12+
const store = new Vuex.Store({ ...options })
13+
```
14+
15+
## Options du constructeur de `Vuex.Store`
16+
17+
### state
18+
19+
- type : `Object | Function`
20+
21+
L'objet d'état racine pour le store Vuex. [Plus de détails](../guide/state.md)
22+
23+
Si vous passez une fonction qui retourne un objet, l'objet retourné est utilisé en tant qu'état racine. Ceci est utile quand vous voulez réutiliser un objet d'état surtout dans un cas de réutilisation de module. [Plus de détails](../guide/modules.md#réutiliser-un-module)
24+
25+
### mutations
26+
27+
- type : `{ [type: string]: Function }`
28+
29+
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.
30+
31+
[Plus de détails](../guide/mutations.md)
32+
33+
### actions
34+
35+
- type : `{ [type: string]: Function }`
36+
37+
Enregistrer les actions sur le store. La fonction gestionnaire reçoit un objet `context` qui expose les propriétés suivantes :
38+
39+
``` js
40+
{
41+
state, // identique à `store.state`, ou à l'état local si dans des modules
42+
rootState, // identique à `store.state`, seulement dans des modules
43+
commit, // identique à `store.commit`
44+
dispatch, // identique à `store.dispatch`
45+
getters, // identique à `store.getters`, ou les accesseurs locaux dans les modules
46+
rootGetters // identique à `store.getters`, seulement dans les modules
47+
}
48+
```
49+
50+
[Plus de détails](../guide/actions.md)
51+
52+
### getters
53+
54+
- type : `{ [key: string]: Function }`
55+
56+
Enregistrer les accesseurs sur le store. La fonction accesseur reçoit les arguments suivants :
57+
58+
```
59+
state, // sera l'état local du module si défini dans un module.
60+
getters // identique à `store.getters`
61+
```
62+
63+
Arguments spécifiques quand défini dans un module
64+
65+
```
66+
state, // sera l'état local du module si défini dans un module.
67+
getters, // module local getters of the current module
68+
rootState, // état global
69+
rootGetters // tous les accesseurs
70+
```
71+
72+
Les accesseurs enregistrés sont exposés sur `store.getters`.
73+
74+
[Plus de détails](../guide/getters.md)
75+
76+
### modules
77+
78+
- type : `Object`
79+
80+
Un objet contenant des sous-modules qui seront regroupés dans le store, sous la forme suivante :
81+
82+
``` js
83+
{
84+
key: {
85+
state,
86+
namespaced?,
87+
mutations?,
88+
actions?,
89+
getters?,
90+
modules?
91+
},
92+
...
93+
}
94+
```
95+
96+
Chaque module peut contenir `state` et `mutations`, tout comme les options racines. 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.
97+
98+
[Plus de détails](../guide/modules.md)
99+
100+
### plugins
101+
102+
- type : `Array<Function>`
103+
104+
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 persistance de données, les logs ou le débogage) ou propager des mutations (pour les données internes, c.-à-d. websockets ou observables).
105+
106+
[Plus de détails](../guide/plugins.md)
107+
108+
### strict
109+
110+
- type : `Boolean`
111+
- default: `false`
112+
113+
Force le store Vuex en mode strict. En mode strict, toute mutation de l'état en dehors des gestionnaires de mutation lancera une erreur.
114+
115+
[Plus de détails](../guide/strict.md)
116+
117+
## Propriétés d'instance de `Vuex.Store`
118+
119+
### state
120+
121+
- type : `Object`
122+
123+
L'état racine. Lecture seule.
124+
125+
### getters
126+
127+
- type : `Object`
128+
129+
Expose les accesseurs enregistrés. Lecture seule.
130+
131+
## Méthodes d'instance de `Vuex.Store`
132+
133+
### commit
134+
135+
- `commit(type: string, payload?: any, options?: Object)`
136+
- `commit(mutation: Object, options?: Object)`
137+
138+
Acter une mutation. `options` peut avoir `root: true` ce qui permet d'acter des mutations racines dans des [modules sous espace de nom](../guide/modules.md#namespacing). [Plus de détails](../guide/mutations.md)
139+
140+
### dispatch
141+
142+
- `dispatch(type: string, payload?: any, options?: Object)`
143+
- `dispatch(action: Object, options?: Object)`
144+
145+
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. [Plus de détails](../guide/actions.md)
146+
147+
### replaceState
148+
149+
- `replaceState(state: Object)`
150+
151+
Remplacer l'état racine du store. Utiliser seulement pour hydrater l'état ou dans le but de voyager dans le temps.
152+
153+
### watch
154+
155+
- `watch(getter: Function, cb: Function, options?: Object)`
156+
157+
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 en premier argument, et les accesseurs en second argument. Accepte un objet optionnel d'options qui prend les mêmes options que la méthode `vm.$watch` de Vue.
158+
159+
Pour arrêter d'observer, appeler la fonction gestionnaire retournée.
160+
161+
### subscribe
162+
163+
- `subscribe(handler: Function)`
164+
165+
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 :
166+
167+
``` js
168+
store.subscribe((mutation, state) => {
169+
console.log(mutation.type)
170+
console.log(mutation.payload)
171+
})
172+
```
173+
174+
Utilisé plus communément dans les plugins. [Plus de détails](../guide/plugins.md)
175+
176+
### subscribeAction
177+
178+
- `subscribeAction(handler: Function)`
179+
180+
> Nouveau dans la 2.5.0+
181+
182+
S'abonner au actions du store. Le `handler` est appelé pour chaque action propagée et reçoit chaque description d'action et l'état du store courant en arguments :
183+
184+
``` js
185+
store.subscribeAction((action, state) => {
186+
console.log(action.type)
187+
console.log(action.payload)
188+
})
189+
```
190+
191+
Souvent utiliser dans les plugins. [Pour plus de détails](../guide/plugins.md)
192+
193+
### registerModule
194+
195+
- `registerModule(path: string | Array<string>, module: Module, options?: Object)`
196+
197+
Enregistrer un module dynamique. [Plus de détails](../guide/modules.md#enregistrement-dynamique-de-module)
198+
199+
`options` peut avoir `preserveState: true` qui lui permet de préserver l'état précédent. Utile pour du rendu côté serveur.
200+
201+
### unregisterModule
202+
203+
- `unregisterModule(path: string | Array<string>)`
204+
205+
Supprimer un module dynamique. [Plus de détails](../guide/modules.md#enregistrement-dynamique-de-module)
206+
207+
### hotUpdate
208+
209+
- `hotUpdate(newOptions: Object)`
210+
211+
Remplacement à la volée des nouvelles actions et mutations. [Plus de détails](../guide/hot-reload.md)
212+
213+
## Fonctions utilitaires d'attachement au composant
214+
215+
### mapState
216+
217+
- `mapState(namespace?: string, map: Array<string> | Object): Object`
218+
219+
Créer des propriétés calculées qui retournent le sous-arbre du store Vuex au composant. [Plus de détails](../guide/state.md#le-helper-mapstate)
220+
221+
Le premier argument peut être de façon optionnelle une chaine d'espace de nom. [Plus de détails](../guide/modules.md#Fonctions-utilitaires-liées-avec-espace-de-nom)
222+
223+
### mapGetters
224+
225+
- `mapGetters(namespace?: string, map: Array<string> | Object): Object`
226+
227+
Créer des propriétés calculées qui retournent la valeur calculée d'un accesseur. [Plus de détails](../guide/getters.md#la-function-utilitaire-mapgetters)
228+
229+
Le premier argument peut être de façon optionnelle une chaine d'espace de nom. [Plus de détails](../guide/modules.md#Fonctions-utilitaires-liées-avec-espace-de-nom)
230+
231+
### mapActions
232+
233+
- `mapActions(namespace?: string, map: Array<string> | Object): Object`
234+
235+
Créer des méthodes de composant qui propagent une action. [Plus de détails](../guide/actions.md#propager-des-actions-dans-les-composants)
236+
237+
Le premier argument peut être de façon optionnelle une chaine d'espace de nom. [Plus de détails](../guide/modules.md#Fonctions-utilitaires-liées-avec-espace-de-nom)
238+
239+
### mapMutations
240+
241+
- `mapMutations(namespace?: string, map: Array<string> | Object): Object`
242+
243+
Créer des méthodes de composant qui actent une mutation. [Plus de détails](../guide/mutations.md#acter-des-mutations-dans-les-composants)
244+
245+
Le premier argument peut être de façon optionnelle une chaine d'espace de nom. [Plus de détails](../guide/modules.md#Fonctions-utilitaires-liées-avec-espace-de-nom)
246+
247+
### createNamespacedHelpers
248+
249+
- `createNamespacedHelpers(namespace: string): Object`
250+
251+
Créer des fonctions utilitaires liées avec espace de nom. L'objet retourné contient `mapState`, `mapGetters`, `mapActions` et `mapMutations` qui sont liées à l'espace de nom fourni. [Plus de détails](../guide/modules.md#fonctions-utilitaires-liées-avec-espace-de-nom)

0 commit comments

Comments
 (0)