oleg
/
vuex
mirror of https://github.com/vuejs/vuex.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560
							
<!DOCTYPE HTML>
<html lang="en" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>State · Vuex</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.2">
        
        
    <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="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 active" 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 " 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">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="." >State</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="state">State</h1>
<h3 id="single-state-tree">Single State Tree</h3>
<p>Vuex uses a <strong>single state tree</strong> - that is, this single object contains all your application level state and serves as the &quot;single source of truth&quot;. This also means usually you will have only one store for each application. A single state tree makes it straightforward to locate a specific piece of state, and allows us to easily take snapshots of the current app state for debugging purposes.</p>
<p>The single state tree does not conflict with modularity - in later chapters we will discuss how to split your state and mutations into sub modules.</p>
<h3 id="getting-vuex-state-into-vue-components">Getting Vuex State into Vue Components</h3>
<p>So how do we display state inside the store in our Vue components? Since Vuex stores are reactive, the simplest way to &quot;retrieve&quot; state from it is simply returning some store state from within a <a href="https://vuejs.org/guide/computed.html" target="_blank">computed property</a>:</p>
<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// let&apos;s create a Counter component</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">`&lt;div&gt;{{ count }}&lt;/div&gt;`</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>Whenever <code>store.state.count</code> changes, it will cause the computed property to re-evaluate, and trigger associated DOM updates.</p>
<p>However, this pattern causes the component to rely on the global store singleton. When using a module system, it requires importing the store in every component that uses store state, and also requires mocking when testing the component.</p>
<p>Vuex provides a mechanism to &quot;inject&quot; the store into all child components from the root component with the <code>store</code> option (enabled by <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">&apos;#app&apos;</span><span class="token punctuation">,</span>
  <span class="token comment" spellcheck="true">// provide the store using the &quot;store&quot; option.</span>
  <span class="token comment" spellcheck="true">// this will inject the store instance to all child components.</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">`
    &lt;div class=&quot;app&quot;&gt;
      &lt;counter&gt;&lt;/counter&gt;
    &lt;/div&gt;
  `</span></span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre>
<p>By providing the <code>store</code> option to the root instance, the store will be injected into all child components of the root and will be available on them as <code>this.$store</code>. Let&apos;s update our <code>Counter</code> implementation:</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">`&lt;div&gt;{{ count }}&lt;/div&gt;`</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="the-mapstate-helper">The <code>mapState</code> Helper</h3>
<p>When a component needs to make use of multiple store state properties or getters, declaring all these computed properties can get repetitive and verbose. To deal with this we can make use of the <code>mapState</code> helper which generates computed getter functions for us, saving us some keystrokes:</p>
<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// in full builds helpers are exposed as 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">&apos;vuex&apos;</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">// arrow functions can make the code very succinct!</span>
    count<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> state<span class="token punctuation">.</span>count<span class="token punctuation">,</span>

    <span class="token comment" spellcheck="true">// passing the string value &apos;count&apos; is same as `state =&gt; state.count`</span>
    countAlias<span class="token punctuation">:</span> <span class="token string">&apos;count&apos;</span><span class="token punctuation">,</span>

    <span class="token comment" spellcheck="true">// to access local state with `this`, a normal function must be used</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>We can also pass a string array to <code>mapState</code> when the name of a mapped computed property is the same as a state sub tree name.</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">// map this.count to store.state.count</span>
  <span class="token string">&apos;count&apos;</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span>
</code></pre>
<h3 id="object-spread-operator">Object Spread Operator</h3>
<p>Note that <code>mapState</code> returns an object. How do we use it in combination with other local computed properties? Normally, we&apos;d have to use a utility to merge multiple objects into one so that we can pass the final object to <code>computed</code>. However with the <a href="https://github.com/sebmarkbage/ecmascript-rest-spread" target="_blank">object spread operator</a> (which is a stage-4 ECMAScript proposal), we can greatly simplify the syntax:</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">// mix this into the outer object with the object spread operator</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="components-can-still-have-local-state">Components Can Still Have Local State</h3>
<p>Using Vuex doesn&apos;t mean you should put <strong>all</strong> the state in Vuex. Although putting more state into Vuex makes your state mutations more explicit and debuggable, sometimes it could also make the code more verbose and indirect. If a piece of state strictly belongs to a single component, it could be just fine leaving it as local state. You should weigh the trade-offs and make decisions that fit the development needs of your app.</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: Core Concepts">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="getters.html" class="navigation navigation-next " aria-label="Next page: Getters">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"State","level":"1.6.1","depth":2,"next":{"title":"Getters","level":"1.6.2","depth":2,"path":"getters.md","ref":"getters.md","articles":[]},"previous":{"title":"Core Concepts","level":"1.6","depth":1,"path":"core-concepts.md","ref":"core-concepts.md","articles":[{"title":"State","level":"1.6.1","depth":2,"path":"state.md","ref":"state.md","articles":[]},{"title":"Getters","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":[]}]},"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":{"edit-link":{"label":"Edit This Page","base":"https://github.com/vuejs/vuex/tree/dev/docs"},"github":{"url":"https://github.com/vuejs/vuex/"},"prism":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":false,"twitter":false,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"theme-vuejs":{},"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":"state.md","mtime":"2018-04-20T00:44:03.853Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"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-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>