diff --git a/en/guide/vuex-store.md b/en/guide/vuex-store.md index 38a066b14..d32cdcff1 100644 --- a/en/guide/vuex-store.md +++ b/en/guide/vuex-store.md @@ -1,26 +1,26 @@ --- title: Vuex Store -description: Using a store to manage the state is important for every big application, that's why nuxt.js implements Vuex in its core. +description: L'utilisation d'un store pour gérer l'état est important pour toutes les applications de taille importante, c'est pourquoi Vuex est implémenté au cœur de Nuxt.js. --- -> Using a store to manage the state is important to every big application, that's why nuxt.js implement [vuex](https://github.com/vuejs/vuex) in its core. +> L'utilisation d'un store pour gérer l'état est important pour toutes les applications de taille importante, c'est pourquoi [Vuex](https://vuex.vuejs.org/fr/) est implémenté au cœur de Nuxt.js. -## Activate the Store +## Activer le store -Nuxt.js will look for the `store` directory, if it exists, it will: +Nuxt.js recherchera le répertoire `store`. S'il existe, il : -1. Import Vuex -2. Add `vuex` module in the vendors bundle -3. Add the `store` option to the root `Vue` instance. +1. importera Vuex, +2. ajoutera le module `vuex` dans le paquetage vendors, +3. ajoutera l'option `store` à l'instance racine de Vue. -Nuxt.js lets you have **2 modes of store**, choose the one you prefer: +Nuxt.js vous laisse le choix entre **2 modes de store**, choisissez celui qui vous convient le mieux : -- **Classic:** `store/index.js` returns a store instance -- **Modules:** every `.js` file inside the `store` directory is transformed as a [namespaced module](http://vuex.vuejs.org/en/modules.html) (`index` being the root module) +- **Classique :** `store/index.js` retourne une instance de store. +- **Modules :** chaque fichier `.js` dans le répertoire `store` est transformé en tant que [module avec son propre espace de nom](http://vuex.vuejs.org/fr/modules.html) (`index` étant le module racine) -## Classic mode +## Mode classique -To activate the store with the classic mode, we create the `store/index.js` file which should export a method which returns a Vuex instance: +Pour activer le store avec le mode classique, nous créons `store/index.js` qui devrait exporter une méthode qui renvoie une instance Vuex : ```js import Vuex from 'vuex' @@ -41,9 +41,9 @@ const createStore = () => { export default createStore ``` -> We don't need to install `vuex` since it's shipped with nuxt.js +> Pas besoin d'installer `vuex`, celui-ci étant livré avec Nuxt.js. -We can now use `this.$store` inside our components: +Nous pouvons alors utiliser `this.$store` dans nos composants : ```html @@ -51,11 +51,11 @@ We can now use `this.$store` inside our components: ``` -## Modules mode +## Mode modules -> Nuxt.js lets you have a `store` directory with every file corresponding to a module. +> Nuxt.js vous permet d'avoir un répertoire `store` dans lequel chaque fichier correspond à un module. -If you want this option, export the state as a function, and the mutations and actions as objects in `store/index.js` instead of a store instance: +Si vous voulez cette option, exportez l'état, les mutations et les actions dans `store/index.js` au lieu de l'instance `store` : ```js export const state = () => ({ @@ -69,7 +69,8 @@ export const mutations = { } ``` -Then, you can have a `store/todos.js` file: +Puis, vous pouvez avoir `store/todos.js` : + ```js export const state = () => ({ list: [] @@ -91,7 +92,8 @@ export const mutations = { } ``` -The store will be as such: +Le store sera comme suit : + ```js new Vuex.Store({ state: { counter: 0 }, @@ -124,7 +126,7 @@ new Vuex.Store({ }) ``` -And in your `pages/todos.vue`, using the `todos` module: +Et dans votre `pages/todos.vue`, utiliser le module `todos` : ```html @@ -133,7 +135,7 @@ And in your `pages/todos.vue`, using the `todos` module: {{ todo.text }} - + @@ -163,11 +165,11 @@ export default { ``` -