vuex-help

<!DOCTYPE HTML> <html lang="fr" > <head> <meta charset="UTF-8"> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Documentation de l'API · 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="prev" href="hot-reload.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 " 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 active" 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="." >Documentation de l'API</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="documentation-de-lapi">Documentation de l'API</h1> <h3 id="vuexstore"><code>Vuex.Store</code></h3> <pre class="language-"><code class="lang-js">import Vuex from 'vuex' const store = new Vuex.Store({ ...options }) </code></pre> <h3 id="options-du-constructeur-de-vuexstore">Options du constructeur de <code>Vuex.Store</code></h3> <ul> <li>state <ul> <li>type : <code>Object | Function</code> L'objet d'état racine pour le store Vuex. <a href="state.html">Plus de détails</a> Si vous passez une fonction qui retourne un objet, l'objet retourné est utilisé en tant qu'état racine. Ceci est utile quand vous voulez réutiliser un objet d'état surtout dans un cas de réutilisation de module. <a href="modules.html#réutiliser-un-module">Plus de détails</a> </li> </ul> </li> <li>mutations <ul> <li>type : <code>{ [type: string]: Function }</code> Enregistrer les mutations sur le store. La fonction gestionnaire reçoit toujours <code>state</code> comme premier argument (sera l'état local du module si défini dans un module), et reçoit le <code>payload</code> en second argument s'il y en a un. <a href="mutations.html">Plus de détails</a> </li> </ul> </li> <li>actions <ul> <li>type : <code>{ [type: string]: Function }</code> Enregistrer les actions sur le store. La fonction gestionnaire reçoit un objet <code>context</code> qui expose les propriétés suivantes : <pre class="language-"><code class="lang-js">{ 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`, ou les accesseurs locaux dans les modules rootGetters // identique à `store.getters`, seulement dans les modules } </code></pre> <a href="actions.html">Plus de détails</a> </li> </ul> </li> <li>getters <ul> <li>type : <code>{ [key: string]: Function }</code> Enregistrer les accesseurs sur le store. La fonction accesseur reçoit les arguments suivants : <pre class="language-"><code>state, // sera l'état local du module si défini dans un module. getters // identique à `store.getters` </code></pre>Arguments spécifiques quand défini dans un module <pre class="language-"><code>state, // sera l'état local du module si défini dans un module. getters, // module local getters of the current module rootState, // état global rootGetters // tous les accesseurs </code></pre>Les accesseurs enregistrés sont exposés sur <code>store.getters</code>. <a href="getters.html">Plus de détails</a> </li> </ul> </li> <li>modules <ul> <li>type : <code>Object</code> Un objet contenant des sous-modules qui seront regroupés dans le store, sous la forme suivante : <pre class="language-"><code class="lang-js">{ key: { state, namespaced?, mutations?, actions?, getters?, modules? }, ... } </code></pre> Chaque module peut contenir <code>state</code> et <code>mutations</code>, tout comme les options racines. 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 <code>context.state</code> des actions du module pointeront également vers l'état local. <a href="modules.html">Plus de détails</a> </li> </ul> </li> <li>plugins <ul> <li>type : <code>Array<Function></code> 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 persistance de données, les logs ou le débogage) ou propager des mutations (pour les données internes, c.-à-d. websockets ou observables). <a href="plugins.html">Plus de détails</a> </li> </ul> </li> <li>strict <ul> <li>type : <code>Boolean</code></li> <li>default: <code>false</code> Force le store Vuex en mode strict. En mode strict, toute mutation de l'état en dehors des gestionnaires de mutation lancera une erreur. <a href="strict.html">Plus de détails</a> </li> </ul> </li> </ul> <h3 id="propriétés-dinstance-de-vuexstore">Propriétés d'instance de <code>Vuex.Store</code></h3> <ul> <li>state <ul> <li>type : <code>Object</code> L'état racine. Lecture seule. </li> </ul> </li> <li>getters <ul> <li>type : <code>Object</code> Expose les accesseurs enregistrés. Lecture seule. </li> </ul> </li> </ul> <h3 id="méthodes-dinstance-de-vuexstore">Méthodes d'instance de <code>Vuex.Store</code></h3> <ul> <li><code>commit(type: string, payload?: any, options?: Object) | commit(mutation: Object, options?: Object)</code> Acter une mutation. <code>options</code> peut avoir <code>root: true</code> ce qui permet d'acter des mutations racines dans des <a href="modules.html#namespacing">modules sous espace de nom</a>. <a href="mutations.html">Plus de détails</a> </li> <li><code>dispatch(type : string, payload?: any, options?: Object) | dispatch(action: Object, options?: Object)</code> 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. <a href="actions.html">Plus de détails</a> </li> <li><code>replaceState(state: Object)</code> Remplacer l'état racine du store. Utiliser seulement pour hydrater l'état ou dans le but de voyager dans le temps. </li> <li><code>watch(getter: Function, cb: Function, options?: Object)</code> 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 en premier argument, et les accesseurs en second argument. Accepte un objet optionnel d'options qui prend les mêmes options que la méthode <code>vm.$watch</code> de Vue. Pour arrêter d'observer, appeler la fonction gestionnaire retournée. </li> <li><code>subscribe(handler: Function)</code> S'abonner aux mutations du store. Le <code>handler</code> est appelé après chaque mutation et reçoit le descripteur de mutation et l'état post mutation comme arguments : <pre class="language-"><code class="lang-js">store.subscribe((mutation, state) => { console.log(mutation.type) console.log(mutation.payload) }) </code></pre> Utilisé plus communément dans les plugins. <a href="plugins.html">Plus de détails</a> </li> <li><code>subscribeAction(handler: Function)</code> <blockquote> Nouveau dans la 2.5.0+ </blockquote> S'abonner au actions du store. Le <code>handler</code> est appelé pour chaque action propagée et reçoit chaque description d'action et l'état du store courant en arguments : <pre class="language-"><code class="lang-js">store.subscribeAction((action, state) => { console.log(action.type) console.log(action.payload) }) </code></pre> Souvent utiliser dans les plugins. <a href="plugins.html">Pour plus de détails</a> </li> <li><code>registerModule(path: string | Array<string>, module: Module, options?: Object)</code> Enregistrer un module dynamique. <a href="modules.html#enregistrement-dynamique-de-module">Plus de détails</a> <code>options</code> peut avoir <code>preserveState: true</code> qui lui permet de préserver l'état précédent. Utile pour du rendu côté serveur. </li> <li><code>unregisterModule(path: string | Array<string>)</code> Supprimer un module dynamique. <a href="modules.html#enregistrement-dynamique-de-module">Plus de détails</a> </li> <li><code>hotUpdate(newOptions: Object)</code> Remplacement à la volée des nouvelles actions et mutations. <a href="hot-reload.html">Plus de détails</a> </li> </ul> <h3 id="fonctions-utilitaires-dattachement-au-composant">Fonctions utilitaires d'attachement au composant</h3> <ul> <li><code>mapState(namespace?: string, map: Array<string> | Object): Object</code> Créer des propriétés calculées qui retournent le sous-arbre du store Vuex au composant. <a href="state.html#le-helper-mapstate">Plus de détails</a> Le premier argument peut être de façon optionnelle une chaine d'espace de nom. <a href="modules.html#Fonctions-utilitaires-liées-avec-espace-de-nom">Plus de détails</a> </li> <li><code>mapGetters(namespace?: string, map: Array<string> | Object): Object</code> Créer des propriétés calculées qui retournent la valeur calculée d'un accesseur. <a href="getters.html#la-function-utilitaire-mapgetters">Plus de détails</a> Le premier argument peut être de façon optionnelle une chaine d'espace de nom. <a href="modules.html#Fonctions-utilitaires-liées-avec-espace-de-nom">Plus de détails</a> </li> <li><code>mapActions(namespace?: string, map: Array<string> | Object): Object</code> Créer des méthodes de composant qui propagent une action. <a href="actions.html#propager-des-actions-dans-les-composants">Plus de détails</a> Le premier argument peut être de façon optionnelle une chaine d'espace de nom. <a href="modules.html#Fonctions-utilitaires-liées-avec-espace-de-nom">Plus de détails</a> </li> <li><code>mapMutations(namespace?: string, map: Array<string> | Object): Object</code> Créer des méthodes de composant qui actent une mutation. <a href="mutations.html#acter-des-mutations-dans-les-composants">Plus de détails</a> Le premier argument peut être de façon optionnelle une chaine d'espace de nom. <a href="modules.html#Fonctions-utilitaires-liées-avec-espace-de-nom">Plus de détails</a> </li> <li><code>createNamespacedHelpers(namespace: string): Object</code> Créer des fonctions utilitaires liées avec espace de nom. L'objet retourné contient <code>mapState</code>, <code>mapGetters</code>, <code>mapActions</code> et <code>mapMutations</code> qui sont liées à l'espace de nom fourni. <a href="modules.html#fonctions-utilitaires-liées-avec-espace-de-nom">Plus de détails</a> </li> </ul> </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="hot-reload.html" class="navigation navigation-prev navigation-unique" aria-label="Previous page: Rechargement à chaud"> </a> </div> <script> var gitbook = gitbook || []; gitbook.push(function() { gitbook.page.hasChanged({"page":{"title":"Documentation de l'API","level":"1.13","depth":1,"previous":{"title":"Rechargement à chaud","level":"1.12","depth":1,"path":"hot-reload.md","ref":"hot-reload.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":"api.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>