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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514
							
<!DOCTYPE HTML>
<html lang="en" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>Getting Started · 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="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="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 active" 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 " 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="." >Getting Started</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="getting-started">Getting Started</h1>
<p>At the center of every Vuex application is the <strong>store</strong>. A &quot;store&quot; is basically a container that holds your application <strong>state</strong>. There are two things that make a Vuex store different from a plain global object:</p>
<ol>
<li><p>Vuex stores are reactive. When Vue components retrieve state from it, they will reactively and efficiently update if the store&apos;s state changes.</p>
</li>
<li><p>You cannot directly mutate the store&apos;s state. The only way to change a store&apos;s state is by explicitly <strong>committing mutations</strong>. This ensures every state change leaves a track-able record, and enables tooling that helps us better understand our applications.</p>
</li>
</ol>
<h3 id="the-simplest-store">The Simplest Store</h3>
<blockquote>
<p><strong>NOTE:</strong> We will be using ES2015 syntax for code examples for the rest of the docs. If you haven&apos;t picked it up, <a href="https://babeljs.io/docs/learn-es2015/" target="_blank">you should</a>!</p>
</blockquote>
<p>After <a href="installation.html">installing</a> Vuex, let&apos;s create a store. It is pretty straightforward - just provide an initial state object, and some mutations:</p>
<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// Make sure to call Vue.use(Vuex) first if using a module system</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>Now, you can access the state object as <code>store.state</code>, and trigger a state change with the <code>store.commit</code> method:</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">&apos;increment&apos;</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">// -&gt; 1</span>
</code></pre>
<p>Again, the reason we are committing a mutation instead of changing <code>store.state.count</code> directly, is because we want to explicitly track it. This simple convention makes your intention more explicit, so that you can reason about state changes in your app better when reading the code. In addition, this gives us the opportunity to implement tools that can log every mutation, take state snapshots, or even perform time travel debugging.</p>
<p>Using store state in a component simply involves returning the state within a computed property, because the store state is reactive. Triggering changes simply means committing mutations in component methods.</p>
<p>Here&apos;s an example of the <a href="https://jsfiddle.net/n9jmu5v7/1269/" target="_blank">most basic Vuex counter app</a>.</p>
<p>Next, we will discuss each core concept in much finer details, starting with <a href="state.html">State</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: What is Vuex?">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="core-concepts.html" class="navigation navigation-next " aria-label="Next page: Core Concepts">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"Getting Started","level":"1.5","depth":1,"next":{"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":[]}]},"previous":{"title":"What is Vuex?","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":{"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":"getting-started.md","mtime":"2018-04-20T00:44:03.849Z","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>