vuex-help
Version:
a utilies library reduce boilerplate for vuex
565 lines (278 loc) • 24.6 kB
HTML
<html lang="fr" >
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>État · 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="getters.html" />
<link rel="prev" href="core-concepts.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 active" 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 " 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="." >État</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="state">State</h1>
<h3 id="arbre-détat-unique">Arbre d'état unique</h3>
<p>Vuex utilise un <strong>arbre d'état unique</strong>, c'est-à-dire que cet unique objet contient tout l'état au niveau applicatif et sert de « source de vérité unique ». Cela signifie également que vous n'aurez qu'un seul store pour chaque application. Un arbre d'état unique rend rapide la localisation d'une partie spécifique de l'état et permet de facilement prendre des instantanés de l'état actuel de l'application à des fins de débogage.</p>
<p>L'arbre d'état unique n'entre pas en conflit avec la modularité. Dans les prochains chapitres, nous examinerons comment séparer votre état et vos mutations dans des sous-modules.</p>
<h3 id="récupération-détat-vuex-dans-des-composants-vue">Récupération d'état Vuex dans des composants Vue</h3>
<p>Alors, comment affichons-nous l'état du store dans nos composants Vue ? Puisque les stores Vuex sont réactifs, la façon la plus simple d'y « récupérer » l'état est tout simplement de retourner une partie de l'état depuis une <a href="https://fr.vuejs.org/guide/computed.html" target="_blank">une propriété calculée</a> :</p>
<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// créons un composant Counter</span>
<span class="token keyword">const</span> Counter <span class="token operator">=</span> <span class="token punctuation">{</span>
template<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`<div>{{ count }}</div>`</span></span><span class="token punctuation">,</span>
computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
count <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>count
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Lorsque <code>store.state.count</code> change, cela entrainera la réévaluation de la propriété calculée, et déclenchera les actions associées au DOM.</p>
<p>Cependant, ce modèle oblige le composant à compter sur le singleton global du store. Lorsqu'on utilise un système de module, il est nécessaire d'importer le store dans tous les composants qui utilisent l'état du store, et il est également nécessaire de le simuler lorsque l'on teste le composant.</p>
<p>Vuex fournit un mécanisme pour « injecter » le store dans tous les composants enfants du composant racine avec l'option <code>store</code> (activée par <code>Vue.use(Vuex)</code>) :</p>
<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
el<span class="token punctuation">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span>
<span class="token comment" spellcheck="true">// fournit le store avec l'option `store`.</span>
<span class="token comment" spellcheck="true">// cela injectera l'instance du store dans tous les composants enfants.</span>
store<span class="token punctuation">,</span>
components<span class="token punctuation">:</span> <span class="token punctuation">{</span> Counter <span class="token punctuation">}</span><span class="token punctuation">,</span>
template<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`
<div class="app">
<counter></counter>
</div>
`</span></span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre>
<p>En fournissant l'option <code>store</code> à l'instance racine, le store sera injecté dans tous les composants enfants de la racine et sera disponible dans ces derniers avec <code>this.$store</code>. Mettons à jour notre implémentation de <code>Counter</code> :</p>
<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> Counter <span class="token operator">=</span> <span class="token punctuation">{</span>
template<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`<div>{{ count }}</div>`</span></span><span class="token punctuation">,</span>
computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
count <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">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span>state<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="la-fonction-utilitaire-mapstate">La fonction utilitaire <code>mapState</code></h3>
<p>Lorsqu'un composant a besoin d'utiliser plusieurs accesseurs ou propriétés de l'état du store, déclarer toutes ces propriétés calculées peut devenir répétitif et verbeux. Afin de pallier à ça, nous pouvons utiliser la fonction utilitaire <code>mapState</code> qui génère des fonctions d'accession pour nous et nous épargne quelques coups de clavier :</p>
<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// dans la version complète, des fonctions utilitaires sont exposées telles que `Vuex.mapState`</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> mapState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vuex'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">// ...</span>
computed<span class="token punctuation">:</span> <span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">// les fonctions fléchées peuvent rendre le code très succinct !</span>
count<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">></span> state<span class="token punctuation">.</span>count<span class="token punctuation">,</span>
<span class="token comment" spellcheck="true">// passer la valeur littérale 'count' revient à écrire `state => state.count`</span>
countAlias<span class="token punctuation">:</span> <span class="token string">'count'</span><span class="token punctuation">,</span>
<span class="token comment" spellcheck="true">// pour accéder à l'état local avec `this`, une fonction normale doit être utilisée</span>
countPlusLocalState <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 keyword">this</span><span class="token punctuation">.</span>localCount
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Il est également possible de fournir un tableau de chaines de caractères à <code>mapState</code> lorsque le nom de la propriété calculée associée est le même que le nom de l'état du store.</p>
<pre class="language-"><code class="lang-js">computed<span class="token punctuation">:</span> <span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
<span class="token comment" spellcheck="true">// attacher `this.count` à `store.state.count`</span>
<span class="token string">'count'</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span>
</code></pre>
<h3 id="opérateur-de-décomposition">Opérateur de décomposition</h3>
<p>Notez que <code>mapState</code> renvoie un objet. Comment l'utiliser en complément des autres propriétés calculées locales ? Normalement, il faudrait utiliser un outil pour fusionner les multiples objets en un seul afin de passer cet objet final à <code>computed</code>. Cependant avec l'<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> (qui est une proposition stage-3 ECMASCript), nous pouvons grandement simplifier la syntaxe :</p>
<pre class="language-"><code class="lang-js">computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
localComputed <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>
<span class="token comment" spellcheck="true">// rajouter cet objet dans l'objet `computed` avec l'opérateur de décomposition</span>
<span class="token operator">...</span><span class="token function">mapState</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 punctuation">}</span>
</code></pre>
<h3 id="les-composants-peuvent-toujours-avoir-un-état-local">Les composants peuvent toujours avoir un état local</h3>
<p>Utiliser Vuex ne signifie pas que vous devez mettre <strong>tout</strong> votre état dans Vuex. Bien que le fait de mettre plus d'états dans Vuex rende vos mutations d'état plus explicites et plus débogable, parfois il peut aussi rendre le code plus verbeux et indirect. Si une partie de l'état appartient directement à un seul composant, il est parfaitement sain de la laisser dans l'état local. Assurez-vous de prendre en compte les avantages et inconvénients d'une telle décision afin de vous adapter au mieux aux besoins de votre application.</p>
</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="core-concepts.html" class="navigation navigation-prev " aria-label="Previous page: Concepts de base">
<i class="fa fa-angle-left"></i>
</a>
<a href="getters.html" class="navigation navigation-next " aria-label="Next page: Accesseurs">
<i class="fa fa-angle-right"></i>
</a>
</div>
<script>
var gitbook = gitbook || [];
gitbook.push(function() {
gitbook.page.hasChanged({"page":{"title":"État","level":"1.6.1","depth":2,"next":{"title":"Accesseurs","level":"1.6.2","depth":2,"path":"getters.md","ref":"getters.md","articles":[]},"previous":{"title":"Concepts de base","level":"1.6","depth":1,"path":"core-concepts.md","ref":"core-concepts.md","articles":[{"title":"État","level":"1.6.1","depth":2,"path":"state.md","ref":"state.md","articles":[]},{"title":"Accesseurs","level":"1.6.2","depth":2,"path":"getters.md","ref":"getters.md","articles":[]},{"title":"Mutations","level":"1.6.3","depth":2,"path":"mutations.md","ref":"mutations.md","articles":[]},{"title":"Actions","level":"1.6.4","depth":2,"path":"actions.md","ref":"actions.md","articles":[]},{"title":"Modules","level":"1.6.5","depth":2,"path":"modules.md","ref":"modules.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":"state.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>