vuex-help

<!DOCTYPE HTML> <html lang="en" > <head> <meta charset="UTF-8"> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Actions · 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="Type to search" /> </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"> Release Notes </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"> What is Vuex? </a> </li> <li class="chapter " data-level="1.5" data-path="getting-started.html"> <a href="getting-started.html"> Getting Started </a> </li> <li class="chapter " data-level="1.6" data-path="core-concepts.html"> <a href="core-concepts.html"> Core Concepts </a> <ul class="articles"> <li class="chapter " data-level="1.6.1" data-path="state.html"> <a href="state.html"> State </a> </li> <li class="chapter " data-level="1.6.2" data-path="getters.html"> <a href="getters.html"> Getters </a> </li> <li class="chapter " data-level="1.6.3" data-path="mutations.html"> <a href="mutations.html"> Mutations </a> </li> <li class="chapter active" 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"> Application Structure </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"> Strict Mode </a> </li> <li class="chapter " data-level="1.10" data-path="forms.html"> <a href="forms.html"> Form Handling </a> </li> <li class="chapter " data-level="1.11" data-path="testing.html"> <a href="testing.html"> Testing </a> </li> <li class="chapter " data-level="1.12" data-path="hot-reload.html"> <a href="hot-reload.html"> Hot Reloading </a> </li> <li class="chapter " data-level="1.13" data-path="api.html"> <a href="api.html"> API Reference </a> </li> <li class="divider"></li> <li> <a href="https://www.gitbook.com" target="blank" class="gitbook-link"> Published with GitBook </a> </li> </ul> </nav> </div> <div class="book-body"> <div class="body-inner"> <div class="book-header" role="navigation">  <h1> <a href="." >Actions</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="actions">Actions</h1> Actions are similar to mutations, the differences being that: <ul> <li>Instead of mutating the state, actions commit mutations.</li> <li>Actions can contain arbitrary asynchronous operations.</li> </ul> Let's register a simple action: <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> Action handlers receive a context object which exposes the same set of methods/properties on the store instance, so you can call <code>context.commit</code> to commit a mutation, or access the state and getters via <code>context.state</code> and <code>context.getters</code>. We will see why this context object is not the store instance itself when we introduce <a href="modules.html">Modules</a> later. In practice, we often use ES2015 <a href="https://github.com/lukehoban/es6features#destructuring" target="_blank">argument destructuring</a> to simplify the code a bit (especially when we need to call <code>commit</code> multiple times): <pre class="language-"><code class="lang-js">actions: { increment ({ commit }) { commit('increment') } } </code></pre> <h3 id="dispatching-actions">Dispatching Actions</h3> Actions are triggered with the <code>store.dispatch</code> method: <pre class="language-"><code class="lang-js">store.dispatch('increment') </code></pre> This may look dumb at first sight: if we want to increment the count, why don't we just call <code>store.commit('increment')</code> directly? Remember that mutations have to be synchronous? Actions don't. We can perform asynchronous operations inside an action: <pre class="language-"><code class="lang-js">actions: { incrementAsync ({ commit }) { setTimeout(() => { commit('increment') }, 1000) } } </code></pre> Actions support the same payload format and object-style dispatch: <pre class="language-"><code class="lang-js">// dispatch with a payload store.dispatch('incrementAsync', { amount: 10 }) // dispatch with an object store.dispatch({ type: 'incrementAsync', amount: 10 }) </code></pre> A more practical example of real-world actions would be an action to checkout a shopping cart, which involves calling an async API and committing multiple mutations: <pre class="language-"><code class="lang-js">actions: { checkout ({ commit, state }, products) { // save the items currently in the cart const savedCartItems = [...state.cart.added] // send out checkout request, and optimistically // clear the cart commit(types.CHECKOUT_REQUEST) // the shop API accepts a success callback and a failure callback shop.buyProducts( products, // handle success () => commit(types.CHECKOUT_SUCCESS), // handle failure () => commit(types.CHECKOUT_FAILURE, savedCartItems) ) } } </code></pre> Note we are performing a flow of asynchronous operations, and recording the side effects (state mutations) of the action by committing them. <h3 id="dispatching-actions-in-components">Dispatching Actions in Components</h3> You can dispatch actions in components with <code>this.$store.dispatch('xxx')</code>, or use the <code>mapActions</code> helper which maps component methods to <code>store.dispatch</code> calls (requires root <code>store</code> injection): <pre class="language-"><code class="lang-js">import { mapActions } from 'vuex' export default { // ... methods: { ...mapActions([ 'increment', // map `this.increment()` to `this.$store.dispatch('increment')` // `mapActions` also supports payloads: 'incrementBy' // map `this.incrementBy(amount)` to `this.$store.dispatch('incrementBy', amount)` ]), ...mapActions({ add: 'increment' // map `this.add()` to `this.$store.dispatch('increment')` }) } } </code></pre> <h3 id="composing-actions">Composing Actions</h3> Actions are often asynchronous, so how do we know when an action is done? And more importantly, how can we compose multiple actions together to handle more complex async flows? The first thing to know is that <code>store.dispatch</code> can handle Promise returned by the triggered action handler and it also returns Promise: <pre class="language-"><code class="lang-js">actions: { actionA ({ commit }) { return new Promise((resolve, reject) => { setTimeout(() => { commit('someMutation') resolve() }, 1000) }) } } </code></pre> Now you can do: <pre class="language-"><code class="lang-js">store.dispatch('actionA').then(() => { // ... }) </code></pre> And also in another action: <pre class="language-"><code class="lang-js">actions: { // ... actionB ({ dispatch, commit }) { return dispatch('actionA').then(() => { commit('someOtherMutation') }) } } </code></pre> Finally, if we make use of <a href="https://tc39.github.io/ecmascript-asyncawait/" target="_blank">async / await</a>, we can compose our actions like this: <pre class="language-"><code class="lang-js">// assuming `getData()` and `getOtherData()` return Promises actions: { async actionA ({ commit }) { commit('gotData', await getData()) }, async actionB ({ dispatch, commit }) { await dispatch('actionA') // wait for `actionA` to finish commit('gotOtherData', await getOtherData()) } } </code></pre> <blockquote> It's possible for a <code>store.dispatch</code> to trigger multiple action handlers in different modules. In such a case the returned value will be a Promise that resolves when all triggered handlers have been resolved. </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: Mutations"> </a> <a href="modules.html" class="navigation navigation-next " aria-label="Next page: Modules"> </a> </div> <script> var gitbook = gitbook || []; gitbook.push(function() { gitbook.page.hasChanged({"page":{"title":"Actions","level":"1.6.4","depth":2,"next":{"title":"Modules","level":"1.6.5","depth":2,"path":"modules.md","ref":"modules.md","articles":[]},"previous":{"title":"Mutations","level":"1.6.3","depth":2,"path":"mutations.md","ref":"mutations.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":"Edit This 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":"en","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"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":"en"}}); }); </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>