vuex-help

<!DOCTYPE HTML> <html lang="ru" > <head> <meta charset="UTF-8"> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Состояние · 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="Введите условия поиска" /> </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"> История изменений </a> </li> <li class="chapter " data-level="1.3" data-path="installation.html"> <a href="installation.html"> Установка </a> </li> <li class="chapter " data-level="1.4" data-path="intro.html"> <a href="intro.html"> Что такое Vuex? </a> </li> <li class="chapter " data-level="1.5" data-path="getting-started.html"> <a href="getting-started.html"> Начало работы </a> </li> <li class="chapter " data-level="1.6" data-path="core-concepts.html"> <a href="core-concepts.html"> Основные понятия </a> <ul class="articles"> <li class="chapter active" data-level="1.6.1" data-path="state.html"> <a href="state.html"> Состояние </a> </li> <li class="chapter " data-level="1.6.2" data-path="getters.html"> <a href="getters.html"> Геттеры </a> </li> <li class="chapter " data-level="1.6.3" data-path="mutations.html"> <a href="mutations.html"> Мутации </a> </li> <li class="chapter " data-level="1.6.4" data-path="actions.html"> <a href="actions.html"> Действия </a> </li> <li class="chapter " data-level="1.6.5" data-path="modules.html"> <a href="modules.html"> Модули </a> </li> </ul> </li> <li class="chapter " data-level="1.7" data-path="structure.html"> <a href="structure.html"> Структура приложения </a> </li> <li class="chapter " data-level="1.8" data-path="plugins.html"> <a href="plugins.html"> Плагины </a> </li> <li class="chapter " data-level="1.9" data-path="strict.html"> <a href="strict.html"> Строгий режим (strict mode) </a> </li> <li class="chapter " data-level="1.10" data-path="forms.html"> <a href="forms.html"> Обработка форм </a> </li> <li class="chapter " data-level="1.11" data-path="testing.html"> <a href="testing.html"> Тестирование </a> </li> <li class="chapter " data-level="1.12" data-path="hot-reload.html"> <a href="hot-reload.html"> Горячая замена </a> </li> <li class="chapter " data-level="1.13" data-path="api.html"> <a href="api.html"> Справочник API </a> </li> <li class="divider"></li> <li> <a href="https://www.gitbook.com" target="blank" class="gitbook-link"> Опубликовано с помощью GitBook </a> </li> </ul> </nav> </div> <div class="book-body"> <div class="body-inner"> <div class="book-header" role="navigation">  <h1> <i class="fa fa-circle-o-notch fa-spin"></i> <a href="." >Состояние</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="состояние">Состояние</h1> <h3 id="единое-дерево-состояния">Единое дерево состояния</h3> <p>Vuex использует <strong>единое дерево состояния</strong> — таким образом, один-единственный объект содержит всё глобальное состояние приложения и служит "единственным источником истины". Кроме того, это значит, что обычно для каждого приложения существует только одно хранилище. Благодаря единому дереву можно легко найти нужную часть состояния или делать слепки всего состояния приложения для отладки.</p> <p>Единое дерево состояния не конфликтует с концепцией модульности — в последующих главах мы расскажем, как можно разбить хранилище на подмодули.</p> <h3 id="передача-состояния-vuex-в-компоненты-vue">Передача состояния Vuex в компоненты Vue</h3> <p>Так как же отобразить состояние хранилища в компонентах Vue? Поскольку хранилище Vuex реактивно, проще всего использовать <a href="https://ru.vuejs.org/v2/guide/computed.html" target="_blank">вычисляемые свойства</a>:</p> <pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// создадим компонент-счётчик:</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>Любые изменения <code>store.state.count</code> вызовут обновление вычисляемого свойства, которые инициируют соответствующие обновления в DOM.</p> <p>Однако этот паттерн заставляет компонент явно полагаться на глобальный синглтон хранилища. При использовании модульной системы, это потребует импортирования хранилища в каждый компонент, использующий глобальное состояние и приведет к усложнению тестирования.</p> <p>Vuex предоставляет механизм "инъекции" хранилища всем потомкам компонента, у которого указана опция <code>store</code> (предварительно необходимо вызвать <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">// указываем хранилище в опции "store", что обеспечит</span> <span class="token comment" spellcheck="true">// доступ к нему также и для всех дочерних компонентов</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>Указывая опцию <code>store</code> для корневого экземпляра, мы обеспечиваем доступ к хранилищу всем дочерним компонентам в <code>this.$store</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="вспомогательная-функция-mapstate">Вспомогательная функция <code>mapState</code></h3> <p>Если компонент использует множество свойств или геттеров хранилища, объявление доступа к ним всем вручную может заставить изрядно заскучать, да и код получится многословный. Чтобы обойти эту проблему, можно использовать хелпер <code>mapState</code>, автоматически генерирующий вычисляемые свойства, проксирующие доступ к состоянию и геттерам хранилища:</p> <pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// с полной сборкой можно использовать как 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">// стрелочные функции позволяют писать код очень лаконично</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">// передача строки 'count' эквивалентна записи `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">// если требуется доступ и к локальному состоянию, нужно использовать традиционную функцию</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>В простых случаях в <code>mapState</code> можно передать и просто массив строк:</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">// проксирует через 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="оператор-распространения-объектов">Оператор распространения объектов</h3> <p>Обратите внимание: <code>mapState</code> возвращает объект. Как же быть, если нам нужны и локальные вычисляемые свойства? Обычно в таких случаях приходилось использовать вспомогательные утилиты для слияния объектов, и передавать уже результат их работы в <code>computed</code>. Однако, применив <a href="https://github.com/sebmarkbage/ecmascript-rest-spread" target="_blank">оператор распространения объектов</a> (находящегося в статусе stage-3 ECMAScript proposal) мы можем изрядно упростить запись:</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">// результаты работы mapState будут добавлены в уже существующий объект</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="компоненты-всё-ещё-могут-иметь-локальное-состояние">Компоненты всё ещё могут иметь локальное состояние</h3> <p>То что вы используете Vuex не значит, что нужно выносить в хранилище <strong>всё</strong> состояние приложения. Поместив большую часть логики во Vuex, вы сделаете мутации более красноречивыми и удобными для отладки, но это иногда может привести к излишней многословности и ненужному усложнению логики. Если состояние компонента полностью локально, выносить его во Vuex может быть бессмысленно. Конечное решение всегда остаётся на усмотрение разработчика и зависит от потребностей конкретного приложения.</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: Основные понятия"> <i class="fa fa-angle-left"></i> </a> <a href="getters.html" class="navigation navigation-next " aria-label="Next page: Геттеры"> <i class="fa fa-angle-right"></i> </a> </div> <script> var gitbook = gitbook || []; gitbook.push(function() { gitbook.page.hasChanged({"page":{"title":"Состояние","level":"1.6.1","depth":2,"next":{"title":"Геттеры","level":"1.6.2","depth":2,"path":"getters.md","ref":"getters.md","articles":[]},"previous":{"title":"Основные понятия","level":"1.6","depth":1,"path":"core-concepts.md","ref":"core-concepts.md","articles":[{"title":"Состояние","level":"1.6.1","depth":2,"path":"state.md","ref":"state.md","articles":[]},{"title":"Геттеры","level":"1.6.2","depth":2,"path":"getters.md","ref":"getters.md","articles":[]},{"title":"Мутации","level":"1.6.3","depth":2,"path":"mutations.md","ref":"mutations.md","articles":[]},{"title":"Действия","level":"1.6.4","depth":2,"path":"actions.md","ref":"actions.md","articles":[]},{"title":"Модули","level":"1.6.5","depth":2,"path":"modules.md","ref":"modules.md","articles":[]}]},"dir":"ltr"},"config":{"plugins":["edit-link","prism","theme-vuejs@git+https://github.com/pearofducks/gitbook-plugin-theme-vuejs.git","-fontsettings","-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":"Редактировать эту страницу","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":"ru","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":">3.0.0"},"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":"ru"}}); }); </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>