vuex-help

<!DOCTYPE HTML> <html lang="fr" > <head> <meta charset="UTF-8"> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Modules · Vuex</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="description" content=""> <meta name="generator" content="GitBook 3.2.3"> <link rel="stylesheet" href="../gitbook/style.css"> <link rel="stylesheet" href="../gitbook/gitbook-plugin-prism/prism.css"> <link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css"> <link rel="stylesheet" href="../gitbook/gitbook-plugin-theme-vuejs/vue.css"> <meta name="HandheldFriendly" content="true"/> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png"> <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon"> <link rel="next" href="structure.html" /> <link rel="prev" href="actions.html" /> </head> <body> <div class="book"> <div class="book-summary"> <div id="book-search-input" role="search"> <input type="text" placeholder="Tapez pour rechercher" /> </div> <nav role="navigation"> <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=vuejs" id="_carbonads_js"></script> <ul class="summary"> <li class="chapter " data-level="1.1" data-path="./"> <a href="./"> Introduction </a> </li> <li class="chapter " data-level="1.2" > <a target="_blank" href="https://github.com/vuejs/vuex/releases"> Notes de version </a> </li> <li class="chapter " data-level="1.3" data-path="installation.html"> <a href="installation.html"> Installation </a> </li> <li class="chapter " data-level="1.4" data-path="intro.html"> <a href="intro.html"> Vuex, qu'est-ce que c'est ? </a> </li> <li class="chapter " data-level="1.5" data-path="getting-started.html"> <a href="getting-started.html"> Pour commencer </a> </li> <li class="chapter " data-level="1.6" data-path="core-concepts.html"> <a href="core-concepts.html"> Concepts de base </a> <ul class="articles"> <li class="chapter " data-level="1.6.1" data-path="state.html"> <a href="state.html"> État </a> </li> <li class="chapter " data-level="1.6.2" data-path="getters.html"> <a href="getters.html"> Accesseurs </a> </li> <li class="chapter " data-level="1.6.3" data-path="mutations.html"> <a href="mutations.html"> Mutations </a> </li> <li class="chapter " data-level="1.6.4" data-path="actions.html"> <a href="actions.html"> Actions </a> </li> <li class="chapter active" data-level="1.6.5" data-path="modules.html"> <a href="modules.html"> Modules </a> </li> </ul> </li> <li class="chapter " data-level="1.7" data-path="structure.html"> <a href="structure.html"> Structure d'une application </a> </li> <li class="chapter " data-level="1.8" data-path="plugins.html"> <a href="plugins.html"> Plugins </a> </li> <li class="chapter " data-level="1.9" data-path="strict.html"> <a href="strict.html"> Mode strict </a> </li> <li class="chapter " data-level="1.10" data-path="forms.html"> <a href="forms.html"> Gestion des formulaires </a> </li> <li class="chapter " data-level="1.11" data-path="testing.html"> <a href="testing.html"> Tests </a> </li> <li class="chapter " data-level="1.12" data-path="hot-reload.html"> <a href="hot-reload.html"> Rechargement à chaud </a> </li> <li class="chapter " data-level="1.13" data-path="api.html"> <a href="api.html"> Documentation de l'API </a> </li> <li class="divider"></li> <li> <a href="https://www.gitbook.com" target="blank" class="gitbook-link"> Publié avec GitBook </a> </li> </ul> </nav> </div> <div class="book-body"> <div class="body-inner"> <div class="book-header" role="navigation">  <h1> <a href="." >Modules</a> </h1> </div> <div class="page-wrapper" tabindex="-1" role="main"> <div class="page-inner"> <div id="book-search-results"> <div class="search-noresults"> <section class="normal markdown-section"> <h1 id="modules">Modules</h1> Du fait de l'utilisation d'un arbre d'état unique, tout l'état 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é. Pour y remédier, Vuex nous permet de diviser notre store en modules. Chaque module peut contenir ses propres états, mutations, actions, accesseurs. Il peut même contenir ses propres modules internes. <pre class="language-"><code class="lang-js">const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> l'état du `moduleA` store.state.b // -> l'état du `moduleB` </code></pre> <h3 id="état-local-dun-module">État local d'un module</h3> Dans les mutations et accesseurs d'un module, le premier argument reçu sera l'état local du module. <pre class="language-"><code class="lang-js">const moduleA = { state: { count: 0 }, mutations: { increment (state) { // `state` est l'état du module local state.count++ } }, getters: { doubleCount (state) { return state.count * 2 } } } </code></pre> De façon similaire, dans les actions du module, <code>context.state</code> exposera l'état local, et l'état racine sera disponible avec <code>context.rootState</code> : <pre class="language-"><code class="lang-js">const moduleA = { // ... actions: { incrementIfOddOnRootSum ({ state, commit, rootState }) { if ((state.count + rootState.count) % 2 === 1) { commit('increment') } } } } </code></pre> Également, dans les accesseurs du module, l'état racine sera exposé en troisième argument : <pre class="language-"><code class="lang-js">const moduleA = { // ... getters: { sumWithRootCount (state, getters, rootState) { return state.count + rootState.count } } } </code></pre> <h3 id="espace-de-nom">Espace de nom</h3> Par défaut, les actions, mutations et accesseurs à l'intérieur d'un module sont toujours enregistrés sous l'espace de nom global. Cela permet à de multiples modules d'être réactifs au même type de mutation et d'action. Si vous souhaitez que votre module soit autosuffisant et réutilisable, vous pouvez le ranger sous un espace de nom avec <code>namespaced: true</code>. Quand le module est enregistré, tous ses accesseurs, actions et mutations seront automatiquement basés sur l'espace de nom du module dans lesquels ils sont rangés. Par exemple : <pre class="language-"><code class="lang-js">const store = new Vuex.Store({ modules: { account: { namespaced: true, // propriétés du module state: { ... }, // l'état du module est déjà imbriqué et n'est pas affecté par l'option `namespace` getters: { isAdmin () { ... } // -> getters['account/isAdmin'] }, actions: { login () { ... } // -> dispatch('account/login') }, mutations: { login () { ... } // -> commit('account/login') }, // modules imbriqués modules: { // hérite de l'espace de nom du module parent myPage: { state: { ... }, getters: { profile () { ... } // -> getters['account/profile'] } }, // utilise un espace de nom imbriqué posts: { namespaced: true, state: { ... }, getters: { popular () { ... } // -> getters['account/posts/popular'] } } } } } }) </code></pre> Les accesseurs et actions sous espace de nom reçoivent des <code>getters</code>, <code>dispatch</code> et <code>commit</code> localisés. En d'autres termes, vous pouvez utiliser les paramètres de module sans écrire de préfixe dans ce même module. Permuter entre un espace de nom ou non n'affecte pas le code à l'intérieur du module. <h4 id="accéder-aux-propriétés-globales-dans-les-modules-à-espace-de-nom">Accéder aux propriétés globales dans les modules à espace de nom</h4> Si vous voulez utiliser des états et accesseurs globaux, <code>rootState</code> et <code>rootGetters</code> sont passés en 3ᵉ et 4ᵉ arguments des fonctions d'accès et sont également exposés en tant que propriété de l'objet <code>context</code> passé aux fonctions d'action. Pour propager les actions ou les mutations actées dans l'espace de nom global, passez <code>{ root: true }</code> en 3ᵉ argument à <code>dispatch</code> et <code>commit</code>. <pre class="language-"><code class="lang-js">modules: { foo: { namespaced: true, getters: { // Les `getters` sont localisés dans le module des accesseurs // vous pouvez utiliser `rootGetters` via le 4ᵉ argument des accesseurs someGetter (state, getters, rootState, rootGetters) { getters.someOtherGetter // -> 'foo/someOtherGetter' rootGetters.someOtherGetter // -> 'someOtherGetter' }, someOtherGetter: state => { ... } }, actions: { // les actions et mutations sont aussi localisées pour ce module // elles vont accepter une option `root` pour la racine des actions et mutations. 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) { ... } } } } </code></pre> <h4 id="fonctions-utilitaires-liées-avec-espace-de-nom">Fonctions utilitaires liées avec espace de nom</h4> Quand nous lions un module sous espace de nom à un composant avec les fonctions utilitaires <code>mapState</code>, <code>mapGetters</code>, <code>mapActions</code> and <code>mapMutations</code>, cela peut être légèrement verbeux : <pre class="language-"><code class="lang-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' ]) } </code></pre> Dans ces cas-là, vous pouvez passer une chaine de caractère représentant le nom d'espace en tant que premier argument aux fonctions utilitaires ainsi toutes les liaisons seront faites en utilisant le module comme contexte. Cela peut être simplifié comme ci-dessous : <pre class="language-"><code class="lang-js">computed: { ...mapState('some/nested/module', { a: state => state.a, b: state => state.b }) }, methods: { ...mapActions('some/nested/module', [ 'foo', 'bar' ]) } </code></pre> De plus, vous pouvez créer des fonctions utilitaires liées avec espace de nom en utilisant <code>createNamespacedHelpers</code>. Cela retourne un objet qui a les nouvelles fonctions utilitaires rattachées à la valeur d'espace de nom fournie : <pre class="language-"><code class="lang-js">import { createNamespacedHelpers } from 'vuex' const { mapState, mapActions } = createNamespacedHelpers('some/nested/module') export default { computed: { // vérifie dans `some/nested/module` ...mapState({ a: state => state.a, b: state => state.b }) }, methods: { // vérifie dans `some/nested/module` ...mapActions([ 'foo', 'bar' ]) } } </code></pre> <h4 id="limitations-pour-les-plugins-des-développeurs">Limitations pour les plugins des développeurs</h4> Vous devez faire attention au nom d'espace imprévisible pour vos modules quand vous créez un <a href="plugins.html">plugin</a> qui fournit les modules et laisser les utilisateurs les ajouter au store de Vuex. Vos modules seront également sous espace de nom si l'utilisateur du plugin l'ajoute sous un module sous espace de nom. Pour vous adapter à la situation, vous devez recevoir la valeur de l'espace de nom via vos options de plugin : <pre class="language-"><code class="lang-js">// passer la valeur d'espace de nom via une option du plugin // et retourner une fonction de plugin Vuex export function createPlugin (options = {}) { return function (store) { // ajouter l'espace de nom aux types de module const namespace = options.namespace || '' store.dispatch(namespace + 'pluginAction') } } </code></pre> <h3 id="enregistrement-dynamique-de-module">Enregistrement dynamique de module</h3> Vous pouvez enregistrer un module après que le store ait été créé avec la méthode <code>store.registerModule</code> : <pre class="language-"><code class="lang-js">// enregistrer un module `myModule` store.registerModule('myModule', { // ... }) // enregistrer un module imbriqué `nested/myModule` store.registerModule(['nested', 'myModule'], { // ... }) </code></pre> L'état des modules est disponible dans <code>store.state.myModule</code> et <code>store.state.nested.myModule</code>. L'enregistrement dynamique de module permet aux autres plugins Vue de bénéficier de la gestion de l'état de Vuex en attachant un module au store de l'application. Par exemple, la bibliothèque <a href="https://github.com/vuejs/vuex-router-sync" target="_blank"><code>vuex-router-sync</code></a> intègre vue-router avec vuex en gérant l'état de la route d'application dans un module enregistré dynamiquement. Vous pouvez aussi supprimer un module enregistré dynamiquement avec <code>store.unregisterModule(moduleName)</code>. Notez que vous ne pouvez pas supprimer des modules statiques (déclarés à la création du store) avec cette méthode. Il est possible que vous souhaitiez préserver un état précédent quand vous abonnez un nouveau module. Par exemple préserver l'état depuis l'application rendue côté serveur. Vous pouvez réaliser ceci avec l'option <code>preserveState</code> : <code>store.registerModule('a', module, { preserveState: true })</code>. <h3 id="réutiliser-un-module">Réutiliser un module</h3> Parfois nous devrons créer de multiples instances d'un module pour, par exemple : <ul> <li>créer plusieurs stores qui utilisent le même module (par ex. pour <a href="https://ssr.vuejs.org/fr/structure.html#avoid-stateful-singletons" target="_blank">éviter les singletons d'état avec du SSR</a> quand l'option <code>runInNewContext</code> est à <code>false</code> ou <code>'once'</code>) ou</li> <li>enregistrer le même module plusieurs fois dans le même store.</li> </ul> Si nous utilisons un objet pour déclarer l'état du module, alors cet objet d'état sera partagé par référence et causera de contamination inter store/module quand il sera muté. C'est exactement le même problème qu'avec <code>data</code> dans un composant Vue. Ainsi la solution est là même, utiliser une fonction pour déclarer notre état de module (supporté par la 2.3.0+) : <pre class="language-"><code class="lang-js">const MyReusableModule = { state () { return { foo: 'bar' } }, // mutations, actions, accesseurs... } </code></pre> </section> </div> <div class="search-results"> <div class="has-results"> <h1 class="search-results-title"> results matching ""</h1> <ul class="search-results-list"></ul> </div> <div class="no-results"> <h1 class="search-results-title">No results matching ""</h1> </div> </div> </div> </div> </div> <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script> <div class="bsa-cpc"></div> <script> (function(){ if(typeof _bsa !== 'undefined' && _bsa) { _bsa.init('default', 'CKYD62QM', 'placement:vuejsorg', { target: '.bsa-cpc', align: 'horizontal', disable_css: 'true' }); } })(); </script> </div> <a href="actions.html" class="navigation navigation-prev " aria-label="Previous page: Actions"> </a> <a href="structure.html" class="navigation navigation-next " aria-label="Next page: Structure d'une application"> </a> </div> <script> var gitbook = gitbook || []; gitbook.push(function() { gitbook.page.hasChanged({"page":{"title":"Modules","level":"1.6.5","depth":2,"next":{"title":"Structure d'une application","level":"1.7","depth":1,"path":"structure.md","ref":"structure.md","articles":[]},"previous":{"title":"Actions","level":"1.6.4","depth":2,"path":"actions.md","ref":"actions.md","articles":[]},"dir":"ltr"},"config":{"plugins":["edit-link","prism","-highlight","github","-highlight","github"],"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"prism":{},"github":{"url":"https://github.com/vuejs/vuex/"},"livereload":{},"search":{},"theme-vuejs":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":false,"twitter":false,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"edit-link":{"label":"Éditer cette page","base":"https://github.com/vuejs/vuex/tree/dev/docs"},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"Vuex","language":"fr","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"modules.md","mtime":"2018-02-17T07:20:49.000Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2018-03-02T20:43:43.208Z"},"basePath":".","book":{"language":"fr"}}); }); </script> </div> <script src="../gitbook/gitbook.js"></script> <script src="../gitbook/theme.js"></script> <script src="../gitbook/gitbook-plugin-edit-link/plugin.js"></script> <script src="../gitbook/gitbook-plugin-github/plugin.js"></script> <script src="../gitbook/gitbook-plugin-livereload/plugin.js"></script> <script src="../gitbook/gitbook-plugin-search/search-engine.js"></script> <script src="../gitbook/gitbook-plugin-search/search.js"></script> <script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script> <script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script> <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script> </body> </html>