vuex-help
Version:
a utilies library reduce boilerplate for vuex
519 lines (233 loc) • 18.1 kB
HTML
<html lang="fr" >
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Pour commencer · 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="core-concepts.html" />
<link rel="prev" href="intro.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 active" 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="." >Pour commencer</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="pour-commencer">Pour commencer</h1>
<p>Au cœur de chaque application Vuex, il y a la <strong>zone de stockage (« store »)</strong>. Un « store » est tout simplement un conteneur avec l'<strong>état (« state »)</strong> de votre application. Il y a deux choses qui différencient un store Vuex d'un simple objet global :</p>
<ol>
<li><p>Les stores Vuex sont réactifs. Quand les composants Vue y récupèrent l'état, ils se mettront à jour de façon réactive et efficace si l'état du store a changé.</p>
</li>
<li><p>Vous ne pouvez pas muter directement l'état du store. La seule façon de modifier l'état d'un store est d'<strong>acter (« commit »)</strong> explicitement des <strong>mutations</strong>. Cela assure que chaque état laisse un enregistrement traçable, et permet à des outils de nous aider à mieux appréhender nos applications.</p>
</li>
</ol>
<h3 id="le-store-le-plus-simple">Le store le plus simple</h3>
<blockquote>
<p><strong>NOTE:</strong> Nous allons utiliser la syntaxe ES2015 dans les exemples de code pour le reste de la documentation. Si vous ne vous êtes pas encore penché dessus, <a href="https://babeljs.io/docs/learn-es2015/" target="_blank">vous devriez</a> !</p>
</blockquote>
<p>Après <a href="installation.html">avoir installé</a> Vuex, nous allons créer un store. C'est assez simple ; définissez juste un objet d'état initial et quelques mutations :</p>
<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// Assurez vous d'appeler `Vue.use(Vuex)` en premier lieu si vous utilisez un système de module</span>
<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
state<span class="token punctuation">:</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>
mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span>
increment <span class="token punctuation">(</span>state<span class="token punctuation">)</span> <span class="token punctuation">{</span>
state<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>Maintenant, vous pouvez accéder à l'objet d'état avec <code>store.state</code>, et déclencher un changement d'état avec la méthode <code>store.commit</code> :</p>
<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</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 comment" spellcheck="true">// -> 1</span>
</code></pre>
<p>Encore une fois, la raison pour laquelle nous actons une mutation au lieu de modifier <code>store.state.count</code> directement, c'est parce que nous voulons le tracer explicitement. Cette simple convention rend votre intention plus explicite, ainsi vous pouvez raisonner plus facilement les changements d'état en lisant votre code. De plus, cela nous donne l'opportunité d'implémenter des outils qui peuvent enregistrer chaque mutation, prendre des instantanés de l'état, ou même procéder à de la visualisation d'état dans le temps.</p>
<p>Utiliser l'état du store dans un composant implique simplement de retourner l'état dans une <em>propriété calculée</em>, car l'état du store est réactif. Déclencher des changements signifie simplement d'acter des mutations dans les méthodes du composant.</p>
<p>Voici un exemple de l'<a href="https://jsfiddle.net/n9jmu5v7/1269/" target="_blank">application de comptage Vuex la plus basique</a>.</p>
<p>Ensuite, nous allons examiner chaque concept de base plus en détails, et commençons avec l'<a href="state.html">État</a>.</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="intro.html" class="navigation navigation-prev " aria-label="Previous page: Vuex, qu'est-ce que c'est ?">
<i class="fa fa-angle-left"></i>
</a>
<a href="core-concepts.html" class="navigation navigation-next " aria-label="Next page: Concepts de base">
<i class="fa fa-angle-right"></i>
</a>
</div>
<script>
var gitbook = gitbook || [];
gitbook.push(function() {
gitbook.page.hasChanged({"page":{"title":"Pour commencer","level":"1.5","depth":1,"next":{"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":[]}]},"previous":{"title":"Vuex, qu'est-ce que c'est ?","level":"1.4","depth":1,"path":"intro.md","ref":"intro.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":"getting-started.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>