Traduction de modules.md

docs/en/modules.md

@@ -1,8 +1,8 @@
 # Modules
 
-Due to using a single state tree, all state of our application is contained inside one big object. However, as our application grows in scale, the store can get really bloated.
+Parce qu'il utilise un _single state tree_, tout le state de notre application est contenu dans un seul et même gros objet. Cependant, au fur et à mesure que notre application grandit, le store peut devenir très engorgé.
 
-To help with that, Vuex allows us to divide our store into **modules**. Each module can contain its own state, mutations, actions, getters, and even nested modules - it's fractal all the way down:
+Pour y remédier, Vuex nous permet de diviser notre store en **modules**. Chaque module peut contenir son propre state, mutations, actions, getters, et même d'autres modules.
 
 ``` js
 const moduleA = {
@@ -25,20 +25,20 @@ const store = new Vuex.Store({
   }
 })
 
-store.state.a // -> moduleA's state
-store.state.b // -> moduleB's state
+store.state.a // -> le state du module A
+store.state.b // -> le state du module B
 ```
 
-### Module Local State
+### State local d'un module
 
-Inside a module's mutations and getters, the first argument received will be **the module's local state**.
+Dans les mutations et getters d'un module, le premier argument reçu sera le **state local du module**.
 
 ``` js
 const moduleA = {
   state: { count: 0 },
   mutations: {
     increment (state) {
-      // state is the local module state
+      // state est le state du module local
       state.count++
     }
   },
@@ -51,7 +51,7 @@ const moduleA = {
 }
 ```
 
-Similarly, inside module actions, `context.state` will expose the local state, and root state will be exposed as `context.rootState`:
+De façon similaire, dans les actions du module, `context.state` exposera le state local, et le state racine sera disponible avec `context.rootState` :
 
 ``` js
 const moduleA = {
@@ -66,7 +66,7 @@ const moduleA = {
 }
 ```
 
-Also, inside module getters, the root state will be exposed as their 3rd argument:
+Également, dans les getters du module, le state racine sera exposé en troisième argument :
 
 ``` js
 const moduleA = {
@@ -81,187 +81,58 @@ const moduleA = {
 
 ### Namespacing
 
-By default, actions, mutations and getters inside modules are still registered under the **global namespace** - this allows multiple modules to react to the same mutation/action type.
-
-If you want your modules to be more self-contained or reusable, you can mark it as namespaced with `namespaced: true`. When the module is registered, all of its getters, actions and mutations will be automatically namespaced based on the path the module is registered at. For example:
+Notez que les actions, mutations et getters dans un module sont toujours enregistrés sous le **namespace global** — cela permet à plusieurs modules de réagir au même type de mutation/action. Vous pouvez répartir les modules dans des namespaces vous-mêmes afin d'éviter les conflits de nom en préfixant ou suffixant leurs noms. Et vous devriez probablement faire cela si vous utiliser un module Vuex réutilisable qui sera utilisé dans des environnements inconnus. Par exemple, nous voulons créer un module `todos` :
 
 ``` js
-const store = new Vuex.Store({
-  modules: {
-    account: {
-      namespaced: true,
-
-      // module assets
-      state: { ... }, // module state is already nested and not affected by namespace option
-      getters: {
-        isAdmin () { ... } // -> getters['account/isAdmin']
-      },
-      actions: {
-        login () { ... } // -> dispatch('account/login')
-      },
-      mutations: {
-        login () { ... } // -> commit('account/login')
-      },
+// types.js
 
-      // nested modules
-      modules: {
-        // inherits the namespace from parent module
-        myPage: {
-          state: { ... },
-          getters: {
-            profile () { ... } // -> getters['account/profile']
-          }
-        },
-
-        // further nest the namespace
-        posts: {
-          namespaced: true,
-
-          state: { ... },
-          getters: {
-            popular () { ... } // -> getters['account/posts/popular']
-          }
-        }
-      }
-    }
-  }
-})
+// on définit les noms des getters, actions et mutations en tant que constantes
+// et on les préfixe du nom du module `todos`
+export const DONE_COUNT = 'todos/DONE_COUNT'
+export const FETCH_ALL = 'todos/FETCH_ALL'
+export const TOGGLE_DONE = 'todos/TOGGLE_DONE'
 ```
 
-Namespaced getters and actions will receive localized `getters`, `dispatch` and `commit`. In other words, you can use the module assets without writing prefix in the same module. Toggling between namespaced or not does not affect the code inside the module.
-
-#### Accessing Global Assets in Namespaced Modules
-
-If you want to use global state and getters, `rootState` and `rootGetters` are passed as the 3rd and 4th arguments to getter functions, and also exposed as properties on the `context` object passed to action functions.
-
-To dispatch actions or commit mutations in the global namespace, pass `{ root: true }` as the 3rd argument to `dispatch` and `commit`.
-
 ``` js
