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="modules.html" /> <link rel="prev" href="mutations.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 " 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 active" 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> <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> Действия — похожи на мутации с несколькими отличиями: <ul> <li>Вместо того, чтобы напрямую менять состояние, действия инициируют мутации;</li> <li>Действия могут использоваться для асинхронных операций.</li> </ul> Зарегистрируем простое действие: <pre class="language-"><code class="lang-js">const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } }) </code></pre> Обработчики действий получают объект контекста, содержащий те же методы и свойства, что и сам экземпляр хранилища, так что вы можете вызвать <code>context.commit</code> для инициирования мутации или обратиться к состоянию и геттерам через <code>context.state</code> и <code>context.getters</code>. Позднее при рассмотрении <a href="modules.html">Модулей</a> мы увидим, однако, что этот контекст — не то же самое, что экземпляр хранилища. На практике для упрощения кода часто используется <a href="https://github.com/lukehoban/es6features#destructuring" target="_blank">деструктуризация аргументов</a> из ES2015 (особенно при необходимости многократного вызова <code>commit</code>): <pre class="language-"><code class="lang-js">actions: { increment ({ commit }) { commit('increment') } } </code></pre> <h3 id="диспетчеризация-действий">Диспетчеризация действий</h3> Действия запускаются методом <code>store.dispatch</code>: <pre class="language-"><code class="lang-js">store.dispatch('increment') </code></pre> На первый взгляд может выглядеть глупо: если мы хотим увеличить значение count, почему бы просто не вызвать <code>store.commit('increment')</code> напрямую? Помните что мутации должны быть синхронными? Для действий такого ограничения нет. Внутри действий можно выполнять асинхронные операции: <pre class="language-"><code class="lang-js">actions: { incrementAsync ({ commit }) { setTimeout(() => { commit('increment') }, 1000) } } </code></pre> Диспетчеризация действий поддерживает тот же объектный синтаксис, что и диспетчеризация мутаций: <pre class="language-"><code class="lang-js">// параметризированный вызов store.dispatch('incrementAsync', { amount: 10 }) // объектный синтаксис store.dispatch({ type: 'incrementAsync', amount: 10 }) </code></pre> Более приближённым к реальности примером действий будет формирование заказа на основе состояния корзины покупок. Логика такого действия включает в себя вызов асинхронного API и инициализацию нескольких мутаций: <pre class="language-"><code class="lang-js">actions: { checkout ({ commit, state }, products) { // сохраним находящиеся на данный момент в корзине товары const savedCartItems = [...state.cart.added] // инициируем запрос и "оптимистично" очистим корзину commit(types.CHECKOUT_REQUEST) // предположим, что API магазина позволяет передать коллбэки // для обработки успеха и неудачи при формировании заказа shop.buyProducts( products, // обработка успешного исхода () => commit(types.CHECKOUT_SUCCESS), // обработка неудачного исхода () => commit(types.CHECKOUT_FAILURE, savedCartItems) ) } } </code></pre> Таким образом удаётся организовать поток асинхронных операций, записывая побочные эффекты действий в виде мутаций состояния. <h3 id="диспетчеризация-действий-в-компонентах">Диспетчеризация действий в компонентах</h3> Диспетчеризировать действия в компонентах можно при помощи <code>this.$store.dispatch('xxx')</code> или используя вспомогательную функцию <code>mapActions</code>, создающую локальные псевдонимы для действий в виде методов компонента (требуется наличие корневого <code>$store</code>): <pre class="language-"><code class="lang-js">import { mapActions } from 'vuex' export default { // ... methods: { ...mapActions([ 'increment' // проксирует `this.increment()` в `this.$store.dispatch('increment')` // `mapActions` также поддерживают нагрузку (payloads): 'incrementBy' // проксирует `this.incrementBy(amount)` в `this.$store.dispatch('incrementBy', amount)` ]), ...mapActions({ add: 'increment' // проксирует `this.add()` в `this.$store.dispatch('increment')` }) } } </code></pre> <h3 id="композиция-действий">Композиция действий</h3> Раз действия зачастую асинхронны, то как узнать, что действие уже завершилось? И, что важнее, как быть со связанными между собой действиями при организации более сложных асинхронных потоков? Первое, что нужно знать — <code>store.dispatch</code> может обрабатывать Promise, возвращаемый обработчиком действия, и также возвращает Promise: <pre class="language-"><code class="lang-js">actions: { actionA ({ commit }) { return new Promise((resolve, reject) => { setTimeout(() => { commit('someMutation') resolve() }, 1000) }) } } </code></pre> Теперь можно сделать так: <pre class="language-"><code class="lang-js">store.dispatch('actionA').then(() => { // ... }) </code></pre> А в другом действии — так: <pre class="language-"><code class="lang-js">actions: { // ... actionB ({ dispatch, commit }) { return dispatch('actionA').then(() => { commit('someOtherMutation') }) } } </code></pre> Наконец, если мы используем <a href="https://tc39.github.io/ecmascript-asyncawait/" target="_blank">async / await</a>, то можем компоновать наши действия следующим образом: <pre class="language-"><code class="lang-js">// предположим, что `getData()` и `getOtherData()` возвращают Promise actions: { async actionA ({ commit }) { commit('gotData', await getData()) }, async actionB ({ dispatch, commit }) { await dispatch('actionA') // дожидаемся завершения действия `actionA` commit('gotOtherData', await getOtherData()) } } </code></pre> <blockquote> <code>store.dispatch</code> может вызывать несколько обработчиков действий в различных модулях одновременно. В этом случае возвращаемым значением будет Promise, разрешающийся после разрешения всех вызванных обработчиков. </blockquote> </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="mutations.html" class="navigation navigation-prev " aria-label="Previous page: Мутации"> </a> <a href="modules.html" class="navigation navigation-next " aria-label="Next page: Модули"> </a> </div> <script> var gitbook = gitbook || []; gitbook.push(function() { gitbook.page.hasChanged({"page":{"title":"Действия","level":"1.6.4","depth":2,"next":{"title":"Модули","level":"1.6.5","depth":2,"path":"modules.md","ref":"modules.md","articles":[]},"previous":{"title":"Мутации","level":"1.6.3","depth":2,"path":"mutations.md","ref":"mutations.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":"actions.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>