vuex-help
Version:
a utilies library reduce boilerplate for vuex
534 lines (249 loc) • 19.8 kB
HTML
<html lang="fr" >
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Vuex, qu'est-ce que c'est ? · 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="getting-started.html" />
<link rel="prev" href="installation.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 active" 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 " 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="." >Vuex, qu'est-ce que c'est ?</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="vuex-quest-ce-que-cest-">Vuex, qu'est-ce que c'est ?</h1>
<p>Vuex est un <strong><em>gestionnaire d'état (« state management pattern »)</em> et une bibliothèque</strong> pour des applications Vue.js. Il sert de zone de stockage de données centralisée pour tous les composants dans une application, avec des règles pour s'assurer que l'état ne puisse subir de mutations que d'une manière prévisible. Il s'intègre également avec <a href="https://github.com/vuejs/vue-devtools" target="_blank">l'extension officielle</a> de Vue afin de fournir des fonctionnalités avancées comme de la visualisation d'état dans le temps et des exports et imports d’instantanés (« snapshot ») d'état.</p>
<h3 id="un-«-gestionnaire-détat-»-quest-ce-que-cest-">Un « gestionnaire d'état », qu'est-ce que c'est ?</h3>
<p>Commençons par une simple application de comptage avec Vue :</p>
<pre class="language-"><code class="lang-js"><span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">// état</span>
data <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>
count<span class="token punctuation">:</span> <span class="token number">0</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment" spellcheck="true">// vue</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>
<span class="token comment" spellcheck="true">// actions</span>
methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
increment <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><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><span class="token punctuation">)</span>
</code></pre>
<p>C'est une application autosuffisante avec les parties suivantes :</p>
<ul>
<li>L'<strong>état</strong>, qui est la source de vérité qui pilote votre application,</li>
<li>La <strong>vue</strong>, qui est une réflexion déclarative de l'<strong>état</strong>,</li>
<li>Les <strong>actions</strong>, qui sont les façons possibles pour l'état de changer en réaction aux actions utilisateurs depuis la <strong>vue</strong>.</li>
</ul>
<p>Voici une représentation extrêmement simple du concept de « flux de donnée unidirectionnel » :</p>
<p style="text-align: center; margin: 2em">
<img style="width:100%;max-width:450px;" src="images/flow.png">
</p>
<p>Cependant, la simplicité s'évapore rapidement lorsque nous avons <strong>de multiples composants qui partagent un même état global</strong> :</p>
<ul>
<li>Plusieurs vues peuvent dépendre de la même partie de l'état global.</li>
<li>Des actions dans différentes vues peuvent avoir besoin de muter la même partie de l'état global.</li>
</ul>
<p>Pour le premier problème, passer des props peut être fastidieux pour les composants profondément imbriqués, et ça ne fonctionne tout simplement pas pour les composants d'un même parent. Pour le deuxième problème, on se retrouve souvent à se rabattre sur des solutions telles qu'accéder aux références d'instance du parent/enfant direct ou essayer de muter et synchroniser de multiples copies de l'état via des évènements. Ces deux modèles sont fragiles et posent rapidement des problèmes de maintenabilité du code.</p>
<p>Alors pourquoi ne pas extraire l'état global partagé des composants, et le gérer dans un singleton global ? De cette manière, notre arbre de composant devient une grosse « vue », et n'importe quel composant peut accéder à l'état global ou déclencher des actions, peu importe où il se trouve dans l'arbre !</p>
<p>De plus, en définissant et en séparant les concepts impliqués dans la gestion de l'état global et en appliquant certaines règles, on donne aussi une structure et une maintenabilité à notre code.</p>
<p>Voilà l'idée de base derrière Vuex, inspiré par <a href="https://facebook.github.io/flux/docs/overview.html" target="_blank">Flux</a>, <a href="http://redux.js.org/" target="_blank">Redux</a> et <a href="https://guide.elm-lang.org/architecture/" target="_blank">l'architecture Elm</a>. À l'inverse des autres modèles, Vuex est aussi une bibliothèque d'implémentation conçue spécialement pour Vue.js afin de bénéficier de son système de réactivité granulaire pour des modifications efficaces.</p>
<p><img src="images/vuex.png" alt="vuex"></p>
<h3 id="quand-lutiliser-">Quand l'utiliser ?</h3>
<p>Bien que Vuex nous aide à gérer un état global partagé, il apporte aussi le cout de nouveaux concepts et <em>abstraction de code</em> (« boilerplate »). C'est un compromis entre la productivité à court terme et à long terme.</p>
<p>Si vous n'avez jamais créé une <em>application monopage</em> à grande échelle et que vous sautez directement dans Vuex, cela peut paraitre verbeux et intimidant. C'est parfaitement normal ; si votre application est simple, vous vous en sortirez sans doute très bien sans Vuex. Un simple <a href="https://fr.vuejs.org/v2/guide/components.html#Communication-non-parent-enfant" target="_blank">canal d'évènement global</a> pourrait très bien vous suffire. Mais si vous devez créer une application monopage à moyenne ou grande échelle, il y a des chances que vous vous trouviez dans des situations qui vous feront vous interroger sur une meilleure gestion de l'état global, détaché de votre composant Vue, et Vuex sera naturellement la prochaine étape pour vous. Voici une bonne citation de Dan Abramov, l'auteur de Redux :</p>
<blockquote>
<p>« Les librairies Flux, c'est comme les lunettes : vous saurez quand vous en aurez besoin. »</p>
</blockquote>
</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="installation.html" class="navigation navigation-prev " aria-label="Previous page: Installation">
<i class="fa fa-angle-left"></i>
</a>
<a href="getting-started.html" class="navigation navigation-next " aria-label="Next page: Pour commencer">
<i class="fa fa-angle-right"></i>
</a>
</div>
<script>
var gitbook = gitbook || [];
gitbook.push(function() {
gitbook.page.hasChanged({"page":{"title":"Vuex, qu'est-ce que c'est ?","level":"1.4","depth":1,"next":{"title":"Pour commencer","level":"1.5","depth":1,"path":"getting-started.md","ref":"getting-started.md","articles":[]},"previous":{"title":"Installation","level":"1.3","depth":1,"path":"installation.md","ref":"installation.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":"intro.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>