123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721 |
- <!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.2">
-
-
-
-
- <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">
-
- <!-- Title -->
- <h1>
- <i class="fa fa-circle-o-notch fa-spin"></i>
- <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>
- <p>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é.</p>
- <p>Pour y remédier, Vuex nous permet de diviser notre store en <strong>modules</strong>. Chaque module peut contenir ses propres états, mutations, actions, accesseurs. Il peut même contenir ses propres modules internes.</p>
- <pre class="language-"><code class="lang-js"><span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
- state<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
- mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
- actions<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
- getters<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
- <span class="token punctuation">}</span>
- <span class="token keyword">const</span> moduleB <span class="token operator">=</span> <span class="token punctuation">{</span>
- state<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
- mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
- actions<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
- <span class="token punctuation">}</span>
- <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
- modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
- a<span class="token punctuation">:</span> moduleA<span class="token punctuation">,</span>
- b<span class="token punctuation">:</span> moduleB
- <span class="token punctuation">}</span>
- <span class="token punctuation">}</span><span class="token punctuation">)</span>
- store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>a <span class="token comment" spellcheck="true">// -> l'état du `moduleA`</span>
- store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>b <span class="token comment" spellcheck="true">// -> l'état du `moduleB`</span>
- </code></pre>
- <h3 id="état-local-dun-module">État local d'un module</h3>
- <p>Dans les mutations et accesseurs d'un module, le premier argument reçu sera <strong>l'état local du module</strong>.</p>
- <pre class="language-"><code class="lang-js"><span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
- state<span class="token punctuation">:</span> <span class="token punctuation">{</span> count<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
- mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span>
- increment <span class="token punctuation">(</span>state<span class="token punctuation">)</span> <span class="token punctuation">{</span>
- <span class="token comment" spellcheck="true">// `state` est l'état du module local</span>
- state<span class="token punctuation">.</span>count<span class="token operator">++</span>
- <span class="token punctuation">}</span>
- <span class="token punctuation">}</span><span class="token punctuation">,</span>
- getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
- doubleCount <span class="token punctuation">(</span>state<span class="token punctuation">)</span> <span class="token punctuation">{</span>
- <span class="token keyword">return</span> state<span class="token punctuation">.</span>count <span class="token operator">*</span> <span class="token number">2</span>
- <span class="token punctuation">}</span>
- <span class="token punctuation">}</span>
- <span class="token punctuation">}</span>
- </code></pre>
- <p>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> :</p>
- <pre class="language-"><code class="lang-js"><span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
- <span class="token comment" spellcheck="true">// ...</span>
- actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
- incrementIfOddOnRootSum <span class="token punctuation">(</span><span class="token punctuation">{</span> state<span class="token punctuation">,</span> commit<span class="token punctuation">,</span> rootState <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
- <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>count <span class="token operator">+</span> rootState<span class="token punctuation">.</span>count<span class="token punctuation">)</span> <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
- <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">)</span>
- <span class="token punctuation">}</span>
- <span class="token punctuation">}</span>
- <span class="token punctuation">}</span>
- <span class="token punctuation">}</span>
- </code></pre>
- <p>Également, dans les accesseurs du module, l'état racine sera exposé en troisième argument :</p>
- <pre class="language-"><code class="lang-js"><span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
- <span class="token comment" spellcheck="true">// ...</span>
- getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
- sumWithRootCount <span class="token punctuation">(</span>state<span class="token punctuation">,</span> getters<span class="token punctuation">,</span> rootState<span class="token punctuation">)</span> <span class="token punctuation">{</span>
- <span class="token keyword">return</span> state<span class="token punctuation">.</span>count <span class="token operator">+</span> rootState<span class="token punctuation">.</span>count
- <span class="token punctuation">}</span>
- <span class="token punctuation">}</span>
- <span class="token punctuation">}</span>
- </code></pre>
- <h3 id="espace-de-nom">Espace de nom</h3>
- <p>Par défaut, les actions, mutations et accesseurs à l'intérieur d'un module sont toujours enregistrés sous l'<strong>espace de nom global</strong>. Cela permet à de multiples modules d'être réactifs au même type de mutation et d'action.</p>
- <p>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 :</p>
- <pre class="language-"><code class="lang-js"><span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
- modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
- account<span class="token punctuation">:</span> <span class="token punctuation">{</span>
- namespaced<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
- <span class="token comment" spellcheck="true">// propriétés du module</span>
- state<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// l'état du module est déjà imbriqué et n'est pas affecté par l'option `namespace`</span>
- getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
- isAdmin <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">// -> getters['account/isAdmin']</span>
- <span class="token punctuation">}</span><span class="token punctuation">,</span>
- actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
- login <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">// -> dispatch('account/login')</span>
- <span class="token punctuation">}</span><span class="token punctuation">,</span>
- mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span>
- login <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">// -> commit('account/login')</span>
- <span class="token punctuation">}</span><span class="token punctuation">,</span>
- <span class="token comment" spellcheck="true">// modules imbriqués</span>
- modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
- <span class="token comment" spellcheck="true">// hérite de l'espace de nom du module parent</span>
- myPage<span class="token punctuation">:</span> <span class="token punctuation">{</span>
- state<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
- getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
- profile <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">// -> getters['account/profile']</span>
- <span class="token punctuation">}</span>
- <span class="token punctuation">}</span><span class="token punctuation">,</span>
- <span class="token comment" spellcheck="true">// utilise un espace de nom imbriqué</span>
- posts<span class="token punctuation">:</span> <span class="token punctuation">{</span>
- namespaced<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
- state<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
- getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
- popular <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">// -> getters['account/posts/popular']</span>
- <span class="token punctuation">}</span>
- <span class="token punctuation">}</span>
- <span class="token punctuation">}</span>
- <span class="token punctuation">}</span>
- <span class="token punctuation">}</span>
- <span class="token punctuation">}</span><span class="token punctuation">)</span>
- </code></pre>
- <p>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.</p>
- <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>
- <p>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.</p>
- <p>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>.</p>
- <pre class="language-"><code class="lang-js">modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
- foo<span class="token punctuation">:</span> <span class="token punctuation">{</span>
- namespaced<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
- getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
- <span class="token comment" spellcheck="true">// Les `getters` sont localisés dans le module des accesseurs</span>
- <span class="token comment" spellcheck="true">// vous pouvez utiliser `rootGetters` via le 4ᵉ argument des accesseurs</span>
- someGetter <span class="token punctuation">(</span>state<span class="token punctuation">,</span> getters<span class="token punctuation">,</span> rootState<span class="token punctuation">,</span> rootGetters<span class="token punctuation">)</span> <span class="token punctuation">{</span>
- getters<span class="token punctuation">.</span>someOtherGetter <span class="token comment" spellcheck="true">// -> 'foo/someOtherGetter'</span>
- rootGetters<span class="token punctuation">.</span>someOtherGetter <span class="token comment" spellcheck="true">// -> 'someOtherGetter'</span>
- <span class="token punctuation">}</span><span class="token punctuation">,</span>
- someOtherGetter<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
- <span class="token punctuation">}</span><span class="token punctuation">,</span>
- actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
- <span class="token comment" spellcheck="true">// les actions et mutations sont aussi localisées pour ce module</span>
- <span class="token comment" spellcheck="true">// elles vont accepter une option `root` pour la racine des actions et mutations.</span>
- someAction <span class="token punctuation">(</span><span class="token punctuation">{</span> dispatch<span class="token punctuation">,</span> commit<span class="token punctuation">,</span> getters<span class="token punctuation">,</span> rootGetters <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
- getters<span class="token punctuation">.</span>someGetter <span class="token comment" spellcheck="true">// -> 'foo/someGetter'</span>
- rootGetters<span class="token punctuation">.</span>someGetter <span class="token comment" spellcheck="true">// -> 'someGetter'</span>
- <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'someOtherAction'</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// -> 'foo/someOtherAction'</span>
- <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'someOtherAction'</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> root<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// -> 'someOtherAction'</span>
- <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'someMutation'</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// -> 'foo/someMutation'</span>
- <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'someMutation'</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> root<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// -> 'someMutation'</span>
- <span class="token punctuation">}</span><span class="token punctuation">,</span>
- someOtherAction <span class="token punctuation">(</span>ctx<span class="token punctuation">,</span> payload<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
- <span class="token punctuation">}</span>
- <span class="token punctuation">}</span>
- <span class="token punctuation">}</span>
- </code></pre>
- <h4 id="fonctions-utilitaires-liées-avec-espace-de-nom">Fonctions utilitaires liées avec espace de nom</h4>
- <p>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 :</p>
- <pre class="language-"><code class="lang-js">computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
- <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
- a<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">></span> state<span class="token punctuation">.</span>some<span class="token punctuation">.</span>nested<span class="token punctuation">.</span>module<span class="token punctuation">.</span>a<span class="token punctuation">,</span>
- b<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">></span> state<span class="token punctuation">.</span>some<span class="token punctuation">.</span>nested<span class="token punctuation">.</span>module<span class="token punctuation">.</span>b
- <span class="token punctuation">}</span><span class="token punctuation">)</span>
- <span class="token punctuation">}</span><span class="token punctuation">,</span>
- methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
- <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
- <span class="token string">'some/nested/module/foo'</span><span class="token punctuation">,</span>
- <span class="token string">'some/nested/module/bar'</span>
- <span class="token punctuation">]</span><span class="token punctuation">)</span>
- <span class="token punctuation">}</span>
- </code></pre>
- <p>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 :</p>
- <pre class="language-"><code class="lang-js">computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
- <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token string">'some/nested/module'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
- a<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">></span> state<span class="token punctuation">.</span>a<span class="token punctuation">,</span>
- b<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">></span> state<span class="token punctuation">.</span>b
- <span class="token punctuation">}</span><span class="token punctuation">)</span>
- <span class="token punctuation">}</span><span class="token punctuation">,</span>
- methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
- <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token string">'some/nested/module'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>
- <span class="token string">'foo'</span><span class="token punctuation">,</span>
- <span class="token string">'bar'</span>
- <span class="token punctuation">]</span><span class="token punctuation">)</span>
- <span class="token punctuation">}</span>
- </code></pre>
- <p>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 :</p>
- <pre class="language-"><code class="lang-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> createNamespacedHelpers <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vuex'</span>
- <span class="token keyword">const</span> <span class="token punctuation">{</span> mapState<span class="token punctuation">,</span> mapActions <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">createNamespacedHelpers</span><span class="token punctuation">(</span><span class="token string">'some/nested/module'</span><span class="token punctuation">)</span>
- <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
- computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
- <span class="token comment" spellcheck="true">// vérifie dans `some/nested/module`</span>
- <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
- a<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">></span> state<span class="token punctuation">.</span>a<span class="token punctuation">,</span>
- b<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">></span> state<span class="token punctuation">.</span>b
- <span class="token punctuation">}</span><span class="token punctuation">)</span>
- <span class="token punctuation">}</span><span class="token punctuation">,</span>
- methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
- <span class="token comment" spellcheck="true">// vérifie dans `some/nested/module`</span>
- <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
- <span class="token string">'foo'</span><span class="token punctuation">,</span>
- <span class="token string">'bar'</span>
- <span class="token punctuation">]</span><span class="token punctuation">)</span>
- <span class="token punctuation">}</span>
- <span class="token punctuation">}</span>
- </code></pre>
- <h4 id="limitations-pour-les-plugins-des-développeurs">Limitations pour les plugins des développeurs</h4>
- <p>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 :</p>
- <pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// passer la valeur d'espace de nom via une option du plugin</span>
- <span class="token comment" spellcheck="true">// et retourner une fonction de plugin Vuex</span>
- <span class="token keyword">export</span> <span class="token keyword">function</span> createPlugin <span class="token punctuation">(</span>options <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
- <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>store<span class="token punctuation">)</span> <span class="token punctuation">{</span>
- <span class="token comment" spellcheck="true">// ajouter l'espace de nom aux types de module</span>
- <span class="token keyword">const</span> namespace <span class="token operator">=</span> options<span class="token punctuation">.</span>namespace <span class="token operator">||</span> <span class="token string">''</span>
- store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span>namespace <span class="token operator">+</span> <span class="token string">'pluginAction'</span><span class="token punctuation">)</span>
- <span class="token punctuation">}</span>
- <span class="token punctuation">}</span>
- </code></pre>
- <h3 id="enregistrement-dynamique-de-module">Enregistrement dynamique de module</h3>
- <p>Vous pouvez enregistrer un module <strong>après</strong> que le store ait été créé avec la méthode <code>store.registerModule</code> :</p>
- <pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// enregistrer un module `myModule`</span>
- store<span class="token punctuation">.</span><span class="token function">registerModule</span><span class="token punctuation">(</span><span class="token string">'myModule'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
- <span class="token comment" spellcheck="true">// ...</span>
- <span class="token punctuation">}</span><span class="token punctuation">)</span>
- <span class="token comment" spellcheck="true">// enregistrer un module imbriqué `nested/myModule`</span>
- store<span class="token punctuation">.</span><span class="token function">registerModule</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'nested'</span><span class="token punctuation">,</span> <span class="token string">'myModule'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
- <span class="token comment" spellcheck="true">// ...</span>
- <span class="token punctuation">}</span><span class="token punctuation">)</span>
- </code></pre>
- <p>L'état des modules est disponible dans <code>store.state.myModule</code> et <code>store.state.nested.myModule</code>.</p>
- <p>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.</p>
- <p>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.</p>
- <p>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>.</p>
- <h3 id="réutiliser-un-module">Réutiliser un module</h3>
- <p>Parfois nous devrons créer de multiples instances d'un module pour, par exemple :</p>
- <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>
- <p>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é.</p>
- <p>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+) :</p>
- <pre class="language-"><code class="lang-js"><span class="token keyword">const</span> MyReusableModule <span class="token operator">=</span> <span class="token punctuation">{</span>
- state <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
- <span class="token keyword">return</span> <span class="token punctuation">{</span>
- foo<span class="token punctuation">:</span> <span class="token string">'bar'</span>
- <span class="token punctuation">}</span>
- <span class="token punctuation">}</span><span class="token punctuation">,</span>
- <span class="token comment" spellcheck="true">// mutations, actions, accesseurs...</span>
- <span class="token punctuation">}</span>
- </code></pre>
-
- </section>
-
- </div>
- <div class="search-results">
- <div class="has-results">
-
- <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
- <ul class="search-results-list"></ul>
-
- </div>
- <div class="no-results">
-
- <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</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">
- <i class="fa fa-angle-left"></i>
- </a>
-
-
- <a href="structure.html" class="navigation navigation-next " aria-label="Next page: Structure d'une application">
- <i class="fa fa-angle-right"></i>
- </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":{"edit-link":{"label":"Éditer cette page","base":"https://github.com/vuejs/vuex/tree/dev/docs"},"github":{"url":"https://github.com/vuejs/vuex/"},"prism":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":false,"twitter":false,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"theme-vuejs":{},"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-04-20T00:44:03.859Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"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-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>
|