vuex-help

<!DOCTYPE HTML> <html lang="fr" > <head> <meta charset="UTF-8"> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Mutations · 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="actions.html" /> <link rel="prev" href="getters.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 active" 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 " 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="." >Mutations</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="mutations">Mutations</h1> La seule façon de vraiment modifier l'état dans un store Vuex est d'acter une mutation. Les mutations Vuex sont très similaires aux évènements : chaque mutation a un type sous forme de chaine de caractères et un gestionnaire. La fonction de gestion est en charge de procéder aux véritables modifications de l'état, et elle reçoit l'état en premier argument : <pre class="language-"><code class="lang-js">const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) { // muter l'état state.count++ } } }) </code></pre> Vous ne pouvez pas appeler directement un gestionnaire de mutation. Le parti-pris ici est proche de l'abonnement à un évènement : « Lorsqu'une mutation du type <code>increment</code> est déclenchée, appelle ce gestionnaire. » Pour invoquer un gestionnaire de mutation, il faut appeler <code>store.commit</code> avec son type : <pre class="language-"><code class="lang-js">store.commit('increment') </code></pre> <h3 id="acter-avec-un-argument-additionnel">Acter avec un argument additionnel</h3> Vous pouvez donner un argument additionnel (« payload ») à la fonction <code>store.commit</code> lors de la mutation : <pre class="language-"><code class="lang-js">// ... mutations: { increment (state, n) { state.count += n } } </code></pre> <pre class="language-"><code class="lang-js">store.commit('increment', 10) </code></pre> Dans la plupart des cas, l'argument additionnel devrait être un objet, ainsi il peut contenir plusieurs champs, et les mutations enregistrées seront également plus descriptives : <pre class="language-"><code class="lang-js">// ... mutations: { increment (state, payload) { state.count += payload.amount } } </code></pre> <pre class="language-"><code class="lang-js">store.commit('increment', { amount: 10 }) </code></pre> <h3 id="acter-avec-un-objet">Acter avec un objet</h3> Une méthode alternative pour acter une mutation est d'utiliser directement un objet qui a une propriété <code>type</code> : <pre class="language-"><code class="lang-js">store.commit({ type: 'increment', amount: 10 }) </code></pre> Lors de l'utilisation d'un objet pour acter, c'est l'objet lui-même qui ferra office d'argument pour aux gestionnaires de mutation, le gestionnaire reste donc inchangé : <pre class="language-"><code class="lang-js">mutations: { increment (state, payload) { state.count += payload.amount } } </code></pre> <h3 id="les-mutations-suivent-les-règles-de-réactivité-de-vue">Les mutations suivent les règles de réactivité de Vue</h3> Puisqu'un état de store de Vuex est rendu réactif par Vue, lorsque nous mutons l'état, les composants Vue observant cet état seront automatiquement mis à jour. Cela signifie également que les mutations Vuex sont sujettes aux mêmes limitations qu'avec l'utilisation de Vue seul : <ol> <li>Initialisez de préférence le store initial de votre état avec tous les champs désirés auparavant. </li> <li>Lorsque vous ajoutez de nouvelles propriétés à un objet, vous devriez soit : <ul> <li>Utiliser <code>Vue.set(obj, 'newProp', 123)</code>, ou </li> <li>Remplacer cet objet par un nouvel objet. Par exemple, en utilisant <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition" target="_blank">opérateur de décomposition</a> (stage-2), il est possible d'écrire : <pre class="language-"><code class="lang-js">state.obj = { ...state.obj, newProp: 123 } </code></pre> </li> </ul> </li> </ol> <h3 id="utilisation-de-constante-pour-les-types-de-mutation">Utilisation de constante pour les types de mutation</h3> C'est une façon de faire régulière que d'utiliser des constantes pour les types de mutations dans diverses implémentations de Flux. Cela permet au code de bénéficier d'outils comme les linters (des outils d'aide à l'analyse syntaxique), et écrire toutes ces constantes dans un seul fichier permet à vos collaborateurs d'avoir un aperçu de quelles mutations sont possibles dans toute l'application : <pre class="language-"><code class="lang-js">// mutation-types.js export const SOME_MUTATION = 'SOME_MUTATION' </code></pre> <pre class="language-"><code class="lang-js">// store.js import Vuex from 'vuex' import { SOME_MUTATION } from './mutation-types' const store = new Vuex.Store({ state: { ... }, mutations: { // nous pouvons utiliser la fonctionnalité de nom de propriété calculée // pour utiliser une constante en tant que nom de fonction [SOME_MUTATION] (state) { // muter l'état } } }) </code></pre> Utiliser les constantes ou non relève de la préférence personnelle. Cela peut être bénéfique sur un gros projet avec beaucoup de développeurs, mais c'est totalement optionnel si vous n'aimez pas cette pratique. <h3 id="les-mutations-doivent-être-synchrones">Les mutations doivent être synchrones</h3> Une règle importante à retenir est que les fonctions de gestion des mutations doivent être synchrones. Pourquoi ? Considérons l'exemple suivant : <pre class="language-"><code class="lang-js">mutations: { someMutation (state) { api.callAsyncMethod(() => { state.count++ }) } } </code></pre> Maintenant imaginons que nous déboguons l'application et que nous regardons dans les logs de mutation des outils de développement (« devtools »). Pour chaque mutation enregistrée, le devtool aura besoin de capturer un instantané de l'état « avant » et un instantané « après ». Cependant, la fonction de rappel asynchrone de l'exemple ci-dessus rend l'opération impossible : la fonction de rappel n'est pas encore appelée lorsque la mutation est actée, et il n'y a aucun moyen pour le devtool de savoir quand la fonction de rappel sera véritablement appelée. Toute mutation d'état effectuée dans la fonction de rappel est essentiellement intraçable ! <h3 id="acter-des-mutations-dans-les-composants">Acter des mutations dans les composants</h3> Vous pouvez acter des mutations dans les composants avec <code>this.$store.commit('xxx')</code>, ou en utilisant la fonction utilitaire <code>mapMutations</code> qui attache les méthodes du composant aux appels de <code>store.commit</code> (nécessite l'injection de <code>store</code> à la racine) : <pre class="language-"><code class="lang-js">import { mapMutations } from 'vuex' export default { // ... methods: { ...mapMutations([ 'increment' // attacher `this.increment()` à `this.$store.commit('increment')` // `mapMutations` supporte également les paramètres additionnels : 'incrementBy' // attacher `this.incrementBy(amount)` à `this.$store.commit('incrementBy', amount)` ]), ...mapMutations({ add: 'increment' // attacher `this.add()` à `this.$store.commit('increment')` }) } } </code></pre> <h3 id="en-avant-vers-les-actions">En avant vers les actions</h3> L'asynchronisme combiné à la mutation de l'état peut rendre votre programme très difficile à comprendre. Par exemple, lorsque vous appelez deux méthodes avec toutes les deux des fonctions de rappel asynchrones qui changent l'état, comment savez-vous quelle fonction de rappel est appelée en première ? C'est exactement la raison pour laquelle nous voulons séparer les deux concepts. Avec Vuex, les mutations sont des transactions synchrones : <pre class="language-"><code class="lang-js">store.commit('increment') // n'importe quel changement d'état de « increment » par mutation // devrait être faite de manière synchrone. </code></pre> Pour gérer les opérations asynchrones, tournons-nous vers les <a href="actions.html">Actions</a>. </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="getters.html" class="navigation navigation-prev " aria-label="Previous page: Accesseurs"> </a> <a href="actions.html" class="navigation navigation-next " aria-label="Next page: Actions"> </a> </div> <script> var gitbook = gitbook || []; gitbook.push(function() { gitbook.page.hasChanged({"page":{"title":"Mutations","level":"1.6.3","depth":2,"next":{"title":"Actions","level":"1.6.4","depth":2,"path":"actions.md","ref":"actions.md","articles":[]},"previous":{"title":"Accesseurs","level":"1.6.2","depth":2,"path":"getters.md","ref":"getters.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":"mutations.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>