vuex-help

<!DOCTYPE HTML> <html lang="fr" > <head> <meta charset="UTF-8"> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Plugins · 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="strict.html" /> <link rel="prev" href="structure.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 active" 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="." >Plugins</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="plugins">Plugins</h1> Les stores Vuex prennent une option <code>plugins</code> qui expose des hooks pour chaque mutation. Un plugin Vuex est simplement une fonction qui reçoit un store comme unique argument : <pre class="language-"><code class="lang-js">const myPlugin = store => { // appelé quand le store est initialisé store.subscribe((mutation, state) => { // appelé après chaque mutation. // Les mutations arrivent au format `{ type, payload }`. }) } </code></pre> Et peut être utilisé ainsi : <pre class="language-"><code class="lang-js">const store = new Vuex.Store({ // ... plugins: [myPlugin] }) </code></pre> <h3 id="acter-des-mutations-dans-des-plugins">Acter des mutations dans des plugins</h3> Les plugins ne sont pas autorisés à muter directement l'état. Tout comme vos composants, ils peuvent simplement déclencher des changements en actant des mutations. En actant des mutations, un plugin peut être utilisé pour synchroniser la source de données avec le store. Par exemple, pour synchroniser la source de données d'une websocket vers le store (c'est juste un exemple artificiel, en réalité la fonction <code>createPlugin</code> peut prendre des options additionnelles pour des tâches plus complexes) : <pre class="language-"><code class="lang-js">export default function createWebSocketPlugin (socket) { return store => { socket.on('data', data => { store.commit('receiveData', data) }) store.subscribe(mutation => { if (mutation.type === 'UPDATE_DATA') { socket.emit('update', mutation.payload) } }) } } </code></pre> <pre class="language-"><code class="lang-js">const plugin = createWebSocketPlugin(socket) const store = new Vuex.Store({ state, mutations, plugins: [plugin] }) </code></pre> <h3 id="prendre-des-instantanés-de-létat">Prendre des instantanés de l'état</h3> Parfois un plugin peut vouloir recevoir des « instantanés » de l'état, et également comparer l'état post mutation avec l'état prémutation. Pour faire ceci, vous aurez besoin d'effectuer une copie complète de l'état : <pre class="language-"><code class="lang-js">const myPluginWithSnapshot = store => { let prevState = _.cloneDeep(store.state) store.subscribe((mutation, state) => { let nextState = _.cloneDeep(state) // comparer `prevState` et `nextState`... // sauver l'état pour la prochaine mutation prevState = nextState }) } </code></pre> Les plugins qui peuvent prendre des instantanés ne devraient être utilisés que pendant le développement. Lorsqu'on utilise webpack ou Browserify, on peut laisser nos outils de développement (« devtools ») s'occuper de ça pour nous : <pre class="language-"><code class="lang-js">const store = new Vuex.Store({ // ... plugins: process.env.NODE_ENV !== 'production' ? [myPluginWithSnapshot] : [] }) </code></pre> Le plugin sera utilisé par défaut. Pour la production, vous aurez besoin de <a href="https://webpack.js.org/plugins/define-plugin/" target="_blank">DefinePlugin</a> pour webpack ou de <a href="https://github.com/hughsk/envify" target="_blank">envify</a> pour Browserify pour convertir la valeur de <code>process.env.NODE_ENV !== 'production'</code> à <code>false</code> pour le build final. <h3 id="plugin-de-logs-intégré">Plugin de logs intégré</h3> <blockquote> Si vous utilisez <a href="https://github.com/vuejs/vue-devtools" target="_blank">vue-devtools</a> vous n'avez probablement pas besoin de ça. </blockquote> Vuex fournit un plugin de logs à des fins de débogage : <pre class="language-"><code class="lang-js">import createLogger from 'vuex/dist/logger' const store = new Vuex.Store({ plugins: [createLogger()] }) </code></pre> La fonction <code>createLogger</code> prend quelques options : <pre class="language-"><code class="lang-js">const logger = createLogger({ collapsed: false, // auto-expand logged mutations filter (mutation, stateBefore, stateAfter) { // retourne `true` si une mutation devrait être logguée // `mutation` est un `{ type, payload }` return mutation.type !== "aBlacklistedMutation" }, transformer (state) { // transforme l'état avant de le logguer. // retourne par exemple seulement un sous-arbre spécifique return state.subTree }, mutationTransformer (mutation) { // les mutations sont logguées au format `{ type, payload }` // nous pouvons les formater comme nous le souhaitons. return mutation.type }, logger: console, // implementation de l'API `console`, par défaut `console` }) </code></pre> Le fichier de logs peut aussi être inclus directement via une balise <code>script</code>, et exposera la fonction <code>createVuexLogger</code> globalement. Notez que le plugin de logs peut prendre des instantanés de l'état, ne l'utilisez donc que durant le développement. </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="structure.html" class="navigation navigation-prev " aria-label="Previous page: Structure d'une application"> </a> <a href="strict.html" class="navigation navigation-next " aria-label="Next page: Mode strict"> </a> </div> <script> var gitbook = gitbook || []; gitbook.push(function() { gitbook.page.hasChanged({"page":{"title":"Plugins","level":"1.8","depth":1,"next":{"title":"Mode strict","level":"1.9","depth":1,"path":"strict.md","ref":"strict.md","articles":[]},"previous":{"title":"Structure d'une application","level":"1.7","depth":1,"path":"structure.md","ref":"structure.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":"plugins.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>