-modules: {
-  foo: {
-    namespaced: true,
+// modules/todos.js
+import * as types from '../types'
 
-    getters: {
-      // `getters` is localized to this module's getters
-      // you can use rootGetters via 4th argument of getters
-      someGetter (state, getters, rootState, rootGetters) {
-        getters.someOtherGetter // -> 'foo/someOtherGetter'
-        rootGetters.someOtherGetter // -> 'someOtherGetter'
-      },
-      someOtherGetter: state => { ... }
-    },
+// on définit les getters, actions et mutations en utilisant des noms préfixés
+const todosModule = {
+  state: { todos: [] },
 
-    actions: {
-      // dispatch and commit are also localized for this module
-      // they will accept `root` option for the root dispatch/commit
-      someAction ({ dispatch, commit, getters, rootGetters }) {
-        getters.someGetter // -> 'foo/someGetter'
-        rootGetters.someGetter // -> 'someGetter'
-
-        dispatch('someOtherAction') // -> 'foo/someOtherAction'
-        dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'
-
-        commit('someMutation') // -> 'foo/someMutation'
-        commit('someMutation', null, { root: true }) // -> 'someMutation'
-      },
-      someOtherAction (ctx, payload) { ... }
+  getters: {
+    [types.DONE_COUNT] (state) {
+      // ...
     }
-  }
-}
-```
-
-#### Binding Helpers with Namespace
-
-When binding a namespaced module to components with the `mapState`, `mapGetters`, `mapActions` and `mapMutations` helpers, it can get a bit verbose:
-
-``` js
-computed: {
-  ...mapState({
-    a: state => state.some.nested.module.a,
-    b: state => state.some.nested.module.b
-  })
-},
-methods: {
-  ...mapActions([
-    'some/nested/module/foo',
-    'some/nested/module/bar'
-  ])
-}
-```
-
-In such cases, you can pass the module namespace string as the first argument to the helpers so that all bindings are done using that module as the context. The above can be simplified to:
-
-``` js
-computed: {
-  ...mapState('some/nested/module', {
-    a: state => state.a,
-    b: state => state.b
-  })
-},
-methods: {
-  ...mapActions('some/nested/module', [
-    'foo',
-    'bar'
-  ])
-}
-```
-
-#### Caveat for Plugin Developers
+  },
 
-You may care about unpredictable namespacing for your modules when you create a [plugin](plugins.md) that provides the modules and let users add them to a Vuex store. Your modules will be also namespaced if the plugin users add your modules under a namespaced module. To adapt this situation, you may need to receive a namespace value via your plugin option:
+  actions: {
+    [types.FETCH_ALL] (context, payload) {
+      // ...
+    }
+  },
 
-``` js
-// get namespace value via plugin option
-// and returns Vuex plugin function
-export function createPlugin (options = {}) {
-  return function (store) {
-    // add namespace to plugin module's types
-    const namespace = options.namespace || ''
-    store.dispatch(namespace + 'pluginAction')
+  mutations: {
+    [types.TOGGLE_DONE] (state, payload) {
+      // ...
+    }
   }
 }
 ```
 
-### Dynamic Module Registration
+### Enregistrement dynamique de module
 
-You can register a module **after** the store has been created with the `store.registerModule` method:
+Vous pouvez enregistrer un module **après** que le store ait été créé avec la méthode `store.registerModule` :
 
 ``` js
-// register a module `myModule`
 store.registerModule('myModule', {
   // ...
 })
-
-// register a nested module `nested/myModule`
-store.registerModule(['nested', 'myModule'], {
-  // ...
-})
 ```
 
-The module's state will be exposed as `store.state.myModule` and `store.state.nested.myModule`.
-
-Dynamic module registration makes it possible for other Vue plugins to also leverage Vuex for state management by attaching a module to the application's store. For example, the [`vuex-router-sync`](https://github.com/vuejs/vuex-router-sync) library integrates vue-router with vuex by managing the application's route state in a dynamically attached module.
-
-You can also remove a dynamically registered module with `store.unregisterModule(moduleName)`. Note you cannot remove static modules (declared at store creation) with this method.
-
-### Module Reuse
-
-Sometimes we may need to create multiple instances of a module, for example:
-
-- Creating multiple stores that uses the same module;
-- Register the same module multiple times in the same store.
+Le state du module sera disponible dans `store.state.myModule`.
 
-If we use a plain object to declare the state of the module, then that state object will be shared by reference and cause cross store/module state pollution when it's mutated.
+L'enregistrement dynamique de module permet aux autres plugins Vue de bénéficier de la gestion de state de Vuex en attachant un module au store de l'application. Par exemple, la bibliothèque [`vuex-router-sync`](https://github.com/vuejs/vuex-router-sync) intègre vue-router avec vuex en gérant le state de la route d'application dans un module enregistré dynamiquement.
 
-This is actually the exact same problem with `data` inside Vue components. So the solution is also the same - use a function for declaring module state (supported in 2.3.0+):
-
-``` js
-const MyReusableModule = {
-  state () {
-    return {
-      foo: 'bar'
-    }
-  },
-  // mutations, actions, getters...
-}
-```
+Vous pouvez aussi supprimer un module enregistré dynamiquement avec `store.unregisterModule(moduleName)`. Notez que vous ne pouvez pas supprimer des modules statiques (déclarés à la création du store) avec cette méthode.