diff --git a/docs/en/SUMMARY.md b/docs/en/SUMMARY.md index a55a22376..bfc445d35 100644 --- a/docs/en/SUMMARY.md +++ b/docs/en/SUMMARY.md @@ -1,24 +1,24 @@ # Vuex -> Note: This is docs for vuex@2.x. +> Note : Ceci est la documentation pour vuex@2.x. -- [Looking for 1.0 Docs?](https://github.com/vuejs/vuex/tree/1.0/docs) -- [Release Notes](https://github.com/vuejs/vuex/releases) +- [Vous cherchez la documentation de la v1.0 ?](https://github.com/vuejs/vuex/tree/1.0/docs) +- [Notes de version](https://github.com/vuejs/vuex/releases) - [Installation](installation.md) -- [What is Vuex?](intro.md) -- [Getting Started](getting-started.md) -- Core Concepts - - [State](state.md) - - [Getters](getters.md) +- [Vuex, qu'est-ce que c'est ?](intro.md) +- [Pour commencer](getting-started.md) +- Concepts de base + - [État](state.md) + - [Accesseurs](getters.md) - [Mutations](mutations.md) - [Actions](actions.md) - [Modules](modules.md) -- [Application Structure](structure.md) +- [Structure d'une application](structure.md) - [Plugins](plugins.md) -- [Strict Mode](strict.md) -- [Form Handling](forms.md) -- [Testing](testing.md) -- [Hot Reloading](hot-reload.md) -- [API Reference](api.md) +- [Mode strict](strict.md) +- [Gestion des formulaires](forms.md) +- [Tests](testing.md) +- [Rechargement à chaud](hot-reload.md) +- [Documentation de l'API](api.md) diff --git a/docs/en/actions.md b/docs/en/actions.md index 43f87d784..8eb68d444 100644 --- a/docs/en/actions.md +++ b/docs/en/actions.md @@ -1,11 +1,11 @@ # Actions -Actions are similar to mutations, the differences being that: +Les actions sont similaires aux mutations, à la différence que : -- Instead of mutating the state, actions commit mutations. -- Actions can contain arbitrary asynchronous operations. +- Au lieu de modifier l'état, les actions actent des mutations. +- Les actions peuvent contenir des opérations asynchrones. -Let's register a simple action: +Enregistrons une simple action : ``` js const store = new Vuex.Store({ @@ -25,9 +25,9 @@ const store = new Vuex.Store({ }) ``` -Action handlers receive a context object which exposes the same set of methods/properties on the store instance, so you can call `context.commit` to commit a mutation, or access the state and getters via `context.state` and `context.getters`. We will see why this context object is not the store instance itself when we introduce [Modules](modules.md) later. +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. -In practice, we often use ES2015 [argument destructuring](https://github.com/lukehoban/es6features#destructuring) to simplify the code a bit (especially when we need to call `commit` multiple times): +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: { @@ -37,15 +37,15 @@ actions: { } ``` -### Dispatching Actions +### Propager des actions dans les composants -Actions are triggered with the `store.dispatch` method: +Les actions sont déclenchées par la méthode `store.dispatch` : ``` js store.dispatch('increment') ``` -This may look dumb at first sight: if we want to increment the count, why don't we just call `store.commit('increment')` directly? Well, remember that **mutations must be synchronous**? Actions don't. We can perform **asynchronous** operations inside an action: +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 : ``` js actions: { @@ -57,48 +57,48 @@ actions: { } ``` -Actions support the same payload format and object-style dispatch: +Les actions prennent également en charge les paramètres additionnels (« payload ») et les objets pour propager : ``` js -// dispatch with a payload +// propager avec un paramètre additionnel store.dispatch('incrementAsync', { amount: 10 }) -// dispatch with an object +// propager avec un objet store.dispatch({ type: 'incrementAsync', amount: 10 }) ``` -A more practical example of real-world actions would be an action to checkout a shopping cart, which involves **calling an async API** and **committing multiple 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) { - // save the items currently in the cart + // sauvegarder les articles actuellement dans le panier const savedCartItems = [...state.cart.added] - // send out checkout request, and optimistically - // clear the cart + // envoyer la requête de checkout, + // et vider le panier commit(types.CHECKOUT_REQUEST) - // the shop API accepts a success callback and a failure callback + // 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) ) } } ``` -Note we are performing a flow of asynchronous operations, and recording the side effects (state mutations) of the action by committing them. +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. -### Dispatching Actions in Components +### Propager des actions dans les composants -You can dispatch actions in components with `this.$store.dispatch('xxx')`, or use the `mapActions` helper which maps component methods to `store.dispatch` calls (requires root `store` injection): +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' @@ -107,23 +107,23 @@ export default { // ... methods: { ...mapActions([ - 'increment', // map `this.increment()` to `this.$store.dispatch('increment')` - - // `mapActions` also supports payloads: - 'incrementBy' // map `this.incrementBy(amount)` to `this.$store.dispatch('incrementBy', amount)` + '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' // map `this.add()` to `this.$store.dispatch('increment')` + add: 'increment' // attacher `this.add()` à `this.$store.dispatch('increment')` }) } } ``` -### Composing Actions +### Composer les actions -Actions are often asynchronous, so how do we know when an action is done? And more importantly, how can we compose multiple actions together to handle more complex async flows? +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 ? -The first thing to know is that `store.dispatch` can handle Promise returned by the triggered action handler and it also returns 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: { @@ -138,7 +138,7 @@ actions: { } ``` -Now you can do: +Maintenant vous pouvez faire : ``` js store.dispatch('actionA').then(() => { @@ -146,7 +146,7 @@ store.dispatch('actionA').then(() => { }) ``` -And also in another action: +Et également dans une autre action : ``` js actions: { @@ -159,20 +159,20 @@ actions: { } ``` -Finally, if we make use of [async / await](https://tc39.github.io/ecmascript-asyncawait/), a JavaScript feature landing very soon, we can compose our actions like this: +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 -// assuming `getData()` and `getOtherData()` return 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()) } } ``` -> It's possible for a `store.dispatch` to trigger multiple action handlers in different modules. In such a case the returned value will be a Promise that resolves when all triggered handlers have been resolved. +> 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. diff --git a/docs/en/api.md b/docs/en/api.md index e7ac2320e..eb0b2034c 100644 --- a/docs/en/api.md +++ b/docs/en/api.md @@ -1,6 +1,6 @@ -# API Reference +# Documentation de l'API -### Vuex.Store +### `Vuex.Store` ``` js import Vuex from 'vuex' @@ -8,71 +8,71 @@ import Vuex from 'vuex' const store = new Vuex.Store({ ...options }) ``` -### Vuex.Store Constructor Options +### Options du constructeur de `Vuex.Store` - **state** - - type: `Object` + - type : `Object` - The root state object for the Vuex store. + L'objet d'état racine pour le store Vuex. - [Details](state.md) + [Détails](state.md) - **mutations** - - type: `{ [type: string]: Function }` + - type : `{ [type: string]: Function }` - Register mutations on the store. The handler function always receives `state` as the first argument (will be module local state if defined in a module), and receives a second `payload` argument if there is one. + 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. - [Details](mutations.md) + [Détails](mutations.md) - **actions** - - type: `{ [type: string]: Function }` + - type : `{ [type: string]: Function }` - Register actions on the store. The handler function receives a `context` object that exposes the following properties: + Enregistrer les actions sur le store. La fonction gestionnaire reçoit un objet `context` qui expose les propriétés suivantes : ``` js { - state, // same as store.state, or local state if in modules - rootState, // same as store.state, only in modules - commit, // same as store.commit - dispatch, // same as store.dispatch - getters // same as 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` } ``` - [Details](actions.md) + [Détails](actions.md) - **getters** - - type: `{ [key: string]: Function }` + - type : `{ [key: string]: Function }` - Register getters on the store. The getter function receives the following arguments: + Enregistrer les accesseurs sur le store. La fonction accesseur reçoit les arguments suivants : ``` - state, // will be module local state if defined in a module. - getters // same as store.getters + state, // sera l'état local du module si défini dans un module. + getters // indentique à `store.getters` ``` - Specific when defined in a module + Arguments spécifiques quand défini dans un module ``` - state, // will be module local state if defined in a module. + state, // sera l'état local du module si défini dans un module. getters, // module local getters of the current module - rootState, // global state - rootGetters // all getters + rootState, // état global + rootGetters // tous les accesseurs ``` - Registered getters are exposed on `store.getters`. + Les accesseurs enregistrés sont exposés sur `store.getters`. - [Details](getters.md) + [Détails](getters.md) - **modules** - - type: `Object` + - type : `Object` - An object containing sub modules to be merged into the store, in the shape of: + Un objet contenant des sous-modules qui seront regroupés dans le store, sous la forme suivante : ``` js { @@ -88,64 +88,64 @@ const store = new Vuex.Store({ ...options }) } ``` - Each module can contain `state` and `mutations` similar to the root options. A module's state will be attached to the store's root state using the module's key. A module's mutations and getters will only receives the module's local state as the first argument instead of the root state, and module actions' `context.state` will also point to the local state. + 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. - [Details](modules.md) + [Détails](modules.md) - **plugins** - - type: `Array` + - type : `Array` - An array of plugin functions to be applied to the store. The plugin simply receives the store as the only argument and can either listen to mutations (for outbound data persistence, logging, or debugging) or dispatch mutations (for inbound data e.g. websockets or 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). - [Details](plugins.md) + [Détails](plugins.md) - **strict** - - type: `Boolean` + - type : `Boolean` - default: `false` - Force the Vuex store into strict mode. In strict mode any mutations to Vuex state outside of mutation handlers will throw an 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. - [Details](strict.md) + [Détails](strict.md) -### Vuex.Store Instance Properties +### Propriétés d'instance de `Vuex.Store` - **state** - - type: `Object` + - type : `Object` - The root state. Read only. + L'état racine. Lecture seule. - **getters** - - type: `Object` + - type : `Object` - Exposes registered getters. Read only. + Expose les accesseurs enregistrés. Lecture seule. -### Vuex.Store Instance Methods +### Méthodes d'instance de `Vuex.Store` - **`commit(type: string, payload?: any, options?: Object) | commit(mutation: Object, options?: Object)`** - Commit a mutation. `options` can have `root: true` that allows to commit root mutations in [namespaced modules](modules.md#namespacing). [Details](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, options?: Object) | dispatch(action: Object, options?: Object)`** +- **`dispatch(type : string, payload?: any, options?: Object) | dispatch(action: Object, options?: Object)`** - Dispatch an action. `options` can have `root: true` that allows to dispatch root actions in [namespaced modules](modules.md#namespacing). Returns a Promise that resolves all triggered action handlers. [Details](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)`** - Replace the store's root state. Use this only for state hydration / time-travel purposes. + 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)`** - Reactively watch a getter function's return value, and call the callback when the value changes. The getter receives the store's state as the only argument. Accepts an optional options object that takes the same options as Vue's `vm.$watch` method. + 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. - To stop watching, call the returned handle function. + Pour arrêter d'observer, appeler la fonction gestionnaire retournée. - **`subscribe(handler: Function)`** - Subscribe to store mutations. The `handler` is called after every mutation and receives the mutation descriptor and post-mutation state as 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) => { @@ -154,42 +154,42 @@ const store = new Vuex.Store({ ...options }) }) ``` - Most commonly used in plugins. [Details](plugins.md) + Utilisé plus communément dans les plugins. [Détails](plugins.md) - **`registerModule(path: string | Array, module: Module)`** - Register a dynamic module. [Details](modules.md#dynamic-module-registration) + Enregistrer un module dynamique. [Détails](modules.md#enregistrement-dynamique-de-module) - **`unregisterModule(path: string | Array)`** - Unregister a dynamic module. [Details](modules.md#dynamic-module-registration) + Supprimer un module dynamique. [Détails](modules.md#enregistrement-dynamique-de-module) - **`hotUpdate(newOptions: Object)`** - Hot swap new actions and mutations. [Details](hot-reload.md) + Remplacement à la volée des nouvelles actions et mutations. [Détails](hot-reload.md) -### Component Binding Helpers +### Fonctions utilitaires d'attachement au composant - **`mapState(namespace?: string, map: Array | Object): Object`** - Create component computed options that return the sub tree of the Vuex store. [Details](state.md#the-mapstate-helper) + 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) - The first argument can optionally be a namespace string. [Details](modules.md#binding-helpers-with-namespace) + 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 | Object): Object`** - Create component computed options that return the evaluated value of a getter. [Details](getters.md#the-mapgetters-helper) + 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) - The first argument can optionally be a namespace string. [Details](modules.md#binding-helpers-with-namespace) + 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) - **`mapActions(namespace?: string, map: Array | Object): Object`** - Create component methods options that dispatch an action. [Details](actions.md#dispatching-actions-in-components) + Créer des méthodes de composant qui propagent une action. [Détails](actions.md#propager-des-actions-dans-les-composants) - The first argument can optionally be a namespace string. [Details](modules.md#binding-helpers-with-namespace) + 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) - **`mapMutations(namespace?: string, map: Array | Object): Object`** - Create component methods options that commit a mutation. [Details](mutations.md#commiting-mutations-in-components) + Créer des méthodes de composant qui actent une mutation. [Détails](mutations.md#acter-des-mutations-dans-les-composants) - The first argument can optionally be a namespace string. [Details](modules.md#binding-helpers-with-namespace) + 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) diff --git a/docs/en/book.json b/docs/en/book.json index 6e622745c..428c98162 100644 --- a/docs/en/book.json +++ b/docs/en/book.json @@ -4,7 +4,7 @@ "pluginsConfig": { "edit-link": { "base": "https://github.com/vuejs/vuex/tree/dev/docs", - "label": "Edit This Page" + "label": "Éditer cette page" }, "github": { "url": "https://github.com/vuejs/vuex/" diff --git a/docs/en/forms.md b/docs/en/forms.md index 3158c9cb2..f304def1c 100644 --- a/docs/en/forms.md +++ b/docs/en/forms.md @@ -1,14 +1,14 @@ -# Form Handling +# Gestion des formulaires -When using Vuex in strict mode, it could be a bit tricky to use `v-model` on a piece of state that belongs to Vuex: +Lorsque l'on utilise Vuex en mode strict, il peut être compliqué d'utiliser `v-model` sur une partie de l'état qui appartient à Vuex : ``` html ``` -Assuming `obj` is a computed property that returns an Object from the store, the `v-model` here will attempt to directly mutate `obj.message` when the user types in the input. In strict mode, this will result in an error because the mutation is not performed inside an explicit Vuex mutation handler. +Supposons que `obj` est une propriété calculée qui retourne un objet depuis le store, le `v-model` tentera de muter directement `obj.message` lorsque l'utilisateur saisit du texte dans le champ. En mode strict, cela produira une erreur car la mutation n'est pas effectuée dans un gestionnaire de mutation Vuex explicite. -The "Vuex way" to deal with it is binding the ``'s value and call an action on the `input` or `change` event: +La « méthode Vuex » pour gérer ça est de lier la valeur de l'`input` et d'appeler une action sur l'évènement `input` ou `change` : ``` html @@ -27,7 +27,7 @@ methods: { } ``` -And here's the mutation handler: +Et voici le gestionnaire de mutation : ``` js // ... @@ -38,9 +38,9 @@ mutations: { } ``` -### Two-way Computed Property +### Propriété calculée bidirectionnelle -Admittedly, the above is quite a bit more verbose than `v-model` + local state, and we lose some of the useful features from `v-model` as well. An alternative approach is using a two-way computed property with a setter: +Admettons tout de même que l'exemple ci-dessus est plus verbeux que le `v-model` couplé à l'état local (tout en perdant quelques fonctionnalités pratiques de `v-model` au passage). Une approche alternative consiste à utiliser une propriété calculée bidirectionnelle avec un mutateur : ``` html @@ -58,4 +58,3 @@ computed: { } } ``` - diff --git a/docs/en/getters.md b/docs/en/getters.md index 7531c311a..826bac3dc 100644 --- a/docs/en/getters.md +++ b/docs/en/getters.md @@ -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 l'état du store, par exemple pour filtrer une liste d'éléments et les compter : ``` js computed: { @@ -10,11 +10,11 @@ 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 une fonction utilitaire séparée et l'importer aux endroits nécessaires. Les deux idées sont loin d'être idéales. -Vuex allows us to define "getters" in the store. You can think of them as computed properties for stores. Like computed properties, a getter's result is cached based on its dependencies, and will only re-evaluate when some of its dependencies have changed. +Vuex nous permet de définir des accesseurs (« getters ») dans le store. Voyez-les comme les propriétés calculées des stores. Comme pour les propriétés calculées, le résultat de l'accesseur est mis en cache en se basant sur ses dépendances et il ne sera ré-évalué quand l'une de ses dépendances aura changé. -Getters will receive the state as their 1st argument: +Les accesseurs prennent l'état en premier argument : ``` js const store = new Vuex.Store({ @@ -32,13 +32,13 @@ const store = new Vuex.Store({ }) ``` -The getters will be exposed on the `store.getters` object: +Les accesseurs seront exposés sur l'objet `store.getters` : ``` js store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }] ``` -Getters will also receive other getters as the 2nd argument: +Les accesseurs recevront également les autres accesseurs en second argument : ``` js getters: { @@ -53,7 +53,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: { @@ -63,7 +63,7 @@ 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: +Vous pouvez aussi passer des arguments aux accesseurs en retournant une fonction. Cela est particulièrement utile quand vous souhaitez interroger un tableau dans le store : ```js getters: { @@ -78,10 +78,9 @@ getters: { store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false } ``` +### La fonction utilitaire `mapGetters` -### The `mapGetters` Helper - -The `mapGetters` helper simply maps store getters to local computed properties: +La fonction utilitaire `mapGetters` attache simplement vos accesseurs du store aux propriétés calculées locales : ``` js import { mapGetters } from 'vuex' @@ -89,7 +88,7 @@ import { mapGetters } from 'vuex' export default { // ... computed: { - // mix the getters into computed with object spread operator + // rajouter les accesseurs dans `computed` avec l'opérateur de décomposition ...mapGetters([ 'doneTodosCount', 'anotherGetter', @@ -99,11 +98,11 @@ export default { } ``` -If you want to map a getter to a different name, use an object: +Si vous voulez attacher un accesseur avec un nom différent, utilisez un objet : ``` js ...mapGetters({ - // map `this.doneCount` to `store.getters.doneTodosCount` + // attacher `this.doneCount` à `store.getters.doneTodosCount` doneCount: 'doneTodosCount' }) ``` diff --git a/docs/en/getting-started.md b/docs/en/getting-started.md index 4312f3c4e..63437ecd2 100644 --- a/docs/en/getting-started.md +++ b/docs/en/getting-started.md @@ -1,19 +1,19 @@ -# Getting Started +# Pour commencer -At the center of every Vuex application is the **store**. A "store" is basically a container that holds your application **state**. There are two things that make a Vuex store different from a plain global object: +Au cœur de chaque application Vuex, il y a la **zone de stockage (« store »)**. Un « store » est tout simplement un conteneur avec l'**état (« state »)** de votre application. Il y a deux choses qui différencient un store Vuex d'un simple objet global : -1. Vuex stores are reactive. When Vue components retrieve state from it, they will reactively and efficiently update if the store's state changes. +1. Les stores Vuex sont réactifs. Quand les composants Vue y récupèrent l'état, ils se mettront à jour de façon réactive et efficace si l'état du store a changé. -2. You cannot directly mutate the store's state. The only way to change a store's state is by explicitly **committing mutations**. This ensures every state change leaves a track-able record, and enables tooling that helps us better understand our applications. +2. Vous ne pouvez pas muter directement l'état du store. La seule façon de modifier l'état d'un store est d'**acter (« commit »)** explicitement des **mutations**. Cela assure que chaque état laisse un enregistrement traçable, et permet à des outils de nous aider à mieux appréhender nos applications. -### The Simplest Store +### Le store le plus simple -> **NOTE:** We will be using ES2015 syntax for code examples for the rest of the docs. If you haven't picked it up, [you should](https://babeljs.io/docs/learn-es2015/)! +> **NOTE:** Nous allons utiliser la syntaxe ES2015 dans les exemples de code pour le reste de la documentation. Si vous ne vous êtes pas encore penché dessus, [vous devriez](https://babeljs.io/docs/learn-es2015/) ! -After [installing](installation.md) Vuex, let's create a store. It is pretty straightforward - just provide an initial state object, and some mutations: +Après [avoir installé](installation.md) Vuex, nous allons créer un store. C'est assez simple ; définissez juste un objet d'état initial et quelques mutations : ``` js -// Make sure to call Vue.use(Vuex) first if using a module system +// Assurez vous d'appeler `Vuex.use(Vuex)` en premier lieu si vous utilisez un système de module const store = new Vuex.Store({ state: { @@ -27,7 +27,7 @@ const store = new Vuex.Store({ }) ``` -Now, you can access the state object as `store.state`, and trigger a state change with the `store.commit` method: +Maintenant, vous pouvez accéder à l'objet d'état avec `store.state`, et déclencher un changement d'état avec la méthode `store.commit` : ``` js store.commit('increment') @@ -35,10 +35,10 @@ store.commit('increment') console.log(store.state.count) // -> 1 ``` -Again, the reason we are committing a mutation instead of changing `store.state.count` directly, is because we want to explicitly track it. This simple convention makes your intention more explicit, so that you can reason about state changes in your app better when reading the code. In addition, this gives us the opportunity to implement tools that can log every mutation, take state snapshots, or even perform time travel debugging. +Encore une fois, la raison pour laquelle nous actons une mutation au lieu de modifier `store.state.count` directement, c'est parce que nous voulons le tracer explicitement. Cette simple convention rend votre intention plus explicite, ainsi vous pouvez raisonner plus facilement les les changements d'état en lisant votre code. De plus, cela nous donne l'opportunité d'implémenter des outils qui peuvent enregistrer chaque mutation, prendre des instantanés de l'état, ou même procéder à de la visualisation d'état dans le temps. -Using store state in a component simply involves returning the state within a computed property, because the store state is reactive. Triggering changes simply means committing mutations in component methods. +Utiliser l'état du store dans un composant implique simplement de retourner l'état dans une *propriété calculée*, car l'état du store est réactif. Déclencher des changements signifie simplement d'acter des mutations dans les méthodes du composant. -Here's an example of the [most basic Vuex counter app](https://jsfiddle.net/n9jmu5v7/1269/). +Voici un exemple de l'[application de comptage Vuex la plus basique](https://jsfiddle.net/n9jmu5v7/1269/). -Next, we will discuss each core concept in much finer details, starting with [State](state.md). +Ensuite, nous allons examiner chaque concept de base plus en détails, et commençons avec l'[État](state.md). diff --git a/docs/en/hot-reload.md b/docs/en/hot-reload.md index da59f2bbf..53adcd7f4 100644 --- a/docs/en/hot-reload.md +++ b/docs/en/hot-reload.md @@ -1,8 +1,8 @@ -# Hot Reloading +# Rechargement à chaud -Vuex supports hot-reloading mutations, modules, actions and getters during development, using webpack's [Hot Module Replacement API](https://webpack.github.io/docs/hot-module-replacement.html). You can also use it in Browserify with the [browserify-hmr](https://github.com/AgentME/browserify-hmr/) plugin. +Vuex prend en charge le rechargement à chaud des mutations, modules, actions et accesseurs durant le développement, en utilisant l'[API du module de remplacement à chaud](https://webpack.github.io/docs/hot-module-replacement.html) de webpack. Vous pouvez également utiliser Browserify avec le plugin [browserify-hmr](https://github.com/AgentME/browserify-hmr/). -For mutations and modules, you need to use the `store.hotUpdate()` API method: +Pour les mutations et les modules, vous aurez besoin d'utiliser la méthode d'API `store.hotUpdate()` : ``` js // store.js @@ -24,13 +24,13 @@ const store = new Vuex.Store({ }) if (module.hot) { - // accept actions and mutations as hot modules + // accepter les actions et mutations en tant que module à chaud module.hot.accept(['./mutations', './modules/a'], () => { - // require the updated modules - // have to add .default here due to babel 6 module output + // requiert les modules à jour + // ajout de `.default` ici pour les sorties des modules babel 6 const newMutations = require('./mutations').default const newModuleA = require('./modules/a').default - // swap in the new actions and mutations + // remplacer les nouvelles actions et mutations store.hotUpdate({ mutations: newMutations, modules: { @@ -41,4 +41,4 @@ if (module.hot) { } ``` -Checkout the [counter-hot example](https://github.com/vuejs/vuex/tree/dev/examples/counter-hot) to play with hot-reload. +Jetez un œil à [l'exemple counter-hot](https://github.com/vuejs/vuex/tree/dev/examples/counter-hot) pour jouer avec du rechargement à chaud. diff --git a/docs/en/images/flow.png b/docs/en/images/flow.png index fd9b97d59..acbaf4119 100644 Binary files a/docs/en/images/flow.png and b/docs/en/images/flow.png differ diff --git a/docs/en/images/vuex.png b/docs/en/images/vuex.png index 018129947..82b9900d8 100644 Binary files a/docs/en/images/vuex.png and b/docs/en/images/vuex.png differ diff --git a/docs/en/installation.md b/docs/en/installation.md index 42d567dda..508cdaef9 100644 --- a/docs/en/installation.md +++ b/docs/en/installation.md @@ -1,14 +1,14 @@ # Installation -### Direct Download / CDN +### Téléchargement direct / CDN [https://unpkg.com/vuex](https://unpkg.com/vuex) -[Unpkg.com](https://unpkg.com) provides NPM-based CDN links. The above link will always point to the latest release on NPM. You can also use a specific version/tag via URLs like `https://unpkg.com/vuex@2.0.0`. +[Unpkg.com](https://unpkg.com) fournit des liens CDN basés sur NPM. Le lien ci-dessus pointera toujours vers la dernière release sur NPM. Vous pouvez aussi utiliser un tag ou une version spécifique via une URL comme `https://unpkg.com/vuex@2.0.0`. -Include `vuex` after Vue and it will install itself automatically: +Incluez `vuex` après Vue et l'installation sera automatique : ``` html @@ -27,7 +27,7 @@ npm install vuex --save yarn add vuex ``` -When used with a module system, you must explicitly install Vuex via `Vue.use()`: +Lorsqu'il est utilisé avec un système de module, vous devez explicitement installer Vuex via `Vue.use()`: ``` js import Vue from 'vue' @@ -36,12 +36,11 @@ import Vuex from 'vuex' Vue.use(Vuex) ``` -You don't need to do this when using global script tags. +Vous n'avez pas besoin de faire cela lors de l'utilisation des balises de script globales (`