Home Explore Help
Register Sign In
oleg
/
vuex
mirror of https://github.com/vuejs/vuex.git
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

update book

Shinya Katayama 7 years ago
commit
931a316562
100 changed files with 32994 additions and 0 deletions
Unified View Show Diff Stats
  1. 1 0
      CNAME
  2. 1 0
      assets/CNAME
  3. 4 0
      assets/circle.yml
  4. 34 0
      assets/vuex.ai
  5. 4 0
      circle.yml
  6. 9 0
      deploy.sh
  7. 619 0
      en/actions.html
  8. 664 0
      en/api.html
  9. 490 0
      en/core-concepts.html
  10. 523 0
      en/forms.html
  11. 560 0
      en/getters.html
  12. 473 0
      en/getting-started.html
  13. 518 0
      en/hot-reload.html
  14. BIN
      en/images/flow.png
  15. BIN
      en/images/vuex.png
  16. 492 0
      en/index.html
  17. 517 0
      en/installation.html
  18. 529 0
      en/intro.html
  19. 743 0
      en/modules.html
  20. 607 0
      en/mutations.html
  21. 576 0
      en/plugins.html
  22. 0 0
      en/search_index.json
  23. 519 0
      en/state.html
  24. 495 0
      en/strict.html
  25. 507 0
      en/structure.html
  26. 681 0
      en/testing.html
  27. 619 0
      fr/actions.html
  28. 658 0
      fr/api.html
  29. 490 0
      fr/core-concepts.html
  30. 523 0
      fr/forms.html
  31. 556 0
      fr/getters.html
  32. 473 0
      fr/getting-started.html
  33. 518 0
      fr/hot-reload.html
  34. BIN
      fr/images/flow.png
  35. BIN
      fr/images/vuex.png
  36. 492 0
      fr/index.html
  37. 503 0
      fr/installation.html
  38. 529 0
      fr/intro.html
  39. 721 0
      fr/modules.html
  40. 607 0
      fr/mutations.html
  41. 576 0
      fr/plugins.html
  42. 0 0
      fr/search_index.json
  43. 519 0
      fr/state.html
  44. 495 0
      fr/strict.html
  45. 507 0
      fr/structure.html
  46. 666 0
      fr/testing.html
  47. BIN
      gitbook/fonts/fontawesome/FontAwesome.otf
  48. BIN
      gitbook/fonts/fontawesome/fontawesome-webfont.eot
  49. 196 0
      gitbook/fonts/fontawesome/fontawesome-webfont.svg
  50. BIN
      gitbook/fonts/fontawesome/fontawesome-webfont.ttf
  51. BIN
      gitbook/fonts/fontawesome/fontawesome-webfont.woff
  52. BIN
      gitbook/fonts/fontawesome/fontawesome-webfont.woff2
  53. 30 0
      gitbook/gitbook-plugin-edit-link/plugin.js
  54. 14 0
      gitbook/gitbook-plugin-github/plugin.js
  55. 6 0
      gitbook/gitbook-plugin-lunr/lunr.min.js
  56. 59 0
      gitbook/gitbook-plugin-lunr/search-lunr.js
  57. 221 0
      gitbook/gitbook-plugin-prism/prism-coy.css
  58. 128 0
      gitbook/gitbook-plugin-prism/prism-dark.css
  59. 116 0
      gitbook/gitbook-plugin-prism/prism-funky.css
  60. 121 0
      gitbook/gitbook-plugin-prism/prism-okaidia.css
  61. 148 0
      gitbook/gitbook-plugin-prism/prism-solarizedlight.css
  62. 121 0
      gitbook/gitbook-plugin-prism/prism-tomorrow.css
  63. 198 0
      gitbook/gitbook-plugin-prism/prism-twilight.css
  64. 137 0
      gitbook/gitbook-plugin-prism/prism.css
  65. 6 0
      gitbook/gitbook-plugin-search/lunr.min.js
  66. 50 0
      gitbook/gitbook-plugin-search/search-engine.js
  67. 35 0
      gitbook/gitbook-plugin-search/search.css
  68. 213 0
      gitbook/gitbook-plugin-search/search.js
  69. 90 0
      gitbook/gitbook-plugin-sharing/buttons.js
  70. 291 0
      gitbook/gitbook-plugin-theme-vuejs/vue.css
  71. 0 0
      gitbook/gitbook.js
  72. BIN
      gitbook/images/apple-touch-icon-precomposed-152.png
  73. BIN
      gitbook/images/favicon.ico
  74. 0 0
      gitbook/style.css
  75. 0 0
      gitbook/theme.js
  76. 94 0
      index.html
  77. 617 0
      ja/actions.html
  78. 661 0
      ja/api.html
  79. 490 0
      ja/core-concepts.html
  80. 522 0
      ja/forms.html
  81. 560 0
      ja/getters.html
  82. 473 0
      ja/getting-started.html
  83. 518 0
      ja/hot-reload.html
  84. BIN
      ja/images/flow.png
  85. BIN
      ja/images/vuex.png
  86. 492 0
      ja/index.html
  87. 503 0
      ja/installation.html
  88. 532 0
      ja/intro.html
  89. 721 0
      ja/modules.html
  90. 481 0
      ja/mutations.html
  91. 576 0
      ja/plugins.html
  92. 0 0
      ja/search_index.json
  93. 516 0
      ja/state.html
  94. 495 0
      ja/strict.html
  95. 507 0
      ja/structure.html
  96. 665 0
      ja/testing.html
  97. 629 0
      kr/actions.html
  98. 650 0
      kr/api.html
  99. 536 0
      kr/forms.html
  100. 558 0
      kr/getters.html

+ 1 - 0
CNAME
View File 

@@ -0,0 +1 @@
 
+vuex.vuejs.org

+ 1 - 0
assets/CNAME
View File 

@@ -0,0 +1 @@
 
+vuex.vuejs.org

+ 4 - 0
assets/circle.yml
View File 

@@ -0,0 +1,4 @@
 
+general:
 
+  branches:
 
+    ignore:
 
+      - gh-pages

File diff suppressed because it is too large
+ 34 - 0
assets/vuex.ai


+ 4 - 0
circle.yml
View File 

@@ -0,0 +1,4 @@
 
+general:
 
+  branches:
 
+    ignore:
 
+      - gh-pages

+ 9 - 0
deploy.sh
View File 

@@ -0,0 +1,9 @@
 
+rm -rf _book
 
+gitbook build
 
+cp assets/circle.yml _book/circle.yml
 
+cp assets/CNAME _book/CNAME
 
+cd _book
 
+git init
 
+git add -A
 
+git commit -m 'update book'
 
+git push -f git@github-private:vuejs/vuex.git master:gh-pages

+ 619 - 0
en/actions.html
View File 

@@ -0,0 +1,619 @@
 
+
 
+<!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.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="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">
 
+    
+
 
+    <!-- Title -->
 
+    <h1>
 
+        <i class="fa fa-circle-o-notch fa-spin"></i>
 
+        <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>
 
+<p>Actions are similar to mutations, the differences being that:</p>
 
+<ul>
 
+<li>Instead of mutating the state, actions commit mutations.</li>
 
+<li>Actions can contain arbitrary asynchronous operations.</li>
 
+</ul>
 
+<p>Let&apos;s register a simple action:</p>
 
+<pre class="language-"><code class="lang-js"><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>
 
+  actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    increment <span class="token punctuation">(</span>context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+      context<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>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>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.</p>
 
+<p>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):</p>
 
+<pre class="language-"><code class="lang-js">actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  increment <span class="token punctuation">(</span><span class="token punctuation">{</span> commit <span class="token punctuation">}</span><span class="token punctuation">)</span> <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>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<h3 id="dispatching-actions">Dispatching Actions</h3>
 
+<p>Actions are triggered with the <code>store.dispatch</code> method:</p>
 
+<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;increment&apos;</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>This may look dumb at first sight: if we want to increment the count, why don&apos;t we just call <code>store.commit(&apos;increment&apos;)</code> directly? Remember that <strong>mutations have to be synchronous</strong>? Actions don&apos;t. We can perform <strong>asynchronous</strong> operations inside an action:</p>
 
+<pre class="language-"><code class="lang-js">actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  incrementAsync <span class="token punctuation">(</span><span class="token punctuation">{</span> commit <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <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>
 
+    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>Actions support the same payload format and object-style dispatch:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// dispatch with a payload</span>
 
+store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;incrementAsync&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
 
+  amount<span class="token punctuation">:</span> <span class="token number">10</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+
 
+<span class="token comment" spellcheck="true">// dispatch with an object</span>
 
+store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+  type<span class="token punctuation">:</span> <span class="token string">&apos;incrementAsync&apos;</span><span class="token punctuation">,</span>
 
+  amount<span class="token punctuation">:</span> <span class="token number">10</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>A more practical example of real-world actions would be an action to checkout a shopping cart, which involves <strong>calling an async API</strong> and <strong>committing multiple mutations</strong>:</p>
 
+<pre class="language-"><code class="lang-js">actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  checkout <span class="token punctuation">(</span><span class="token punctuation">{</span> commit<span class="token punctuation">,</span> state <span class="token punctuation">}</span><span class="token punctuation">,</span> products<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// save the items currently in the cart</span>
 
+    <span class="token keyword">const</span> savedCartItems <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>state<span class="token punctuation">.</span>cart<span class="token punctuation">.</span>added<span class="token punctuation">]</span>
 
+    <span class="token comment" spellcheck="true">// send out checkout request, and optimistically</span>
 
+    <span class="token comment" spellcheck="true">// clear the cart</span>
 
+    <span class="token function">commit</span><span class="token punctuation">(</span>types<span class="token punctuation">.</span>CHECKOUT_REQUEST<span class="token punctuation">)</span>
 
+    <span class="token comment" spellcheck="true">// the shop API accepts a success callback and a failure callback</span>
 
+    shop<span class="token punctuation">.</span><span class="token function">buyProducts</span><span class="token punctuation">(</span>
 
+      products<span class="token punctuation">,</span>
 
+      <span class="token comment" spellcheck="true">// handle success</span>
 
+      <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token function">commit</span><span class="token punctuation">(</span>types<span class="token punctuation">.</span>CHECKOUT_SUCCESS<span class="token punctuation">)</span><span class="token punctuation">,</span>
 
+      <span class="token comment" spellcheck="true">// handle failure</span>
 
+      <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token function">commit</span><span class="token punctuation">(</span>types<span class="token punctuation">.</span>CHECKOUT_FAILURE<span class="token punctuation">,</span> savedCartItems<span class="token punctuation">)</span>
 
+    <span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>Note we are performing a flow of asynchronous operations, and recording the side effects (state mutations) of the action by committing them.</p>
 
+<h3 id="dispatching-actions-in-components">Dispatching Actions in Components</h3>
 
+<p>You can dispatch actions in components with <code>this.$store.dispatch(&apos;xxx&apos;)</code>, or use the <code>mapActions</code> helper which maps component methods to <code>store.dispatch</code> calls (requires root <code>store</code> injection):</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> mapActions <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>
 
+  methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
 
+      <span class="token string">&apos;increment&apos;</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// map `this.increment()` to `this.$store.dispatch(&apos;increment&apos;)`</span>
 
+
 
+      <span class="token comment" spellcheck="true">// `mapActions` also supports payloads:</span>
 
+      <span class="token string">&apos;incrementBy&apos;</span> <span class="token comment" spellcheck="true">// map `this.incrementBy(amount)` to `this.$store.dispatch(&apos;incrementBy&apos;, amount)`</span>
 
+    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
 
+    <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+      add<span class="token punctuation">:</span> <span class="token string">&apos;increment&apos;</span> <span class="token comment" spellcheck="true">// map `this.add()` to `this.$store.dispatch(&apos;increment&apos;)`</span>
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<h3 id="composing-actions">Composing Actions</h3>
 
+<p>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?</p>
 
+<p>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:</p>
 
+<pre class="language-"><code class="lang-js">actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  actionA <span class="token punctuation">(</span><span class="token punctuation">{</span> commit <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">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> reject<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+        <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;someMutation&apos;</span><span class="token punctuation">)</span>
 
+        <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
 
+      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</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 do:</p>
 
+<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;actionA&apos;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>And also in another action:</p>
 
+<pre class="language-"><code class="lang-js">actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  actionB <span class="token punctuation">(</span><span class="token punctuation">{</span> dispatch<span class="token punctuation">,</span> commit <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">return</span> <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;actionA&apos;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+      <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;someOtherMutation&apos;</span><span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>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:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// assuming `getData()` and `getOtherData()` return Promises</span>
 
+
 
+actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token keyword">async</span> actionA <span class="token punctuation">(</span><span class="token punctuation">{</span> commit <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;gotData&apos;</span><span class="token punctuation">,</span> <span class="token keyword">await</span> <span class="token function">getData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  <span class="token keyword">async</span> actionB <span class="token punctuation">(</span><span class="token punctuation">{</span> dispatch<span class="token punctuation">,</span> commit <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">await</span> <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;actionA&apos;</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// wait for `actionA` to finish</span>
 
+    <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;gotOtherData&apos;</span><span class="token punctuation">,</span> <span class="token keyword">await</span> <span class="token function">getOtherData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<blockquote>
 
+<p>It&apos;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.</p>
 
+</blockquote>
 
+
 
+                                
+                                </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="mutations.html" class="navigation navigation-prev " aria-label="Previous page: Mutations">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="modules.html" class="navigation navigation-next " aria-label="Next page: Modules">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </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":{"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":"actions.md","mtime":"2018-04-20T00:44:03.847Z","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>
 
+

+ 664 - 0
en/api.html
View File 

@@ -0,0 +1,664 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="en" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>API Reference · 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="prev" href="hot-reload.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 " 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 active" 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="." >API Reference</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="api-reference">API Reference</h1>
 
+<h3 id="vuexstore">Vuex.Store</h3>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">import</span> Vuex <span class="token keyword">from</span> <span class="token string">&apos;vuex&apos;</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> <span class="token operator">...</span>options <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<h3 id="vuexstore-constructor-options">Vuex.Store Constructor Options</h3>
 
+<ul>
 
+<li><p><strong>state</strong></p>
 
+<ul>
 
+<li><p>type: <code>Object | Function</code></p>
 
+<p>The root state object for the Vuex store. <a href="state.html">Details</a></p>
 
+<p>If you pass a function that returns an object, the returned object is used as the root state. This is useful when you want to reuse the state object especially for module reuse. <a href="modules.html#module-reuse">Details</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>mutations</strong></p>
 
+<ul>
 
+<li><p>type: <code>{ [type: string]: Function }</code></p>
 
+<p>Register mutations on the store. The handler function always receives <code>state</code> as the first argument (will be module local state if defined in a module), and receives a second <code>payload</code> argument if there is one.</p>
 
+<p><a href="mutations.html">Details</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>actions</strong></p>
 
+<ul>
 
+<li><p>type: <code>{ [type: string]: Function }</code></p>
 
+<p>Register actions on the store. The handler function receives a <code>context</code> object that exposes the following properties:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token punctuation">{</span>
 
+  state<span class="token punctuation">,</span>      <span class="token comment" spellcheck="true">// same as `store.state`, or local state if in modules</span>
 
+  rootState<span class="token punctuation">,</span>  <span class="token comment" spellcheck="true">// same as `store.state`, only in modules</span>
 
+  commit<span class="token punctuation">,</span>     <span class="token comment" spellcheck="true">// same as `store.commit`</span>
 
+  dispatch<span class="token punctuation">,</span>   <span class="token comment" spellcheck="true">// same as `store.dispatch`</span>
 
+  getters<span class="token punctuation">,</span>    <span class="token comment" spellcheck="true">// same as `store.getters`, or local getters if in modules</span>
 
+  rootGetters <span class="token comment" spellcheck="true">// same as `store.getters`, only in modules</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>And also receives a second <code>payload</code> argument if there is one.</p>
 
+<p><a href="actions.html">Details</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>getters</strong></p>
 
+<ul>
 
+<li><p>type: <code>{ [key: string]: Function }</code></p>
 
+<p>Register getters on the store. The getter function receives the following arguments:</p>
 
+<pre class="language-"><code>state,     // will be module local state if defined in a module.
 
+getters    // same as store.getters
 
+</code></pre><p>Specific when defined in a module</p>
 
+<pre class="language-"><code>state,       // will be module local state if defined in a module.
 
+getters,     // module local getters of the current module
 
+rootState,   // global state
 
+rootGetters  // all getters
 
+</code></pre><p>Registered getters are exposed on <code>store.getters</code>.</p>
 
+<p><a href="getters.html">Details</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>modules</strong></p>
 
+<ul>
 
+<li><p>type: <code>Object</code></p>
 
+<p>An object containing sub modules to be merged into the store, in the shape of:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token punctuation">{</span>
 
+  key<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    state<span class="token punctuation">,</span>
 
+    namespaced<span class="token operator">?</span><span class="token punctuation">,</span>
 
+    mutations<span class="token operator">?</span><span class="token punctuation">,</span>
 
+    actions<span class="token operator">?</span><span class="token punctuation">,</span>
 
+    getters<span class="token operator">?</span><span class="token punctuation">,</span>
 
+    modules<span class="token operator">?</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  <span class="token operator">...</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>Each module can contain <code>state</code> and <code>mutations</code> similar to the root options. A module&apos;s state will be attached to the store&apos;s root state using the module&apos;s key. A module&apos;s mutations and getters will only receives the module&apos;s local state as the first argument instead of the root state, and module actions&apos; <code>context.state</code> will also point to the local state.</p>
 
+<p><a href="modules.html">Details</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>plugins</strong></p>
 
+<ul>
 
+<li><p>type: <code>Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Function</span><span class="token punctuation">&gt;</span></span></code></p>
 
+<p>An array of plugin functions to be applied to the store. The plugin simply receives the store as the only argument and can either listen to mutations (for outbound data persistence, logging, or debugging) or dispatch mutations (for inbound data e.g. websockets or observables).</p>
 
+<p><a href="plugins.html">Details</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>strict</strong></p>
 
+<ul>
 
+<li>type: <code>Boolean</code></li>
 
+<li><p>default: <code>false</code></p>
 
+<p>Force the Vuex store into strict mode. In strict mode any mutations to Vuex state outside of mutation handlers will throw an Error.</p>
 
+<p><a href="strict.html">Details</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+</ul>
 
+<h3 id="vuexstore-instance-properties">Vuex.Store Instance Properties</h3>
 
+<ul>
 
+<li><p><strong>state</strong></p>
 
+<ul>
 
+<li><p>type: <code>Object</code></p>
 
+<p>The root state. Read only.</p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>getters</strong></p>
 
+<ul>
 
+<li><p>type: <code>Object</code></p>
 
+<p>Exposes registered getters. Read only.</p>
 
+</li>
 
+</ul>
 
+</li>
 
+</ul>
 
+<h3 id="vuexstore-instance-methods">Vuex.Store Instance Methods</h3>
 
+<ul>
 
+<li><strong><code>commit(type: string, payload?: any, options?: Object)</code></strong></li>
 
+<li><p><strong><code>commit(mutation: Object, options?: Object)</code></strong></p>
 
+<p>Commit a mutation. <code>options</code> can have <code>root: true</code> that allows to commit root mutations in <a href="modules.html#namespacing">namespaced modules</a>. <a href="mutations.html">Details</a></p>
 
+</li>
 
+<li><p><strong><code>dispatch(type: string, payload?: any, options?: Object)</code></strong></p>
 
+</li>
 
+<li><p><strong><code>dispatch(action: Object, options?: Object)</code></strong></p>
 
+<p>Dispatch an action. <code>options</code> can have <code>root: true</code> that allows to dispatch root actions in <a href="modules.html#namespacing">namespaced modules</a>. Returns a Promise that resolves all triggered action handlers. <a href="actions.html">Details</a></p>
 
+</li>
 
+<li><p><strong><code>replaceState(state: Object)</code></strong></p>
 
+<p>Replace the store&apos;s root state. Use this only for state hydration / time-travel purposes.</p>
 
+</li>
 
+<li><p><strong><code>watch(fn: Function, callback: Function, options?: Object): Function</code></strong></p>
 
+<p>Reactively watch <code>fn</code>&apos;s return value, and call the callback when the value changes. <code>fn</code> receives the store&apos;s state as the first argument, and getters as the second argument. Accepts an optional options object that takes the same options as Vue&apos;s <code>vm.$watch</code> method.</p>
 
+<p>To stop watching, call the returned unwatch function.</p>
 
+</li>
 
+<li><p><strong><code>subscribe(handler: Function): Function</code></strong></p>
 
+<p>Subscribe to store mutations. The <code>handler</code> is called after every mutation and receives the mutation descriptor and post-mutation state as arguments:</p>
 
+<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span>mutation<span class="token punctuation">,</span> state<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>mutation<span class="token punctuation">.</span>type<span class="token punctuation">)</span>
 
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>mutation<span class="token punctuation">.</span>payload<span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>To stop subscribing, call the returned unsubscribe function.</p>
 
+<p>Most commonly used in plugins. <a href="plugins.html">Details</a></p>
 
+</li>
 
+<li><p><strong><code>subscribeAction(handler: Function): Function</code></strong></p>
 
+<blockquote>
 
+<p>New in 2.5.0</p>
 
+</blockquote>
 
+<p>Subscribe to store actions. The <code>handler</code> is called for every dispatched action and receives the action descriptor and current store state as arguments:</p>
 
+<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span><span class="token function">subscribeAction</span><span class="token punctuation">(</span><span class="token punctuation">(</span>action<span class="token punctuation">,</span> state<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>action<span class="token punctuation">.</span>type<span class="token punctuation">)</span>
 
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>action<span class="token punctuation">.</span>payload<span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>To stop subscribing, call the returned unsubscribe function.</p>
 
+<p>Most commonly used in plugins. <a href="plugins.html">Details</a></p>
 
+</li>
 
+<li><p><strong><code>registerModule(path: string | Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span><span class="token punctuation">&gt;</span></span>, module: Module, options?: Object)</code></strong></p>
 
+<p>Register a dynamic module. <a href="modules.html#dynamic-module-registration">Details</a></p>
 
+<p><code>options</code> can have <code>preserveState: true</code> that allows to preserve the previous state. Useful with Server Side Rendering.</p>
 
+</li>
 
+<li><p><strong><code>unregisterModule(path: string | Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span><span class="token punctuation">&gt;</span></span>)</code></strong></p>
 
+<p>Unregister a dynamic module. <a href="modules.html#dynamic-module-registration">Details</a></p>
 
+</li>
 
+<li><p><strong><code>hotUpdate(newOptions: Object)</code></strong></p>
 
+<p>Hot swap new actions and mutations. <a href="hot-reload.html">Details</a></p>
 
+</li>
 
+</ul>
 
+<h3 id="component-binding-helpers">Component Binding Helpers</h3>
 
+<ul>
 
+<li><p><strong><code>mapState(namespace?: string, map: Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span><span class="token punctuation">&gt;</span></span> | Object<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span> <span class="token attr-name">|</span> <span class="token attr-name">function</span><span class="token punctuation">&gt;</span></span>): Object</code></strong></p>
 
+<p>Create component computed options that return the sub tree of the Vuex store. <a href="state.html#the-mapstate-helper">Details</a></p>
 
+<p>The first argument can optionally be a namespace string. <a href="modules.html#binding-helpers-with-namespace">Details</a></p>
 
+<p>The second object argument&apos;s members can be a function. <code>function(state: any)</code> </p>
 
+</li>
 
+<li><p><strong><code>mapGetters(namespace?: string, map: Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span><span class="token punctuation">&gt;</span></span> | Object<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span><span class="token punctuation">&gt;</span></span>): Object</code></strong></p>
 
+<p>Create component computed options that return the evaluated value of a getter. <a href="getters.html#the-mapgetters-helper">Details</a></p>
 
+<p>The first argument can optionally be a namespace string. <a href="modules.html#binding-helpers-with-namespace">Details</a></p>
 
+</li>
 
+<li><p><strong><code>mapActions(namespace?: string, map: Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span><span class="token punctuation">&gt;</span></span> | Object<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span> <span class="token attr-name">|</span> <span class="token attr-name">function</span><span class="token punctuation">&gt;</span></span>): Object</code></strong></p>
 
+<p>Create component methods options that dispatch an action. <a href="actions.html#dispatching-actions-in-components">Details</a></p>
 
+<p>The first argument can optionally be a namespace string. <a href="modules.html#binding-helpers-with-namespace">Details</a></p>
 
+<p>The second object argument&apos;s members can be a function. <code>function(dispatch: function, ...args: any[])</code></p>
 
+</li>
 
+<li><p><strong><code>mapMutations(namespace?: string, map: Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span><span class="token punctuation">&gt;</span></span> | Object<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span> <span class="token attr-name">|</span> <span class="token attr-name">function</span><span class="token punctuation">&gt;</span></span>): Object</code></strong></p>
 
+<p>Create component methods options that commit a mutation. <a href="mutations.html#committing-mutations-in-components">Details</a></p>
 
+<p>The first argument can optionally be a namespace string. <a href="modules.html#binding-helpers-with-namespace">Details</a></p>
 
+<p>The second object argument&apos;s members can be a function. <code>function(commit: function, ...args: any[])</code></p>
 
+</li>
 
+<li><p><strong><code>createNamespacedHelpers(namespace: string): Object</code></strong></p>
 
+<p>Create namespaced component binding helpers. The returned object contains <code>mapState</code>, <code>mapGetters</code>, <code>mapActions</code> and <code>mapMutations</code> that are bound with the given namespace. <a href="modules.html#binding-helpers-with-namespace">Details</a></p>
 
+</li>
 
+</ul>
 
+
 
+                                
+                                </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="hot-reload.html" class="navigation navigation-prev navigation-unique" aria-label="Previous page: Hot Reloading">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"API Reference","level":"1.13","depth":1,"previous":{"title":"Hot Reloading","level":"1.12","depth":1,"path":"hot-reload.md","ref":"hot-reload.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":"api.md","mtime":"2018-04-20T00:44:03.847Z","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>
 
+

+ 490 - 0
en/core-concepts.html
View File 

@@ -0,0 +1,490 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="en" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Core Concepts · 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="state.html" />
 
+    
+    
+    <link rel="prev" href="getting-started.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 active" 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="." >Core Concepts</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="core-concepts">Core Concepts</h1>
 
+<p>We will be learning the core concepts of Vuex in these chapters. They are</p>
 
+<ul>
 
+<li><a href="state.html">State</a></li>
 
+<li><a href="getters.html">Getters</a></li>
 
+<li><a href="mutations.html">Mutations</a></li>
 
+<li><a href="actions.html">Actions</a></li>
 
+<li><a href="modules.html">Modules</a></li>
 
+</ul>
 
+<p>A deep understanding of all these concepts is essential for using vuex. </p>
 
+<p>Let&apos;s get started.</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="getting-started.html" class="navigation navigation-prev " aria-label="Previous page: Getting Started">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="state.html" class="navigation navigation-next " aria-label="Next page: State">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Core Concepts","level":"1.6","depth":1,"next":{"title":"State","level":"1.6.1","depth":2,"path":"state.md","ref":"state.md","articles":[]},"previous":{"title":"Getting Started","level":"1.5","depth":1,"path":"getting-started.md","ref":"getting-started.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":"core-concepts.md","mtime":"2018-04-20T00:44:03.848Z","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>
 
+

+ 523 - 0
en/forms.html
View File 

@@ -0,0 +1,523 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="en" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Form Handling · 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="testing.html" />
 
+    
+    
+    <link rel="prev" href="strict.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 " 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 active" 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="." >Form Handling</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="form-handling">Form Handling</h1>
 
+<p>When using Vuex in strict mode, it could be a bit tricky to use <code>v-model</code> on a piece of state that belongs to Vuex:</p>
 
+<pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>obj.message<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
 
+</code></pre>
 
+<p>Assuming <code>obj</code> is a computed property that returns an Object from the store, the <code>v-model</code> here will attempt to directly mutate <code>obj.message</code> when the user types in the input. In strict mode, this will result in an error because the mutation is not performed inside an explicit Vuex mutation handler.</p>
 
+<p>The &quot;Vuex way&quot; to deal with it is binding the <code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span><span class="token punctuation">&gt;</span></span></code>&apos;s value and call an action on the <code>input</code> or <code>change</code> event:</p>
 
+<pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@input</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>updateMessage<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// ...</span>
 
+computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+    message<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> state<span class="token punctuation">.</span>obj<span class="token punctuation">.</span>message
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  updateMessage <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;updateMessage&apos;</span><span class="token punctuation">,</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>And here&apos;s the mutation handler:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// ...</span>
 
+mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  updateMessage <span class="token punctuation">(</span>state<span class="token punctuation">,</span> message<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    state<span class="token punctuation">.</span>obj<span class="token punctuation">.</span>message <span class="token operator">=</span> message
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<h3 id="two-way-computed-property">Two-way Computed Property</h3>
 
+<p>Admittedly, the above is quite a bit more verbose than <code>v-model</code> + local state, and we lose some of the useful features from <code>v-model</code> as well. An alternative approach is using a two-way computed property with a setter:</p>
 
+<pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// ...</span>
 
+computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  message<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">get</span> <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>obj<span class="token punctuation">.</span>message
 
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+    <span class="token keyword">set</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+      <span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;updateMessage&apos;</span><span class="token punctuation">,</span> value<span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+
 
+                                
+                                </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="strict.html" class="navigation navigation-prev " aria-label="Previous page: Strict Mode">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="testing.html" class="navigation navigation-next " aria-label="Next page: Testing">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Form Handling","level":"1.10","depth":1,"next":{"title":"Testing","level":"1.11","depth":1,"path":"testing.md","ref":"testing.md","articles":[]},"previous":{"title":"Strict Mode","level":"1.9","depth":1,"path":"strict.md","ref":"strict.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":"forms.md","mtime":"2018-04-20T00:44:03.848Z","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>
 
+

+ 560 - 0
en/getters.html
View File 

@@ -0,0 +1,560 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="en" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Getters · 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="mutations.html" />
 
+    
+    
+    <link rel="prev" href="state.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 active" 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="." >Getters</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="getters">Getters</h1>
 
+<p>Sometimes we may need to compute derived state based on store state, for example filtering through a list of items and counting them:</p>
 
+<pre class="language-"><code class="lang-js">computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  doneTodosCount <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>todos<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>todo <span class="token operator">=</span><span class="token operator">&gt;</span> todo<span class="token punctuation">.</span>done<span class="token punctuation">)</span><span class="token punctuation">.</span>length
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>If more than one component needs to make use of this, we have to either duplicate the function, or extract it into a shared helper and import it in multiple places - both are less than ideal.</p>
 
+<p>Vuex allows us to define &quot;getters&quot; in the store. You can think of them as computed properties for stores. Like computed properties, a getter&apos;s result is cached based on its dependencies, and will only re-evaluate when some of its dependencies have changed.</p>
 
+<p>Getters will receive the state as their 1st argument:</p>
 
+<pre class="language-"><code class="lang-js"><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>
 
+    todos<span class="token punctuation">:</span> <span class="token punctuation">[</span>
 
+      <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">&apos;...&apos;</span><span class="token punctuation">,</span> done<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+      <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">&apos;...&apos;</span><span class="token punctuation">,</span> done<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span>
 
+    <span class="token punctuation">]</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    doneTodos<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+      <span class="token keyword">return</span> state<span class="token punctuation">.</span>todos<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>todo <span class="token operator">=</span><span class="token operator">&gt;</span> todo<span class="token punctuation">.</span>done<span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<h3 id="property-style-access">Property-Style Access</h3>
 
+<p>The getters will be exposed on the <code>store.getters</code> object, and you access values as properties:</p>
 
+<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>doneTodos <span class="token comment" spellcheck="true">// -&gt; [{ id: 1, text: &apos;...&apos;, done: true }]</span>
 
+</code></pre>
 
+<p>Getters will also receive other getters as the 2nd argument:</p>
 
+<pre class="language-"><code class="lang-js">getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  doneTodosCount<span class="token punctuation">:</span> <span class="token punctuation">(</span>state<span class="token punctuation">,</span> getters<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">return</span> getters<span class="token punctuation">.</span>doneTodos<span class="token punctuation">.</span>length
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>doneTodosCount <span class="token comment" spellcheck="true">// -&gt; 1</span>
 
+</code></pre>
 
+<p>We can now easily make use of it inside any component:</p>
 
+<pre class="language-"><code class="lang-js">computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  doneTodosCount <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>getters<span class="token punctuation">.</span>doneTodosCount
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>Note that getters accessed as properties are cached as part of Vue&apos;s reactivity system.</p>
 
+<h3 id="method-style-access">Method-Style Access</h3>
 
+<p>You can also pass arguments to getters by returning a function. This is particularly useful when you want to query an array in the store:</p>
 
+<pre class="language-"><code class="lang-js">getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  getTodoById<span class="token punctuation">:</span> <span class="token punctuation">(</span>state<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span>id<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">return</span> state<span class="token punctuation">.</span>todos<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span>todo <span class="token operator">=</span><span class="token operator">&gt;</span> todo<span class="token punctuation">.</span>id <span class="token operator">===</span> id<span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span><span class="token function">getTodoById</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// -&gt; { id: 2, text: &apos;...&apos;, done: false }</span>
 
+</code></pre>
 
+<p>Note that getters accessed via methods will run each time you call them, and the result is not cached.</p>
 
+<h3 id="the-mapgetters-helper">The <code>mapGetters</code> Helper</h3>
 
+<p>The <code>mapGetters</code> helper simply maps store getters to local computed properties:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> mapGetters <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 punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// mix the getters into computed with object spread operator</span>
 
+    <span class="token operator">...</span><span class="token function">mapGetters</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
 
+      <span class="token string">&apos;doneTodosCount&apos;</span><span class="token punctuation">,</span>
 
+      <span class="token string">&apos;anotherGetter&apos;</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>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>If you want to map a getter to a different name, use an object:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token operator">...</span><span class="token function">mapGetters</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// map `this.doneCount` to `this.$store.getters.doneTodosCount`</span>
 
+  doneCount<span class="token punctuation">:</span> <span class="token string">&apos;doneTodosCount&apos;</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+
 
+                                
+                                </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="state.html" class="navigation navigation-prev " aria-label="Previous page: State">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="mutations.html" class="navigation navigation-next " aria-label="Next page: Mutations">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Getters","level":"1.6.2","depth":2,"next":{"title":"Mutations","level":"1.6.3","depth":2,"path":"mutations.md","ref":"mutations.md","articles":[]},"previous":{"title":"State","level":"1.6.1","depth":2,"path":"state.md","ref":"state.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":"getters.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>
 
+

File diff suppressed because it is too large
+ 473 - 0
en/getting-started.html


+ 518 - 0
en/hot-reload.html
View File 

@@ -0,0 +1,518 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="en" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Hot Reloading · 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="api.html" />
 
+    
+    
+    <link rel="prev" href="testing.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 " 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 active" 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="." >Hot Reloading</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="hot-reloading">Hot Reloading</h1>
 
+<p>Vuex supports hot-reloading mutations, modules, actions and getters during development, using webpack&apos;s <a href="https://webpack.js.org/guides/hot-module-replacement/" target="_blank">Hot Module Replacement API</a>. You can also use it in Browserify with the <a href="https://github.com/AgentME/browserify-hmr/" target="_blank">browserify-hmr</a> plugin.</p>
 
+<p>For mutations and modules, you need to use the <code>store.hotUpdate()</code> API method:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// store.js</span>
 
+<span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">&apos;vue&apos;</span>
 
+<span class="token keyword">import</span> Vuex <span class="token keyword">from</span> <span class="token string">&apos;vuex&apos;</span>
 
+<span class="token keyword">import</span> mutations <span class="token keyword">from</span> <span class="token string">&apos;./mutations&apos;</span>
 
+<span class="token keyword">import</span> moduleA <span class="token keyword">from</span> <span class="token string">&apos;./modules/a&apos;</span>
 
+
 
+Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Vuex<span class="token punctuation">)</span>
 
+
 
+<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</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>
 
+  mutations<span class="token punctuation">,</span>
 
+  modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    a<span class="token punctuation">:</span> moduleA
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+
 
+<span class="token keyword">if</span> <span class="token punctuation">(</span>module<span class="token punctuation">.</span>hot<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// accept actions and mutations as hot modules</span>
 
+  module<span class="token punctuation">.</span>hot<span class="token punctuation">.</span><span class="token function">accept</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&apos;./mutations&apos;</span><span class="token punctuation">,</span> <span class="token string">&apos;./modules/a&apos;</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// require the updated modules</span>
 
+    <span class="token comment" spellcheck="true">// have to add .default here due to babel 6 module output</span>
 
+    <span class="token keyword">const</span> newMutations <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&apos;./mutations&apos;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword">default</span>
 
+    <span class="token keyword">const</span> newModuleA <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&apos;./modules/a&apos;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword">default</span>
 
+    <span class="token comment" spellcheck="true">// swap in the new actions and mutations</span>
 
+    store<span class="token punctuation">.</span><span class="token function">hotUpdate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+      mutations<span class="token punctuation">:</span> newMutations<span class="token punctuation">,</span>
 
+      modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+        a<span class="token punctuation">:</span> newModuleA
 
+      <span class="token punctuation">}</span>
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>Checkout the <a href="https://github.com/vuejs/vuex/tree/dev/examples/counter-hot" target="_blank">counter-hot example</a> to play with hot-reload.</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="testing.html" class="navigation navigation-prev " aria-label="Previous page: Testing">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="api.html" class="navigation navigation-next " aria-label="Next page: API Reference">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Hot Reloading","level":"1.12","depth":1,"next":{"title":"API Reference","level":"1.13","depth":1,"path":"api.md","ref":"api.md","articles":[]},"previous":{"title":"Testing","level":"1.11","depth":1,"path":"testing.md","ref":"testing.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":"hot-reload.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>
 
+

BIN
en/images/flow.png
View File


BIN
en/images/vuex.png
View File


+ 492 - 0
en/index.html
View File 

@@ -0,0 +1,492 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="en" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Introduction · 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">
 
+
 
+    
+    
+
 
+    </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 active" 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 " 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="." >Introduction</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="vuex">Vuex</h1>
 
+<blockquote>
 
+<p>Note: for TypeScript users, vuex@3.0+ requires vue@2.5+, and vice versa.</p>
 
+</blockquote>
 
+<ul>
 
+<li><a href="https://github.com/vuejs/vuex/releases" target="_blank">Release Notes</a></li>
 
+<li><a href="installation.html">Installation</a></li>
 
+<li><a href="intro.html">What is Vuex?</a></li>
 
+<li><a href="getting-started.html">Getting Started</a></li>
 
+<li><a href="core-concepts.html">Core Concepts</a><ul>
 
+<li><a href="state.html">State</a></li>
 
+<li><a href="getters.html">Getters</a></li>
 
+<li><a href="mutations.html">Mutations</a></li>
 
+<li><a href="actions.html">Actions</a></li>
 
+<li><a href="modules.html">Modules</a></li>
 
+</ul>
 
+</li>
 
+<li><a href="structure.html">Application Structure</a></li>
 
+<li><a href="plugins.html">Plugins</a></li>
 
+<li><a href="strict.html">Strict Mode</a></li>
 
+<li><a href="forms.html">Form Handling</a></li>
 
+<li><a href="testing.html">Testing</a></li>
 
+<li><a href="hot-reload.html">Hot Reloading</a></li>
 
+<li><a href="api.html">API Reference</a></li>
 
+</ul>
 
+
 
+                                
+                                </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>
 
+
 
+            
+                
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Introduction","level":"1.1","depth":1,"next":{"title":"Release Notes","level":"1.2","depth":1,"url":"https://github.com/vuejs/vuex/releases","ref":"https://github.com/vuejs/vuex/releases","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":"README.md","mtime":"2018-04-20T00:44:03.846Z","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>
 
+

+ 517 - 0
en/installation.html
View File 

@@ -0,0 +1,517 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="en" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Installation · 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="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 active" 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 " 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="." >Installation</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="installation">Installation</h1>
 
+<h3 id="direct-download--cdn">Direct Download / CDN</h3>
 
+<p><a href="https://unpkg.com/vuex" target="_blank">https://unpkg.com/vuex</a></p>
 
+<!--email_off-->
 
+<p><a href="https://unpkg.com" target="_blank">Unpkg.com</a> provides NPM-based CDN links. The above link will always point to the latest release on NPM. You can also use a specific version/tag via URLs like <code>https://unpkg.com/vuex@2.0.0</code>.
 
+<!--/email_off--></p>
 
+<p>Include <code>vuex</code> after Vue and it will install itself automatically:</p>
 
+<pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>/path/to/vue.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
 
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>/path/to/vuex.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
 
+</code></pre>
 
+<h3 id="npm">NPM</h3>
 
+<pre class="language-"><code class="lang-bash"><span class="token function">npm</span> <span class="token function">install</span> vuex --save
 
+</code></pre>
 
+<h3 id="yarn">Yarn</h3>
 
+<pre class="language-"><code class="lang-bash">yarn add vuex
 
+</code></pre>
 
+<p>When used with a module system, you must explicitly install Vuex via <code>Vue.use()</code>:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">&apos;vue&apos;</span>
 
+<span class="token keyword">import</span> Vuex <span class="token keyword">from</span> <span class="token string">&apos;vuex&apos;</span>
 
+
 
+Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Vuex<span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>You don&apos;t need to do this when using global script tags.</p>
 
+<h3 id="promise">Promise</h3>
 
+<p>Vuex requires <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises" target="_blank">Promise</a>. If your supporting browsers do not implement Promise (e.g. IE), you can use a polyfill library, such as <a href="https://github.com/stefanpenner/es6-promise" target="_blank">es6-promise</a>.</p>
 
+<p>You can include it via CDN:</p>
 
+<pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
 
+</code></pre>
 
+<p>Then <code>window.Promise</code> will be available automatically.</p>
 
+<p>If you prefer using a package manager such as NPM or Yarn, install it with the following commands:</p>
 
+<pre class="language-"><code class="lang-bash"><span class="token function">npm</span> <span class="token function">install</span> es6-promise --save <span class="token comment" spellcheck="true"># NPM</span>
 
+yarn add es6-promise <span class="token comment" spellcheck="true"># Yarn</span>
 
+</code></pre>
 
+<p>Furthermore, add the below line into anywhere in your code before using Vuex:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">import</span> <span class="token string">&apos;es6-promise/auto&apos;</span>
 
+</code></pre>
 
+<h3 id="dev-build">Dev Build</h3>
 
+<p>You will have to clone directly from GitHub and build <code>vuex</code> yourself if
 
+you want to use the latest dev build.</p>
 
+<pre class="language-"><code class="lang-bash"><span class="token function">git</span> clone https://github.com/vuejs/vuex.git node_modules/vuex
 
+<span class="token function">cd</span> node_modules/vuex
 
+<span class="token function">npm</span> <span class="token function">install</span>
 
+<span class="token function">npm</span> run build
 
+</code></pre>
 
+
 
+                                
+                                </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-next navigation-unique" aria-label="Next page: What is Vuex?">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Installation","level":"1.3","depth":1,"next":{"title":"What is Vuex?","level":"1.4","depth":1,"path":"intro.md","ref":"intro.md","articles":[]},"previous":{"title":"Release Notes","level":"1.2","depth":1,"url":"https://github.com/vuejs/vuex/releases","ref":"https://github.com/vuejs/vuex/releases","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":"installation.md","mtime":"2018-04-20T00:44:03.851Z","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>
 
+

+ 529 - 0
en/intro.html
View File 

@@ -0,0 +1,529 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="en" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>What is Vuex? · 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="getting-started.html" />
 
+    
+    
+    <link rel="prev" href="installation.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 active" 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 " 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="." >What is Vuex?</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="what-is-vuex">What is Vuex?</h1>
 
+<p>Vuex is a <strong>state management pattern + library</strong> for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue&apos;s official <a href="https://github.com/vuejs/vue-devtools" target="_blank">devtools extension</a> to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.</p>
 
+<h3 id="what-is-a-state-management-pattern">What is a &quot;State Management Pattern&quot;?</h3>
 
+<p>Let&apos;s start with a simple Vue counter app:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// state</span>
 
+  data <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">return</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><span class="token punctuation">,</span>
 
+  <span class="token comment" spellcheck="true">// view</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>
 
+  <span class="token comment" spellcheck="true">// actions</span>
 
+  methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    increment <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+      <span class="token keyword">this</span><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>It is a self-contained app with the following parts:</p>
 
+<ul>
 
+<li>The <strong>state</strong>, which is the source of truth that drives our app;</li>
 
+<li>The <strong>view</strong>, which is just a declarative mapping of the <strong>state</strong>;</li>
 
+<li>The <strong>actions</strong>, which are the possible ways the state could change in reaction to user inputs from the <strong>view</strong>.</li>
 
+</ul>
 
+<p>This is an extremely simple representation of the concept of &quot;one-way data flow&quot;:</p>
 
+<p style="text-align: center; margin: 2em">
 
+  <img style="width:100%;max-width:450px;" src="images/flow.png">
 
+</p>
 
+
 
+<p>However, the simplicity quickly breaks down when we have <strong>multiple components that share common state</strong>:</p>
 
+<ul>
 
+<li>Multiple views may depend on the same piece of state.</li>
 
+<li>Actions from different views may need to mutate the same piece of state.</li>
 
+</ul>
 
+<p>For problem one, passing props can be tedious for deeply nested components, and simply doesn&apos;t work for sibling components. For problem two, we often find ourselves resorting to solutions such as reaching for direct parent/child instance references or trying to mutate and synchronize multiple copies of the state via events. Both of these patterns are brittle and quickly lead to unmaintainable code.</p>
 
+<p>So why don&apos;t we extract the shared state out of the components, and manage it in a global singleton? With this, our component tree becomes a big &quot;view&quot;, and any component can access the state or trigger actions, no matter where they are in the tree!</p>
 
+<p>In addition, by defining and separating the concepts involved in state management and enforcing certain rules, we also give our code more structure and maintainability.</p>
 
+<p>This is the basic idea behind Vuex, inspired by <a href="https://facebook.github.io/flux/docs/overview.html" target="_blank">Flux</a>, <a href="http://redux.js.org/" target="_blank">Redux</a> and <a href="https://guide.elm-lang.org/architecture/" target="_blank">The Elm Architecture</a>. Unlike the other patterns, Vuex is also a library implementation tailored specifically for Vue.js to take advantage of its granular reactivity system for efficient updates.</p>
 
+<p><img src="images/vuex.png" alt="vuex"></p>
 
+<h3 id="when-should-i-use-it">When Should I Use It?</h3>
 
+<p>Although Vuex helps us deal with shared state management, it also comes with the cost of more concepts and boilerplate. It&apos;s a trade-off between short term and long term productivity.</p>
 
+<p>If you&apos;ve never built a large-scale SPA and jump right into Vuex, it may feel verbose and daunting. That&apos;s perfectly normal - if your app is simple, you will most likely be fine without Vuex. A simple <a href="https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication" target="_blank">global event bus</a> may be all you need. But if you are building a medium-to-large-scale SPA, chances are you have run into situations that make you think about how to better handle state outside of your Vue components, and Vuex will be the natural next step for you. There&apos;s a good quote from Dan Abramov, the author of Redux:</p>
 
+<blockquote>
 
+<p>Flux libraries are like glasses: you&#x2019;ll know when you need them.</p>
 
+</blockquote>
 
+
 
+                                
+                                </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="installation.html" class="navigation navigation-prev " aria-label="Previous page: Installation">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="getting-started.html" class="navigation navigation-next " aria-label="Next page: Getting Started">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"What is Vuex?","level":"1.4","depth":1,"next":{"title":"Getting Started","level":"1.5","depth":1,"path":"getting-started.md","ref":"getting-started.md","articles":[]},"previous":{"title":"Installation","level":"1.3","depth":1,"path":"installation.md","ref":"installation.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":"intro.md","mtime":"2018-04-20T00:44:03.851Z","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>
 
+

+ 743 - 0
en/modules.html
View File 

@@ -0,0 +1,743 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="en" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Modules · 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="structure.html" />
 
+    
+    
+    <link rel="prev" href="actions.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 " data-level="1.6.4" data-path="actions.html">
 
+            
+                <a href="actions.html">
 
+            
+                    
+                    Actions
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter active" 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="." >Modules</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="modules">Modules</h1>
 
+<p>Due to using a single state tree, all state of our application is contained inside one big object. However, as our application grows in scale, the store can get really bloated.</p>
 
+<p>To help with that, Vuex allows us to divide our store into <strong>modules</strong>. Each module can contain its own state, mutations, actions, getters, and even nested modules - it&apos;s fractal all the way down:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+  state<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  actions<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  getters<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+
 
+<span class="token keyword">const</span> moduleB <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+  state<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  actions<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</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>
 
+  modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    a<span class="token punctuation">:</span> moduleA<span class="token punctuation">,</span>
 
+    b<span class="token punctuation">:</span> moduleB
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+
 
+store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>a <span class="token comment" spellcheck="true">// -&gt; `moduleA`&apos;s state</span>
 
+store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>b <span class="token comment" spellcheck="true">// -&gt; `moduleB`&apos;s state</span>
 
+</code></pre>
 
+<h3 id="module-local-state">Module Local State</h3>
 
+<p>Inside a module&apos;s mutations and getters, the first argument received will be <strong>the module&apos;s local state</strong>.</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> moduleA <span class="token operator">=</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>
 
+      <span class="token comment" spellcheck="true">// `state` is the local module state</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>
 
+
 
+  getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    doubleCount <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 number">2</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>Similarly, inside module actions, <code>context.state</code> will expose the local state, and root state will be exposed as <code>context.rootState</code>:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    incrementIfOddOnRootSum <span class="token punctuation">(</span><span class="token punctuation">{</span> state<span class="token punctuation">,</span> commit<span class="token punctuation">,</span> rootState <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>count <span class="token operator">+</span> rootState<span class="token punctuation">.</span>count<span class="token punctuation">)</span> <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <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>
 
+      <span class="token punctuation">}</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>Also, inside module getters, the root state will be exposed as their 3rd argument:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    sumWithRootCount <span class="token punctuation">(</span>state<span class="token punctuation">,</span> getters<span class="token punctuation">,</span> rootState<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> rootState<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="namespacing">Namespacing</h3>
 
+<p>By default, actions, mutations and getters inside modules are still registered under the <strong>global namespace</strong> - this allows multiple modules to react to the same mutation/action type.</p>
 
+<p>If you want your modules to be more self-contained or reusable, you can mark it as namespaced with <code>namespaced: true</code>. When the module is registered, all of its getters, actions and mutations will be automatically namespaced based on the path the module is registered at. For example:</p>
 
+<pre class="language-"><code class="lang-js"><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>
 
+  modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    account<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+      namespaced<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
 
+
 
+      <span class="token comment" spellcheck="true">// module assets</span>
 
+      state<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// module state is already nested and not affected by namespace option</span>
 
+      getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+        isAdmin <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">// -&gt; getters[&apos;account/isAdmin&apos;]</span>
 
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+      actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+        login <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">// -&gt; dispatch(&apos;account/login&apos;)</span>
 
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+      mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+        login <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">// -&gt; commit(&apos;account/login&apos;)</span>
 
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+
 
+      <span class="token comment" spellcheck="true">// nested modules</span>
 
+      modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+        <span class="token comment" spellcheck="true">// inherits the namespace from parent module</span>
 
+        myPage<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+          state<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+          getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+            profile <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">// -&gt; getters[&apos;account/profile&apos;]</span>
 
+          <span class="token punctuation">}</span>
 
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+
 
+        <span class="token comment" spellcheck="true">// further nest the namespace</span>
 
+        posts<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+          namespaced<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
 
+
 
+          state<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+          getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+            popular <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">// -&gt; getters[&apos;account/posts/popular&apos;]</span>
 
+          <span class="token punctuation">}</span>
 
+        <span class="token punctuation">}</span>
 
+      <span class="token punctuation">}</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>Namespaced getters and actions will receive localized <code>getters</code>, <code>dispatch</code> and <code>commit</code>. In other words, you can use the module assets without writing prefix in the same module. Toggling between namespaced or not does not affect the code inside the module.</p>
 
+<h4 id="accessing-global-assets-in-namespaced-modules">Accessing Global Assets in Namespaced Modules</h4>
 
+<p>If you want to use global state and getters, <code>rootState</code> and <code>rootGetters</code> are passed as the 3rd and 4th arguments to getter functions, and also exposed as properties on the <code>context</code> object passed to action functions.</p>
 
+<p>To dispatch actions or commit mutations in the global namespace, pass <code>{ root: true }</code> as the 3rd argument to <code>dispatch</code> and <code>commit</code>.</p>
 
+<pre class="language-"><code class="lang-js">modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  foo<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    namespaced<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
 
+
 
+    getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+      <span class="token comment" spellcheck="true">// `getters` is localized to this module&apos;s getters</span>
 
+      <span class="token comment" spellcheck="true">// you can use rootGetters via 4th argument of getters</span>
 
+      someGetter <span class="token punctuation">(</span>state<span class="token punctuation">,</span> getters<span class="token punctuation">,</span> rootState<span class="token punctuation">,</span> rootGetters<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+        getters<span class="token punctuation">.</span>someOtherGetter <span class="token comment" spellcheck="true">// -&gt; &apos;foo/someOtherGetter&apos;</span>
 
+        rootGetters<span class="token punctuation">.</span>someOtherGetter <span class="token comment" spellcheck="true">// -&gt; &apos;someOtherGetter&apos;</span>
 
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+      someOtherGetter<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
 
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+
 
+    actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+      <span class="token comment" spellcheck="true">// dispatch and commit are also localized for this module</span>
 
+      <span class="token comment" spellcheck="true">// they will accept `root` option for the root dispatch/commit</span>
 
+      someAction <span class="token punctuation">(</span><span class="token punctuation">{</span> dispatch<span class="token punctuation">,</span> commit<span class="token punctuation">,</span> getters<span class="token punctuation">,</span> rootGetters <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+        getters<span class="token punctuation">.</span>someGetter <span class="token comment" spellcheck="true">// -&gt; &apos;foo/someGetter&apos;</span>
 
+        rootGetters<span class="token punctuation">.</span>someGetter <span class="token comment" spellcheck="true">// -&gt; &apos;someGetter&apos;</span>
 
+
 
+        <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;someOtherAction&apos;</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// -&gt; &apos;foo/someOtherAction&apos;</span>
 
+        <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;someOtherAction&apos;</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> root<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// -&gt; &apos;someOtherAction&apos;</span>
 
+
 
+        <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;someMutation&apos;</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// -&gt; &apos;foo/someMutation&apos;</span>
 
+        <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;someMutation&apos;</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> root<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// -&gt; &apos;someMutation&apos;</span>
 
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+      someOtherAction <span class="token punctuation">(</span>ctx<span class="token punctuation">,</span> payload<span class="token punctuation">)</span> <span class="token punctuation">{</span> <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>
 
+<h4 id="register-global-action-in-namespaced-modules">Register Global Action in Namespaced Modules</h4>
 
+<p>If you want to register global actions in namespaced modules, you can mark it with <code>root: true</code> and place the action definition to function <code>handler</code>. For example:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token punctuation">{</span>
 
+  actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    someOtherAction <span class="token punctuation">(</span><span class="token punctuation">{</span>dispatch<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+      <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;someAction&apos;</span><span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    foo<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+      namespaced<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
 
+
 
+      actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+        someAction<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+          root<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
 
+          handler <span class="token punctuation">(</span>namespacedContext<span class="token punctuation">,</span> payload<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">// -&gt; &apos;someAction&apos;</span>
 
+        <span class="token punctuation">}</span>
 
+      <span class="token punctuation">}</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<h4 id="binding-helpers-with-namespace">Binding Helpers with Namespace</h4>
 
+<p>When binding a namespaced module to components with the <code>mapState</code>, <code>mapGetters</code>, <code>mapActions</code> and <code>mapMutations</code> helpers, it can get a bit verbose:</p>
 
+<pre class="language-"><code class="lang-js">computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+    a<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> state<span class="token punctuation">.</span>some<span class="token punctuation">.</span>nested<span class="token punctuation">.</span>module<span class="token punctuation">.</span>a<span class="token punctuation">,</span>
 
+    b<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> state<span class="token punctuation">.</span>some<span class="token punctuation">.</span>nested<span class="token punctuation">.</span>module<span class="token punctuation">.</span>b
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
 
+    <span class="token string">&apos;some/nested/module/foo&apos;</span><span class="token punctuation">,</span>
 
+    <span class="token string">&apos;some/nested/module/bar&apos;</span>
 
+  <span class="token punctuation">]</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>In such cases, you can pass the module namespace string as the first argument to the helpers so that all bindings are done using that module as the context. The above can be simplified to:</p>
 
+<pre class="language-"><code class="lang-js">computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token string">&apos;some/nested/module&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
 
+    a<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> state<span class="token punctuation">.</span>a<span class="token punctuation">,</span>
 
+    b<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> state<span class="token punctuation">.</span>b
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token string">&apos;some/nested/module&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>
 
+    <span class="token string">&apos;foo&apos;</span><span class="token punctuation">,</span>
 
+    <span class="token string">&apos;bar&apos;</span>
 
+  <span class="token punctuation">]</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>Furthermore, you can create namespaced helpers by using <code>createNamespacedHelpers</code>. It returns an object having new component binding helpers that are bound with the given namespace value:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> createNamespacedHelpers <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&apos;vuex&apos;</span>
 
+
 
+<span class="token keyword">const</span> <span class="token punctuation">{</span> mapState<span class="token punctuation">,</span> mapActions <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">createNamespacedHelpers</span><span class="token punctuation">(</span><span class="token string">&apos;some/nested/module&apos;</span><span class="token punctuation">)</span>
 
+
 
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
 
+  computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// look up in `some/nested/module`</span>
 
+    <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+      a<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> state<span class="token punctuation">.</span>a<span class="token punctuation">,</span>
 
+      b<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> state<span class="token punctuation">.</span>b
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// look up in `some/nested/module`</span>
 
+    <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
 
+      <span class="token string">&apos;foo&apos;</span><span class="token punctuation">,</span>
 
+      <span class="token string">&apos;bar&apos;</span>
 
+    <span class="token punctuation">]</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<h4 id="caveat-for-plugin-developers">Caveat for Plugin Developers</h4>
 
+<p>You may care about unpredictable namespacing for your modules when you create a <a href="plugins.html">plugin</a> that provides the modules and let users add them to a Vuex store. Your modules will be also namespaced if the plugin users add your modules under a namespaced module. To adapt this situation, you may need to receive a namespace value via your plugin option:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// get namespace value via plugin option</span>
 
+<span class="token comment" spellcheck="true">// and returns Vuex plugin function</span>
 
+<span class="token keyword">export</span> <span class="token keyword">function</span> createPlugin <span class="token punctuation">(</span>options <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>
 
+  <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>store<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// add namespace to plugin module&apos;s types</span>
 
+    <span class="token keyword">const</span> namespace <span class="token operator">=</span> options<span class="token punctuation">.</span>namespace <span class="token operator">||</span> <span class="token string">&apos;&apos;</span>
 
+    store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span>namespace <span class="token operator">+</span> <span class="token string">&apos;pluginAction&apos;</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<h3 id="dynamic-module-registration">Dynamic Module Registration</h3>
 
+<p>You can register a module <strong>after</strong> the store has been created with the <code>store.registerModule</code> method:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// register a module `myModule`</span>
 
+store<span class="token punctuation">.</span><span class="token function">registerModule</span><span class="token punctuation">(</span><span class="token string">&apos;myModule&apos;</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">// register a nested module `nested/myModule`</span>
 
+store<span class="token punctuation">.</span><span class="token function">registerModule</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&apos;nested&apos;</span><span class="token punctuation">,</span> <span class="token string">&apos;myModule&apos;</span><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>
 
+</code></pre>
 
+<p>The module&apos;s state will be exposed as <code>store.state.myModule</code> and <code>store.state.nested.myModule</code>.</p>
 
+<p>Dynamic module registration makes it possible for other Vue plugins to also leverage Vuex for state management by attaching a module to the application&apos;s store. For example, the <a href="https://github.com/vuejs/vuex-router-sync" target="_blank"><code>vuex-router-sync</code></a> library integrates vue-router with vuex by managing the application&apos;s route state in a dynamically attached module.</p>
 
+<p>You can also remove a dynamically registered module with <code>store.unregisterModule(moduleName)</code>. Note you cannot remove static modules (declared at store creation) with this method.</p>
 
+<p>It may be likely that you want to preserve the previous state when registering a new module, such as preserving state from a Server Side Rendered app. You can do achieve this with <code>preserveState</code> option: <code>store.registerModule(&apos;a&apos;, module, { preserveState: true })</code></p>
 
+<h3 id="module-reuse">Module Reuse</h3>
 
+<p>Sometimes we may need to create multiple instances of a module, for example:</p>
 
+<ul>
 
+<li>Creating multiple stores that use the same module (e.g. To <a href="https://ssr.vuejs.org/en/structure.html#avoid-stateful-singletons" target="_blank">avoid stateful singletons in the SSR</a> when the <code>runInNewContext</code> option is <code>false</code> or <code>&apos;once&apos;</code>);</li>
 
+<li>Register the same module multiple times in the same store.</li>
 
+</ul>
 
+<p>If we use a plain object to declare the state of the module, then that state object will be shared by reference and cause cross store/module state pollution when it&apos;s mutated.</p>
 
+<p>This is actually the exact same problem with <code>data</code> inside Vue components. So the solution is also the same - use a function for declaring module state (supported in 2.3.0+):</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> MyReusableModule <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+  state <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
 
+      foo<span class="token punctuation">:</span> <span class="token string">&apos;bar&apos;</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  <span class="token comment" spellcheck="true">// mutations, actions, getters...</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+
 
+                                
+                                </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="actions.html" class="navigation navigation-prev " aria-label="Previous page: Actions">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="structure.html" class="navigation navigation-next " aria-label="Next page: Application Structure">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Modules","level":"1.6.5","depth":2,"next":{"title":"Application Structure","level":"1.7","depth":1,"path":"structure.md","ref":"structure.md","articles":[]},"previous":{"title":"Actions","level":"1.6.4","depth":2,"path":"actions.md","ref":"actions.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":"modules.md","mtime":"2018-04-20T00:44:03.852Z","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>
 
+

+ 607 - 0
en/mutations.html
View File 

@@ -0,0 +1,607 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="en" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Mutations · 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="actions.html" />
 
+    
+    
+    <link rel="prev" href="getters.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 active" 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="." >Mutations</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="mutations">Mutations</h1>
 
+<p>The only way to actually change state in a Vuex store is by committing a mutation. Vuex mutations are very similar to events: each mutation has a string <strong>type</strong> and a <strong>handler</strong>. The handler function is where we perform actual state modifications, and it will receive the state as the first argument:</p>
 
+<pre class="language-"><code class="lang-js"><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">1</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>
 
+      <span class="token comment" spellcheck="true">// mutate state</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>You cannot directly call a mutation handler. Think of it more like event registration: &quot;When a mutation with type <code>increment</code> is triggered, call this handler.&quot; To invoke a mutation handler, you need to call <code>store.commit</code> with its type:</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>
 
+</code></pre>
 
+<h3 id="commit-with-payload">Commit with Payload</h3>
 
+<p>You can pass an additional argument to <code>store.commit</code>, which is called the <strong>payload</strong> for the mutation:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// ...</span>
 
+mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  increment <span class="token punctuation">(</span>state<span class="token punctuation">,</span> n<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 operator">=</span> n
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<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> <span class="token number">10</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>In most cases, the payload should be an object so that it can contain multiple fields, and the recorded mutation will also be more descriptive:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// ...</span>
 
+mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  increment <span class="token punctuation">(</span>state<span class="token punctuation">,</span> payload<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 operator">=</span> payload<span class="token punctuation">.</span>amount
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<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> <span class="token punctuation">{</span>
 
+  amount<span class="token punctuation">:</span> <span class="token number">10</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<h3 id="object-style-commit">Object-Style Commit</h3>
 
+<p>An alternative way to commit a mutation is by directly using an object that has a <code>type</code> property:</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 punctuation">{</span>
 
+  type<span class="token punctuation">:</span> <span class="token string">&apos;increment&apos;</span><span class="token punctuation">,</span>
 
+  amount<span class="token punctuation">:</span> <span class="token number">10</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>When using object-style commit, the entire object will be passed as the payload to mutation handlers, so the handler remains the same:</p>
 
+<pre class="language-"><code class="lang-js">mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  increment <span class="token punctuation">(</span>state<span class="token punctuation">,</span> payload<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 operator">=</span> payload<span class="token punctuation">.</span>amount
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<h3 id="mutations-follow-vues-reactivity-rules">Mutations Follow Vue&apos;s Reactivity Rules</h3>
 
+<p>Since a Vuex store&apos;s state is made reactive by Vue, when we mutate the state, Vue components observing the state will update automatically. This also means Vuex mutations are subject to the same reactivity caveats when working with plain Vue:</p>
 
+<ol>
 
+<li><p>Prefer initializing your store&apos;s initial state with all desired fields upfront.</p>
 
+</li>
 
+<li><p>When adding new properties to an Object, you should either:</p>
 
+<ul>
 
+<li><p>Use <code>Vue.set(obj, &apos;newProp&apos;, 123)</code>, or</p>
 
+</li>
 
+<li><p>Replace that Object with a fresh one. For example, using the stage-3 <a href="https://github.com/sebmarkbage/ecmascript-rest-spread" target="_blank">object spread syntax</a> we can write it like this:</p>
 
+<pre class="language-"><code class="lang-js">state<span class="token punctuation">.</span>obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span>state<span class="token punctuation">.</span>obj<span class="token punctuation">,</span> newProp<span class="token punctuation">:</span> <span class="token number">123</span> <span class="token punctuation">}</span>
 
+</code></pre>
 
+</li>
 
+</ul>
 
+</li>
 
+</ol>
 
+<h3 id="using-constants-for-mutation-types">Using Constants for Mutation Types</h3>
 
+<p>It is a commonly seen pattern to use constants for mutation types in various Flux implementations. This allows the code to take advantage of tooling like linters, and putting all constants in a single file allows your collaborators to get an at-a-glance view of what mutations are possible in the entire application:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// mutation-types.js</span>
 
+<span class="token keyword">export</span> <span class="token keyword">const</span> SOME_MUTATION <span class="token operator">=</span> <span class="token string">&apos;SOME_MUTATION&apos;</span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// store.js</span>
 
+<span class="token keyword">import</span> Vuex <span class="token keyword">from</span> <span class="token string">&apos;vuex&apos;</span>
 
+<span class="token keyword">import</span> <span class="token punctuation">{</span> SOME_MUTATION <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&apos;./mutation-types&apos;</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> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// we can use the ES2015 computed property name feature</span>
 
+    <span class="token comment" spellcheck="true">// to use a constant as the function name</span>
 
+    <span class="token punctuation">[</span>SOME_MUTATION<span class="token punctuation">]</span> <span class="token punctuation">(</span>state<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+      <span class="token comment" spellcheck="true">// mutate state</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>Whether to use constants is largely a preference - it can be helpful in large projects with many developers, but it&apos;s totally optional if you don&apos;t like them.</p>
 
+<h3 id="mutations-must-be-synchronous">Mutations Must Be Synchronous</h3>
 
+<p>One important rule to remember is that <strong>mutation handler functions must be synchronous</strong>. Why? Consider the following example:</p>
 
+<pre class="language-"><code class="lang-js">mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  someMutation <span class="token punctuation">(</span>state<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    api<span class="token punctuation">.</span><span class="token function">callAsyncMethod</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</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 imagine we are debugging the app and looking at the devtool&apos;s mutation logs. For every mutation logged, the devtool will need to capture a &quot;before&quot; and &quot;after&quot; snapshots of the state. However, the asynchronous callback inside the example mutation above makes that impossible: the callback is not called yet when the mutation is committed, and there&apos;s no way for the devtool to know when the callback will actually be called - any state mutation performed in the callback is essentially un-trackable!</p>
 
+<h3 id="committing-mutations-in-components">Committing Mutations in Components</h3>
 
+<p>You can commit mutations in components with <code>this.$store.commit(&apos;xxx&apos;)</code>, or use the <code>mapMutations</code> helper which maps component methods to <code>store.commit</code> calls (requires root <code>store</code> injection):</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> mapMutations <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>
 
+  methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    <span class="token operator">...</span><span class="token function">mapMutations</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
 
+      <span class="token string">&apos;increment&apos;</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// map `this.increment()` to `this.$store.commit(&apos;increment&apos;)`</span>
 
+
 
+      <span class="token comment" spellcheck="true">// `mapMutations` also supports payloads:</span>
 
+      <span class="token string">&apos;incrementBy&apos;</span> <span class="token comment" spellcheck="true">// map `this.incrementBy(amount)` to `this.$store.commit(&apos;incrementBy&apos;, amount)`</span>
 
+    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
 
+    <span class="token operator">...</span><span class="token function">mapMutations</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+      add<span class="token punctuation">:</span> <span class="token string">&apos;increment&apos;</span> <span class="token comment" spellcheck="true">// map `this.add()` to `this.$store.commit(&apos;increment&apos;)`</span>
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<h3 id="on-to-actions">On to Actions</h3>
 
+<p>Asynchronicity combined with state mutation can make your program very hard to reason about. For example, when you call two methods both with async callbacks that mutate the state, how do you know when they are called and which callback was called first? This is exactly why we want to separate the two concepts. In Vuex, <strong>mutations are synchronous transactions</strong>:</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>
 
+<span class="token comment" spellcheck="true">// any state change that the &quot;increment&quot; mutation may cause</span>
 
+<span class="token comment" spellcheck="true">// should be done at this moment.</span>
 
+</code></pre>
 
+<p>To handle asynchronous operations, let&apos;s introduce <a href="actions.html">Actions</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="getters.html" class="navigation navigation-prev " aria-label="Previous page: Getters">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="actions.html" class="navigation navigation-next " aria-label="Next page: Actions">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Mutations","level":"1.6.3","depth":2,"next":{"title":"Actions","level":"1.6.4","depth":2,"path":"actions.md","ref":"actions.md","articles":[]},"previous":{"title":"Getters","level":"1.6.2","depth":2,"path":"getters.md","ref":"getters.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":"mutations.md","mtime":"2018-04-20T00:44:03.852Z","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>
 
+

+ 576 - 0
en/plugins.html
View File 

@@ -0,0 +1,576 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="en" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Plugins · 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="strict.html" />
 
+    
+    
+    <link rel="prev" href="structure.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 " 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 active" 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="." >Plugins</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="plugins">Plugins</h1>
 
+<p>Vuex stores accept the <code>plugins</code> option that exposes hooks for each mutation. A Vuex plugin is simply a function that receives the store as the only argument:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> myPlugin <span class="token operator">=</span> store <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// called when the store is initialized</span>
 
+  store<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span>mutation<span class="token punctuation">,</span> state<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// called after every mutation.</span>
 
+    <span class="token comment" spellcheck="true">// The mutation comes in the format of `{ type, payload }`.</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>And can be used like this:</p>
 
+<pre class="language-"><code class="lang-js"><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>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>myPlugin<span class="token punctuation">]</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<h3 id="committing-mutations-inside-plugins">Committing Mutations Inside Plugins</h3>
 
+<p>Plugins are not allowed to directly mutate state - similar to your components, they can only trigger changes by committing mutations.</p>
 
+<p>By committing mutations, a plugin can be used to sync a data source to the store. For example, to sync a websocket data source to the store (this is just a contrived example, in reality the <code>createPlugin</code> function can take some additional options for more complex tasks):</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> createWebSocketPlugin <span class="token punctuation">(</span>socket<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+  <span class="token keyword">return</span> store <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    socket<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&apos;data&apos;</span><span class="token punctuation">,</span> data <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+      store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;receiveData&apos;</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+    store<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span>mutation <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+      <span class="token keyword">if</span> <span class="token punctuation">(</span>mutation<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&apos;UPDATE_DATA&apos;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+        socket<span class="token punctuation">.</span><span class="token function">emit</span><span class="token punctuation">(</span><span class="token string">&apos;update&apos;</span><span class="token punctuation">,</span> mutation<span class="token punctuation">.</span>payload<span class="token punctuation">)</span>
 
+      <span class="token punctuation">}</span>
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> plugin <span class="token operator">=</span> <span class="token function">createWebSocketPlugin</span><span class="token punctuation">(</span>socket<span class="token punctuation">)</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>
 
+  mutations<span class="token punctuation">,</span>
 
+  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>plugin<span class="token punctuation">]</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<h3 id="taking-state-snapshots">Taking State Snapshots</h3>
 
+<p>Sometimes a plugin may want to receive &quot;snapshots&quot; of the state, and also compare the post-mutation state with pre-mutation state. To achieve that, you will need to perform a deep-copy on the state object:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> myPluginWithSnapshot <span class="token operator">=</span> store <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  <span class="token keyword">let</span> prevState <span class="token operator">=</span> _<span class="token punctuation">.</span><span class="token function">cloneDeep</span><span class="token punctuation">(</span>store<span class="token punctuation">.</span>state<span class="token punctuation">)</span>
 
+  store<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span>mutation<span class="token punctuation">,</span> state<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">let</span> nextState <span class="token operator">=</span> _<span class="token punctuation">.</span><span class="token function">cloneDeep</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span>
 
+
 
+    <span class="token comment" spellcheck="true">// compare `prevState` and `nextState`...</span>
 
+
 
+    <span class="token comment" spellcheck="true">// save state for next mutation</span>
 
+    prevState <span class="token operator">=</span> nextState
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p><strong>Plugins that take state snapshots should be used only during development.</strong> When using webpack or Browserify, we can let our build tools handle that for us:</p>
 
+<pre class="language-"><code class="lang-js"><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>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  plugins<span class="token punctuation">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span>NODE_ENV <span class="token operator">!==</span> <span class="token string">&apos;production&apos;</span>
 
+    <span class="token operator">?</span> <span class="token punctuation">[</span>myPluginWithSnapshot<span class="token punctuation">]</span>
 
+    <span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>The plugin will be used by default. For production, you will need <a href="https://webpack.js.org/plugins/define-plugin/" target="_blank">DefinePlugin</a> for webpack or <a href="https://github.com/hughsk/envify" target="_blank">envify</a> for Browserify to convert the value of <code>process.env.NODE_ENV !== &apos;production&apos;</code> to <code>false</code> for the final build.</p>
 
+<h3 id="built-in-logger-plugin">Built-in Logger Plugin</h3>
 
+<blockquote>
 
+<p>If you are using <a href="https://github.com/vuejs/vue-devtools" target="_blank">vue-devtools</a> you probably don&apos;t need this.</p>
 
+</blockquote>
 
+<p>Vuex comes with a logger plugin for common debugging usage:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">import</span> createLogger <span class="token keyword">from</span> <span class="token string">&apos;vuex/dist/logger&apos;</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>
 
+  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token function">createLogger</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>The <code>createLogger</code> function takes a few options:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> logger <span class="token operator">=</span> <span class="token function">createLogger</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+  collapsed<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// auto-expand logged mutations</span>
 
+  filter <span class="token punctuation">(</span>mutation<span class="token punctuation">,</span> stateBefore<span class="token punctuation">,</span> stateAfter<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// returns `true` if a mutation should be logged</span>
 
+    <span class="token comment" spellcheck="true">// `mutation` is a `{ type, payload }`</span>
 
+    <span class="token keyword">return</span> mutation<span class="token punctuation">.</span>type <span class="token operator">!==</span> <span class="token string">&quot;aBlacklistedMutation&quot;</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  transformer <span class="token punctuation">(</span>state<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// transform the state before logging it.</span>
 
+    <span class="token comment" spellcheck="true">// for example return only a specific sub-tree</span>
 
+    <span class="token keyword">return</span> state<span class="token punctuation">.</span>subTree
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  mutationTransformer <span class="token punctuation">(</span>mutation<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// mutations are logged in the format of `{ type, payload }`</span>
 
+    <span class="token comment" spellcheck="true">// we can format it any way we want.</span>
 
+    <span class="token keyword">return</span> mutation<span class="token punctuation">.</span>type
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  logger<span class="token punctuation">:</span> console<span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// implementation of the `console` API, default `console`</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>The logger file can also be included directly via a <code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span></code> tag, and will expose the <code>createVuexLogger</code> function globally.</p>
 
+<p>Note the logger plugin takes state snapshots, so use it only during development.</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="structure.html" class="navigation navigation-prev " aria-label="Previous page: Application Structure">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="strict.html" class="navigation navigation-next " aria-label="Next page: Strict Mode">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Plugins","level":"1.8","depth":1,"next":{"title":"Strict Mode","level":"1.9","depth":1,"path":"strict.md","ref":"strict.md","articles":[]},"previous":{"title":"Application Structure","level":"1.7","depth":1,"path":"structure.md","ref":"structure.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":"plugins.md","mtime":"2018-04-20T00:44:03.852Z","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>
 
+

File diff suppressed because it is too large
+ 0 - 0
en/search_index.json


File diff suppressed because it is too large
+ 519 - 0
en/state.html


+ 495 - 0
en/strict.html
View File 

@@ -0,0 +1,495 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="en" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Strict Mode · 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="forms.html" />
 
+    
+    
+    <link rel="prev" href="plugins.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 " 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 active" 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="." >Strict Mode</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="strict-mode">Strict Mode</h1>
 
+<p>To enable strict mode, simply pass in <code>strict: true</code> when creating a Vuex store:</p>
 
+<pre class="language-"><code class="lang-js"><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>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  strict<span class="token punctuation">:</span> <span class="token boolean">true</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>In strict mode, whenever Vuex state is mutated outside of mutation handlers, an error will be thrown. This ensures that all state mutations can be explicitly tracked by debugging tools.</p>
 
+<h3 id="development-vs-production">Development vs. Production</h3>
 
+<p><strong>Do not enable strict mode when deploying for production!</strong> Strict mode runs a synchronous deep watcher on the state tree for detecting inappropriate mutations, and it can be quite expensive when you make large amount of mutations to the state. Make sure to turn it off in production to avoid the performance cost.</p>
 
+<p>Similar to plugins, we can let the build tools handle that:</p>
 
+<pre class="language-"><code class="lang-js"><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>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  strict<span class="token punctuation">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span>NODE_ENV <span class="token operator">!==</span> <span class="token string">&apos;production&apos;</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+
 
+                                
+                                </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="plugins.html" class="navigation navigation-prev " aria-label="Previous page: Plugins">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="forms.html" class="navigation navigation-next " aria-label="Next page: Form Handling">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Strict Mode","level":"1.9","depth":1,"next":{"title":"Form Handling","level":"1.10","depth":1,"path":"forms.md","ref":"forms.md","articles":[]},"previous":{"title":"Plugins","level":"1.8","depth":1,"path":"plugins.md","ref":"plugins.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":"strict.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>
 
+

+ 507 - 0
en/structure.html
View File 

@@ -0,0 +1,507 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="en" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Application Structure · 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="plugins.html" />
 
+    
+    
+    <link rel="prev" href="modules.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 " 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 active" 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="." >Application Structure</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="application-structure">Application Structure</h1>
 
+<p>Vuex doesn&apos;t really restrict how you structure your code. Rather, it enforces a set of high-level principles:</p>
 
+<ol>
 
+<li><p>Application-level state is centralized in the store.</p>
 
+</li>
 
+<li><p>The only way to mutate the state is by committing <strong>mutations</strong>, which are synchronous transactions.</p>
 
+</li>
 
+<li><p>Asynchronous logic should be encapsulated in, and can be composed with <strong>actions</strong>.</p>
 
+</li>
 
+</ol>
 
+<p>As long as you follow these rules, it&apos;s up to you how to structure your project. If your store file gets too big, simply start splitting the actions, mutations and getters into separate files.</p>
 
+<p>For any non-trivial app, we will likely need to leverage modules. Here&apos;s an example project structure:</p>
 
+<pre class="language-"><code class="lang-bash">&#x251C;&#x2500;&#x2500; index.html
 
+&#x251C;&#x2500;&#x2500; main.js
 
+&#x251C;&#x2500;&#x2500; api
 
+&#x2502;   &#x2514;&#x2500;&#x2500; <span class="token punctuation">..</span>. <span class="token comment" spellcheck="true"># abstractions for making API requests</span>
 
+&#x251C;&#x2500;&#x2500; components
 
+&#x2502;   &#x251C;&#x2500;&#x2500; App.vue
 
+&#x2502;   &#x2514;&#x2500;&#x2500; <span class="token punctuation">..</span>.
 
+&#x2514;&#x2500;&#x2500; store
 
+    &#x251C;&#x2500;&#x2500; index.js          <span class="token comment" spellcheck="true"># where we assemble modules and export the store</span>
 
+    &#x251C;&#x2500;&#x2500; actions.js        <span class="token comment" spellcheck="true"># root actions</span>
 
+    &#x251C;&#x2500;&#x2500; mutations.js      <span class="token comment" spellcheck="true"># root mutations</span>
 
+    &#x2514;&#x2500;&#x2500; modules
 
+        &#x251C;&#x2500;&#x2500; cart.js       <span class="token comment" spellcheck="true"># cart module</span>
 
+        &#x2514;&#x2500;&#x2500; products.js   <span class="token comment" spellcheck="true"># products module</span>
 
+</code></pre>
 
+<p>As a reference, check out the <a href="https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart" target="_blank">Shopping Cart Example</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="modules.html" class="navigation navigation-prev " aria-label="Previous page: Modules">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="plugins.html" class="navigation navigation-next " aria-label="Next page: Plugins">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Application Structure","level":"1.7","depth":1,"next":{"title":"Plugins","level":"1.8","depth":1,"path":"plugins.md","ref":"plugins.md","articles":[]},"previous":{"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":"structure.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>
 
+

+ 681 - 0
en/testing.html
View File 

@@ -0,0 +1,681 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="en" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Testing · 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="hot-reload.html" />
 
+    
+    
+    <link rel="prev" href="forms.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 " 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 active" 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="." >Testing</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="testing">Testing</h1>
 
+<p>The main parts we want to unit test in Vuex are mutations and actions.</p>
 
+<h3 id="testing-mutations">Testing Mutations</h3>
 
+<p>Mutations are very straightforward to test, because they are just functions that completely rely on their arguments. One trick is that if you are using ES2015 modules and put your mutations inside your <code>store.js</code> file, in addition to the default export, you should also export the mutations as a named export:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
 
+
 
+<span class="token comment" spellcheck="true">// export `mutations` as a named export</span>
 
+<span class="token keyword">export</span> <span class="token keyword">const</span> mutations <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
 
+
 
+<span class="token keyword">export</span> <span class="token keyword">default</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>
 
+  mutations
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>Example testing a mutation using Mocha + Chai (you can use any framework/assertion libraries you like):</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// mutations.js</span>
 
+<span class="token keyword">export</span> <span class="token keyword">const</span> mutations <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+  increment<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 operator">++</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// mutations.spec.js</span>
 
+<span class="token keyword">import</span> <span class="token punctuation">{</span> expect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&apos;chai&apos;</span>
 
+<span class="token keyword">import</span> <span class="token punctuation">{</span> mutations <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&apos;./store&apos;</span>
 
+
 
+<span class="token comment" spellcheck="true">// destructure assign `mutations`</span>
 
+<span class="token keyword">const</span> <span class="token punctuation">{</span> increment <span class="token punctuation">}</span> <span class="token operator">=</span> mutations
 
+
 
+<span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">&apos;mutations&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">&apos;INCREMENT&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// mock state</span>
 
+    <span class="token keyword">const</span> state <span class="token operator">=</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 comment" spellcheck="true">// apply mutation</span>
 
+    <span class="token function">increment</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span>
 
+    <span class="token comment" spellcheck="true">// assert result</span>
 
+    <span class="token function">expect</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>count<span class="token punctuation">)</span><span class="token punctuation">.</span>to<span class="token punctuation">.</span><span class="token function">equal</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<h3 id="testing-actions">Testing Actions</h3>
 
+<p>Actions can be a bit more tricky because they may call out to external APIs. When testing actions, we usually need to do some level of mocking - for example, we can abstract the API calls into a service and mock that service inside our tests. In order to easily mock dependencies, we can use webpack and <a href="https://github.com/plasticine/inject-loader" target="_blank">inject-loader</a> to bundle our test files.</p>
 
+<p>Example testing an async action:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// actions.js</span>
 
+<span class="token keyword">import</span> shop <span class="token keyword">from</span> <span class="token string">&apos;../api/shop&apos;</span>
 
+
 
+<span class="token keyword">export</span> <span class="token keyword">const</span> getAllProducts <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> commit <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;REQUEST_PRODUCTS&apos;</span><span class="token punctuation">)</span>
 
+  shop<span class="token punctuation">.</span><span class="token function">getProducts</span><span class="token punctuation">(</span>products <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;RECEIVE_PRODUCTS&apos;</span><span class="token punctuation">,</span> products<span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// actions.spec.js</span>
 
+
 
+<span class="token comment" spellcheck="true">// use require syntax for inline loaders.</span>
 
+<span class="token comment" spellcheck="true">// with inject-loader, this returns a module factory</span>
 
+<span class="token comment" spellcheck="true">// that allows us to inject mocked dependencies.</span>
 
+<span class="token keyword">import</span> <span class="token punctuation">{</span> expect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&apos;chai&apos;</span>
 
+<span class="token keyword">const</span> actionsInjector <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&apos;inject-loader!./actions&apos;</span><span class="token punctuation">)</span>
 
+
 
+<span class="token comment" spellcheck="true">// create the module with our mocks</span>
 
+<span class="token keyword">const</span> actions <span class="token operator">=</span> <span class="token function">actionsInjector</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+  <span class="token string">&apos;../api/shop&apos;</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    getProducts <span class="token punctuation">(</span>cb<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+        <span class="token function">cb</span><span class="token punctuation">(</span><span class="token punctuation">[</span> <span class="token comment" spellcheck="true">/* mocked response */</span> <span class="token punctuation">]</span><span class="token punctuation">)</span>
 
+      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+
 
+<span class="token comment" spellcheck="true">// helper for testing action with expected mutations</span>
 
+<span class="token keyword">const</span> testAction <span class="token operator">=</span> <span class="token punctuation">(</span>action<span class="token punctuation">,</span> payload<span class="token punctuation">,</span> state<span class="token punctuation">,</span> expectedMutations<span class="token punctuation">,</span> done<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  <span class="token keyword">let</span> count <span class="token operator">=</span> <span class="token number">0</span>
 
+
 
+  <span class="token comment" spellcheck="true">// mock commit</span>
 
+  <span class="token keyword">const</span> commit <span class="token operator">=</span> <span class="token punctuation">(</span>type<span class="token punctuation">,</span> payload<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">const</span> mutation <span class="token operator">=</span> expectedMutations<span class="token punctuation">[</span>count<span class="token punctuation">]</span>
 
+
 
+    <span class="token keyword">try</span> <span class="token punctuation">{</span>
 
+      <span class="token function">expect</span><span class="token punctuation">(</span>type<span class="token punctuation">)</span><span class="token punctuation">.</span>to<span class="token punctuation">.</span><span class="token function">equal</span><span class="token punctuation">(</span>mutation<span class="token punctuation">.</span>type<span class="token punctuation">)</span>
 
+      <span class="token keyword">if</span> <span class="token punctuation">(</span>payload<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+        <span class="token function">expect</span><span class="token punctuation">(</span>payload<span class="token punctuation">)</span><span class="token punctuation">.</span>to<span class="token punctuation">.</span>deep<span class="token punctuation">.</span><span class="token function">equal</span><span class="token punctuation">(</span>mutation<span class="token punctuation">.</span>payload<span class="token punctuation">)</span>
 
+      <span class="token punctuation">}</span>
 
+    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+      <span class="token function">done</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span>
 
+
 
+    count<span class="token operator">++</span>
 
+    <span class="token keyword">if</span> <span class="token punctuation">(</span>count <span class="token operator">&gt;=</span> expectedMutations<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+      <span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+
 
+  <span class="token comment" spellcheck="true">// call the action with mocked store and arguments</span>
 
+  <span class="token function">action</span><span class="token punctuation">(</span><span class="token punctuation">{</span> commit<span class="token punctuation">,</span> state <span class="token punctuation">}</span><span class="token punctuation">,</span> payload<span class="token punctuation">)</span>
 
+
 
+  <span class="token comment" spellcheck="true">// check if no mutations should have been dispatched</span>
 
+  <span class="token keyword">if</span> <span class="token punctuation">(</span>expectedMutations<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token function">expect</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span><span class="token punctuation">.</span>to<span class="token punctuation">.</span><span class="token function">equal</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
 
+    <span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+
 
+<span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">&apos;actions&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">&apos;getAllProducts&apos;</span><span class="token punctuation">,</span> done <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token function">testAction</span><span class="token punctuation">(</span>actions<span class="token punctuation">.</span>getAllProducts<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>
 
+      <span class="token punctuation">{</span> type<span class="token punctuation">:</span> <span class="token string">&apos;REQUEST_PRODUCTS&apos;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+      <span class="token punctuation">{</span> type<span class="token punctuation">:</span> <span class="token string">&apos;RECEIVE_PRODUCTS&apos;</span><span class="token punctuation">,</span> payload<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* mocked response */</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
 
+    <span class="token punctuation">]</span><span class="token punctuation">,</span> done<span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>If you have spies available in your testing environment (for example via <a href="http://sinonjs.org/" target="_blank">Sinon.JS</a>), you can use them instead of the <code>testAction</code> helper:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">&apos;actions&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">&apos;getAllProducts&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">const</span> commit <span class="token operator">=</span> sinon<span class="token punctuation">.</span><span class="token function">spy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
 
+    <span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
 
+
 
+    actions<span class="token punctuation">.</span><span class="token function">getAllProducts</span><span class="token punctuation">(</span><span class="token punctuation">{</span> commit<span class="token punctuation">,</span> state <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+
 
+    <span class="token function">expect</span><span class="token punctuation">(</span>commit<span class="token punctuation">.</span>args<span class="token punctuation">)</span><span class="token punctuation">.</span>to<span class="token punctuation">.</span>deep<span class="token punctuation">.</span><span class="token function">equal</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
 
+      <span class="token punctuation">[</span><span class="token string">&apos;REQUEST_PRODUCTS&apos;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
 
+      <span class="token punctuation">[</span><span class="token string">&apos;RECEIVE_PRODUCTS&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* mocked response */</span> <span class="token punctuation">}</span><span class="token punctuation">]</span>
 
+    <span class="token punctuation">]</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<h3 id="testing-getters">Testing Getters</h3>
 
+<p>If your getters have complicated computation, it is worth testing them. Getters are also very straightforward to test as same reason as mutations.</p>
 
+<p>Example testing a getter:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// getters.js</span>
 
+<span class="token keyword">export</span> <span class="token keyword">const</span> getters <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+  filteredProducts <span class="token punctuation">(</span>state<span class="token punctuation">,</span> <span class="token punctuation">{</span> filterCategory <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">return</span> state<span class="token punctuation">.</span>products<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>product <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+      <span class="token keyword">return</span> product<span class="token punctuation">.</span>category <span class="token operator">===</span> filterCategory
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// getters.spec.js</span>
 
+<span class="token keyword">import</span> <span class="token punctuation">{</span> expect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&apos;chai&apos;</span>
 
+<span class="token keyword">import</span> <span class="token punctuation">{</span> getters <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&apos;./getters&apos;</span>
 
+
 
+<span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">&apos;getters&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">&apos;filteredProducts&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// mock state</span>
 
+    <span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+      products<span class="token punctuation">:</span> <span class="token punctuation">[</span>
 
+        <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token string">&apos;Apple&apos;</span><span class="token punctuation">,</span> category<span class="token punctuation">:</span> <span class="token string">&apos;fruit&apos;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+        <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token string">&apos;Orange&apos;</span><span class="token punctuation">,</span> category<span class="token punctuation">:</span> <span class="token string">&apos;fruit&apos;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+        <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token string">&apos;Carrot&apos;</span><span class="token punctuation">,</span> category<span class="token punctuation">:</span> <span class="token string">&apos;vegetable&apos;</span> <span class="token punctuation">}</span>
 
+      <span class="token punctuation">]</span>
 
+    <span class="token punctuation">}</span>
 
+    <span class="token comment" spellcheck="true">// mock getter</span>
 
+    <span class="token keyword">const</span> filterCategory <span class="token operator">=</span> <span class="token string">&apos;fruit&apos;</span>
 
+
 
+    <span class="token comment" spellcheck="true">// get the result from the getter</span>
 
+    <span class="token keyword">const</span> result <span class="token operator">=</span> getters<span class="token punctuation">.</span><span class="token function">filteredProducts</span><span class="token punctuation">(</span>state<span class="token punctuation">,</span> <span class="token punctuation">{</span> filterCategory <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+
 
+    <span class="token comment" spellcheck="true">// assert the result</span>
 
+    <span class="token function">expect</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">.</span>to<span class="token punctuation">.</span>deep<span class="token punctuation">.</span><span class="token function">equal</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
 
+      <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token string">&apos;Apple&apos;</span><span class="token punctuation">,</span> category<span class="token punctuation">:</span> <span class="token string">&apos;fruit&apos;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+      <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token string">&apos;Orange&apos;</span><span class="token punctuation">,</span> category<span class="token punctuation">:</span> <span class="token string">&apos;fruit&apos;</span> <span class="token punctuation">}</span>
 
+    <span class="token punctuation">]</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<h3 id="running-tests">Running Tests</h3>
 
+<p>If your mutations and actions are written properly, the tests should have no direct dependency on Browser APIs after proper mocking. Thus you can simply bundle the tests with webpack and run it directly in Node. Alternatively, you can use <code>mocha-loader</code> or Karma + <code>karma-webpack</code> to run the tests in real browsers.</p>
 
+<h4 id="running-in-node">Running in Node</h4>
 
+<p>Create the following webpack config (together with proper <a href="https://babeljs.io/docs/usage/babelrc/" target="_blank"><code>.babelrc</code></a>):</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// webpack.config.js</span>
 
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+  entry<span class="token punctuation">:</span> <span class="token string">&apos;./test.js&apos;</span><span class="token punctuation">,</span>
 
+  output<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    path<span class="token punctuation">:</span> __dirname<span class="token punctuation">,</span>
 
+    filename<span class="token punctuation">:</span> <span class="token string">&apos;test-bundle.js&apos;</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    loaders<span class="token punctuation">:</span> <span class="token punctuation">[</span>
 
+      <span class="token punctuation">{</span>
 
+        test<span class="token punctuation">:</span> <span class="token regex">/\.js$/</span><span class="token punctuation">,</span>
 
+        loader<span class="token punctuation">:</span> <span class="token string">&apos;babel-loader&apos;</span><span class="token punctuation">,</span>
 
+        exclude<span class="token punctuation">:</span> <span class="token regex">/node_modules/</span>
 
+      <span class="token punctuation">}</span>
 
+    <span class="token punctuation">]</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>Then:</p>
 
+<pre class="language-"><code class="lang-bash">webpack
 
+mocha test-bundle.js
 
+</code></pre>
 
+<h4 id="running-in-browser">Running in Browser</h4>
 
+<ol>
 
+<li>Install <code>mocha-loader</code>.</li>
 
+<li>Change the <code>entry</code> from the webpack config above to <code>&apos;mocha-loader!babel-loader!./test.js&apos;</code>.</li>
 
+<li>Start <code>webpack-dev-server</code> using the config.</li>
 
+<li>Go to <code>localhost:8080/webpack-dev-server/test-bundle</code>.</li>
 
+</ol>
 
+<h4 id="running-in-browser-with-karma--karma-webpack">Running in Browser with Karma + karma-webpack</h4>
 
+<p>Consult the setup in <a href="https://vue-loader.vuejs.org/en/workflow/testing.html" target="_blank">vue-loader documentation</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="forms.html" class="navigation navigation-prev " aria-label="Previous page: Form Handling">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="hot-reload.html" class="navigation navigation-next " aria-label="Next page: Hot Reloading">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Testing","level":"1.11","depth":1,"next":{"title":"Hot Reloading","level":"1.12","depth":1,"path":"hot-reload.md","ref":"hot-reload.md","articles":[]},"previous":{"title":"Form Handling","level":"1.10","depth":1,"path":"forms.md","ref":"forms.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":"testing.md","mtime":"2018-04-20T00:44:03.854Z","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>
 
+

+ 619 - 0
fr/actions.html
View File 

@@ -0,0 +1,619 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="fr" >
 
+    <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.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="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="Tapez pour rechercher" />
 
+</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">
 
+            
+                    
+                    Notes de version
 
+            
+                </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">
 
+            
+                    
+                    Vuex, qu'est-ce que c'est ?
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.5" data-path="getting-started.html">
 
+            
+                <a href="getting-started.html">
 
+            
+                    
+                    Pour commencer
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6" data-path="core-concepts.html">
 
+            
+                <a href="core-concepts.html">
 
+            
+                    
+                    Concepts de base
 
+            
+                </a>
 
+            
+
 
+            
+            <ul class="articles">
 
+                
+    
+        <li class="chapter " data-level="1.6.1" data-path="state.html">
 
+            
+                <a href="state.html">
 
+            
+                    
+                    État
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6.2" data-path="getters.html">
 
+            
+                <a href="getters.html">
 
+            
+                    
+                    Accesseurs
 
+            
+                </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">
 
+            
+                    
+                    Structure d'une application
 
+            
+                </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">
 
+            
+                    
+                    Mode strict
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.10" data-path="forms.html">
 
+            
+                <a href="forms.html">
 
+            
+                    
+                    Gestion des formulaires
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.11" data-path="testing.html">
 
+            
+                <a href="testing.html">
 
+            
+                    
+                    Tests
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.12" data-path="hot-reload.html">
 
+            
+                <a href="hot-reload.html">
 
+            
+                    
+                    Rechargement à chaud
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.13" data-path="api.html">
 
+            
+                <a href="api.html">
 
+            
+                    
+                    Documentation de l'API
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+
 
+    
+
 
+    <li class="divider"></li>
 
+
 
+    <li>
 
+        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
 
+            Publié avec 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="." >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>
 
+<p>Les actions sont similaires aux mutations, &#xE0; la diff&#xE9;rence que :</p>
 
+<ul>
 
+<li>Au lieu de modifier l&apos;&#xE9;tat, les actions actent des mutations.</li>
 
+<li>Les actions peuvent contenir des op&#xE9;rations asynchrones.</li>
 
+</ul>
 
+<p>Enregistrons une simple action :</p>
 
+<pre class="language-"><code class="lang-js"><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>
 
+  actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    increment <span class="token punctuation">(</span>context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+      context<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>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>Les gestionnaires d&apos;action re&#xE7;oivent un objet contexte qui expose le m&#xEA;me ensemble de m&#xE9;thodes et propri&#xE9;t&#xE9;s que l&apos;instance du store, donc vous pouvez appeler <code>context.commit</code> pour acter une mutation, ou acc&#xE9;der &#xE0; l&apos;&#xE9;tat et aux accesseurs via <code>context.state</code> et <code>context.getters</code>. Nous verrons pourquoi cet objet contexte n&apos;est pas l&apos;instance du store elle-m&#xEA;me lorsque nous pr&#xE9;senterons les <a href="modules.html">Modules</a> plus tard.</p>
 
+<p>En pratique, nous utilisons souvent la <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Affecter_par_d%C3%A9composition" target="_blank">d&#xE9;structuration d&apos;argument</a> pour simplifier quelque peu le code (particuli&#xE8;rement si nous avons besoin d&apos;appeler <code>commit</code> plusieurs fois) :</p>
 
+<pre class="language-"><code class="lang-js">actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  increment <span class="token punctuation">(</span><span class="token punctuation">{</span> commit <span class="token punctuation">}</span><span class="token punctuation">)</span> <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>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<h3 id="propager-des-actions">Propager des actions</h3>
 
+<p>Les actions sont d&#xE9;clench&#xE9;es par la m&#xE9;thode <code>store.dispatch</code> :</p>
 
+<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;increment&apos;</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>Cela peut sembler idiot au premier abord : si nous avons besoin d&apos;incr&#xE9;menter le compteur, pourquoi ne pas simplement appeler <code>store.commit(&apos;increment&apos;)</code> directement ? Vous rappelez-vous que <strong>les mutations doivent &#xEA;tre synchrones</strong> ? Les actions ne suivent pas cette r&#xE8;gle. Il est possible de proc&#xE9;der &#xE0; des op&#xE9;rations <strong>asynchrones</strong> dans une action :</p>
 
+<pre class="language-"><code class="lang-js">actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  incrementAsync <span class="token punctuation">(</span><span class="token punctuation">{</span> commit <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <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>
 
+    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>Les actions prennent &#xE9;galement en charge les param&#xE8;tres additionnels (&#xAB; payload &#xBB;) et les objets pour propager :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// propager avec un param&#xE8;tre additionnel</span>
 
+store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;incrementAsync&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
 
+  amount<span class="token punctuation">:</span> <span class="token number">10</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+
 
+<span class="token comment" spellcheck="true">// propager avec un objet</span>
 
+store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+  type<span class="token punctuation">:</span> <span class="token string">&apos;incrementAsync&apos;</span><span class="token punctuation">,</span>
 
+  amount<span class="token punctuation">:</span> <span class="token number">10</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>Un exemple concret d&apos;application serait une action pour vider un panier d&apos;achats, ce qui implique <strong>d&apos;appeler une API asynchrone</strong> et d&apos;<strong>acter de multiples mutations</strong> :</p>
 
+<pre class="language-"><code class="lang-js">actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  checkout <span class="token punctuation">(</span><span class="token punctuation">{</span> commit<span class="token punctuation">,</span> state <span class="token punctuation">}</span><span class="token punctuation">,</span> products<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// sauvegarder les articles actuellement dans le panier</span>
 
+    <span class="token keyword">const</span> savedCartItems <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>state<span class="token punctuation">.</span>cart<span class="token punctuation">.</span>added<span class="token punctuation">]</span>
 
+    <span class="token comment" spellcheck="true">// envoyer la requ&#xEA;te de checkout,</span>
 
+    <span class="token comment" spellcheck="true">// et vider le panier</span>
 
+    <span class="token function">commit</span><span class="token punctuation">(</span>types<span class="token punctuation">.</span>CHECKOUT_REQUEST<span class="token punctuation">)</span>
 
+    <span class="token comment" spellcheck="true">// l&apos;API de la boutique en ligne prend une fonction de rappel en cas de succ&#xE8;s et une autre en cas d&apos;&#xE9;chec</span>
 
+    shop<span class="token punctuation">.</span><span class="token function">buyProducts</span><span class="token punctuation">(</span>
 
+      products<span class="token punctuation">,</span>
 
+      <span class="token comment" spellcheck="true">// g&#xE9;rer le succ&#xE8;s</span>
 
+      <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token function">commit</span><span class="token punctuation">(</span>types<span class="token punctuation">.</span>CHECKOUT_SUCCESS<span class="token punctuation">)</span><span class="token punctuation">,</span>
 
+      <span class="token comment" spellcheck="true">// g&#xE9;rer l&apos;&#xE9;chec</span>
 
+      <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token function">commit</span><span class="token punctuation">(</span>types<span class="token punctuation">.</span>CHECKOUT_FAILURE<span class="token punctuation">,</span> savedCartItems<span class="token punctuation">)</span>
 
+    <span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>Notez que nous proc&#xE9;dons &#xE0; un flux d&apos;op&#xE9;rations asynchrones, et enregistrons les effets de bord (mutation de l&apos;&#xE9;tat) de l&apos;action en les actant.</p>
 
+<h3 id="propager-des-actions-dans-les-composants">Propager des actions dans les composants</h3>
 
+<p>Vous pouvez propager des actions dans les composants avec <code>this.$store.dispatch(&apos;xxx&apos;)</code>, ou en utilisant la fonction utilitaire <code>mapActions</code> qui attache les m&#xE9;thodes du composant aux appels de <code>store.dispatch</code> (n&#xE9;cessite l&apos;injection de <code>store</code> &#xE0; la racine) :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> mapActions <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>
 
+  methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
 
+      <span class="token string">&apos;increment&apos;</span> <span class="token comment" spellcheck="true">// attacher `this.increment()` &#xE0; `this.$store.dispatch(&apos;increment&apos;)`</span>
 
+
 
+      <span class="token comment" spellcheck="true">// `mapActions` supporte &#xE9;galement les param&#xE8;tres additionnels :</span>
 
+      <span class="token string">&apos;incrementBy&apos;</span> <span class="token comment" spellcheck="true">// attacher `this.incrementBy(amount)` &#xE0; `this.$store.dispatch(&apos;incrementBy&apos;, amount)`</span>
 
+    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
 
+    <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+      add<span class="token punctuation">:</span> <span class="token string">&apos;increment&apos;</span> <span class="token comment" spellcheck="true">// attacher `this.add()` &#xE0; `this.$store.dispatch(&apos;increment&apos;)`</span>
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<h3 id="composer-les-actions">Composer les actions</h3>
 
+<p>Les actions sont souvent asynchrones, donc comment savoir lorsqu&apos;une action est termin&#xE9;e ? Et plus important, comment composer plusieurs actions ensemble pour manipuler des flux asynchrones plus complexes ?</p>
 
+<p>La premi&#xE8;re chose &#xE0; savoir est que <code>store.dispatch</code> peut g&#xE9;rer la Promesse (&#xAB; Promise &#xBB;) retourn&#xE9;e par le gestionnaire d&apos;action d&#xE9;clench&#xE9; et par cons&#xE9;quent vous pouvez &#xE9;galement retourner une Promesse :</p>
 
+<pre class="language-"><code class="lang-js">actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  actionA <span class="token punctuation">(</span><span class="token punctuation">{</span> commit <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">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> reject<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+        <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;someMutation&apos;</span><span class="token punctuation">)</span>
 
+        <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
 
+      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>Maintenant vous pouvez faire :</p>
 
+<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;actionA&apos;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>Et &#xE9;galement dans une autre action :</p>
 
+<pre class="language-"><code class="lang-js">actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  actionB <span class="token punctuation">(</span><span class="token punctuation">{</span> dispatch<span class="token punctuation">,</span> commit <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">return</span> <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;actionA&apos;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+      <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;someOtherMutation&apos;</span><span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>Pour finir, si nous utilisons <a href="https://tc39.github.io/ecmascript-asyncawait/" target="_blank"><code>async</code> / <code>await</code></a>, nous pouvons composer nos actions ainsi :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// sachant que `getData()` et `getOtherData()` retournent des Promesses.</span>
 
+
 
+actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token keyword">async</span> actionA <span class="token punctuation">(</span><span class="token punctuation">{</span> commit <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;gotData&apos;</span><span class="token punctuation">,</span> <span class="token keyword">await</span> <span class="token function">getData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  <span class="token keyword">async</span> actionB <span class="token punctuation">(</span><span class="token punctuation">{</span> dispatch<span class="token punctuation">,</span> commit <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">await</span> <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;actionA&apos;</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// attendre que `actionA` soit finie</span>
 
+    <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;gotOtherData&apos;</span><span class="token punctuation">,</span> <span class="token keyword">await</span> <span class="token function">getOtherData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<blockquote>
 
+<p>Il est possible pour un <code>store.dispatch</code> de d&#xE9;clencher plusieurs gestionnaires d&apos;action dans diff&#xE9;rents modules. Dans ce genre de cas, la valeur retourn&#xE9;e sera une Promesse qui se r&#xE9;sout quand tous les gestionnaires d&#xE9;clench&#xE9;s ont &#xE9;t&#xE9; r&#xE9;solus.</p>
 
+</blockquote>
 
+
 
+                                
+                                </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="mutations.html" class="navigation navigation-prev " aria-label="Previous page: Mutations">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="modules.html" class="navigation navigation-next " aria-label="Next page: Modules">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </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":{"edit-link":{"label":"Éditer cette 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":"fr","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"actions.md","mtime":"2018-04-20T00:44:03.855Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"fr"}});
 
+        });
 
+    </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>
 
+

+ 658 - 0
fr/api.html
View File 

@@ -0,0 +1,658 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="fr" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Documentation de l'API · 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="prev" href="hot-reload.html" />
 
+    
+
 
+    </head>
 
+    <body>
 
+        
+<div class="book">
 
+    <div class="book-summary">
 
+        
+            
+<div id="book-search-input" role="search">
 
+    <input type="text" placeholder="Tapez pour rechercher" />
 
+</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">
 
+            
+                    
+                    Notes de version
 
+            
+                </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">
 
+            
+                    
+                    Vuex, qu'est-ce que c'est ?
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.5" data-path="getting-started.html">
 
+            
+                <a href="getting-started.html">
 
+            
+                    
+                    Pour commencer
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6" data-path="core-concepts.html">
 
+            
+                <a href="core-concepts.html">
 
+            
+                    
+                    Concepts de base
 
+            
+                </a>
 
+            
+
 
+            
+            <ul class="articles">
 
+                
+    
+        <li class="chapter " data-level="1.6.1" data-path="state.html">
 
+            
+                <a href="state.html">
 
+            
+                    
+                    État
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6.2" data-path="getters.html">
 
+            
+                <a href="getters.html">
 
+            
+                    
+                    Accesseurs
 
+            
+                </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">
 
+            
+                    
+                    Structure d'une application
 
+            
+                </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">
 
+            
+                    
+                    Mode strict
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.10" data-path="forms.html">
 
+            
+                <a href="forms.html">
 
+            
+                    
+                    Gestion des formulaires
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.11" data-path="testing.html">
 
+            
+                <a href="testing.html">
 
+            
+                    
+                    Tests
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.12" data-path="hot-reload.html">
 
+            
+                <a href="hot-reload.html">
 
+            
+                    
+                    Rechargement à chaud
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter active" data-level="1.13" data-path="api.html">
 
+            
+                <a href="api.html">
 
+            
+                    
+                    Documentation de l'API
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+
 
+    
+
 
+    <li class="divider"></li>
 
+
 
+    <li>
 
+        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
 
+            Publié avec 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="." >Documentation de l'API</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="documentation-de-lapi">Documentation de l&apos;API</h1>
 
+<h3 id="vuexstore"><code>Vuex.Store</code></h3>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">import</span> Vuex <span class="token keyword">from</span> <span class="token string">&apos;vuex&apos;</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> <span class="token operator">...</span>options <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<h3 id="options-du-constructeur-de-vuexstore">Options du constructeur de <code>Vuex.Store</code></h3>
 
+<ul>
 
+<li><p><strong>state</strong></p>
 
+<ul>
 
+<li><p>type : <code>Object | Function</code></p>
 
+<p>L&apos;objet d&apos;&#xE9;tat racine pour le store Vuex. <a href="state.html">Plus de d&#xE9;tails</a></p>
 
+<p>Si vous passez une fonction qui retourne un objet, l&apos;objet retourn&#xE9; est utilis&#xE9; en tant qu&apos;&#xE9;tat racine. Ceci est utile quand vous voulez r&#xE9;utiliser un objet d&apos;&#xE9;tat surtout dans un cas de r&#xE9;utilisation de module. <a href="modules.html#r&#xE9;utiliser-un-module">Plus de d&#xE9;tails</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>mutations</strong></p>
 
+<ul>
 
+<li><p>type : <code>{ [type: string]: Function }</code></p>
 
+<p>Enregistrer les mutations sur le store. La fonction gestionnaire re&#xE7;oit toujours <code>state</code> comme premier argument (sera l&apos;&#xE9;tat local du module si d&#xE9;fini dans un module), et re&#xE7;oit le <code>payload</code> en second argument s&apos;il y en a un.</p>
 
+<p><a href="mutations.html">Plus de d&#xE9;tails</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>actions</strong></p>
 
+<ul>
 
+<li><p>type : <code>{ [type: string]: Function }</code></p>
 
+<p>Enregistrer les actions sur le store. La fonction gestionnaire re&#xE7;oit un objet <code>context</code> qui expose les propri&#xE9;t&#xE9;s suivantes :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token punctuation">{</span>
 
+  state<span class="token punctuation">,</span>      <span class="token comment" spellcheck="true">// identique &#xE0; `store.state`, ou &#xE0; l&apos;&#xE9;tat local si dans des modules</span>
 
+  rootState<span class="token punctuation">,</span>  <span class="token comment" spellcheck="true">// identique &#xE0; `store.state`, seulement dans des modules</span>
 
+  commit<span class="token punctuation">,</span>     <span class="token comment" spellcheck="true">// identique &#xE0; `store.commit`</span>
 
+  dispatch<span class="token punctuation">,</span>   <span class="token comment" spellcheck="true">// identique &#xE0; `store.dispatch`</span>
 
+  getters<span class="token punctuation">,</span>    <span class="token comment" spellcheck="true">// identique &#xE0; `store.getters`, ou les accesseurs locaux dans les modules</span>
 
+  rootGetters <span class="token comment" spellcheck="true">// identique &#xE0; `store.getters`, seulement dans les modules</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p><a href="actions.html">Plus de d&#xE9;tails</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>getters</strong></p>
 
+<ul>
 
+<li><p>type : <code>{ [key: string]: Function }</code></p>
 
+<p>Enregistrer les accesseurs sur le store. La fonction accesseur re&#xE7;oit les arguments suivants :</p>
 
+<pre class="language-"><code>state,    // sera l&apos;&#xE9;tat local du module si d&#xE9;fini dans un module.
 
+getters   // identique &#xE0; `store.getters`
 
+</code></pre><p>Arguments sp&#xE9;cifiques quand d&#xE9;fini dans un module</p>
 
+<pre class="language-"><code>state,       // sera l&apos;&#xE9;tat local du module si d&#xE9;fini dans un module.
 
+getters,     // module local getters of the current module
 
+rootState,   // &#xE9;tat global
 
+rootGetters  // tous les accesseurs
 
+</code></pre><p>Les accesseurs enregistr&#xE9;s sont expos&#xE9;s sur <code>store.getters</code>.</p>
 
+<p><a href="getters.html">Plus de d&#xE9;tails</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>modules</strong></p>
 
+<ul>
 
+<li><p>type : <code>Object</code></p>
 
+<p>Un objet contenant des sous-modules qui seront regroup&#xE9;s dans le store, sous la forme suivante :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token punctuation">{</span>
 
+  key<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    state<span class="token punctuation">,</span>
 
+    namespaced<span class="token operator">?</span><span class="token punctuation">,</span>
 
+    mutations<span class="token operator">?</span><span class="token punctuation">,</span>
 
+    actions<span class="token operator">?</span><span class="token punctuation">,</span>
 
+    getters<span class="token operator">?</span><span class="token punctuation">,</span>
 
+    modules<span class="token operator">?</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  <span class="token operator">...</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>Chaque module peut contenir <code>state</code> et <code>mutations</code>, tout comme les options racines. L&apos;&#xE9;tat d&apos;un module sera attach&#xE9; &#xE0; l&apos;&#xE9;tat racine du store en utilisant la cl&#xE9; du module. Les mutations et accesseurs d&apos;un module recevront seulement l&apos;&#xE9;tat local du module en premier argument au lieu de l&apos;&#xE9;tat racine, et le <code>context.state</code> des actions du module pointeront &#xE9;galement vers l&apos;&#xE9;tat local.</p>
 
+<p><a href="modules.html">Plus de d&#xE9;tails</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>plugins</strong></p>
 
+<ul>
 
+<li><p>type : <code>Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Function</span><span class="token punctuation">&gt;</span></span></code></p>
 
+<p>Un tableau de fonctions plugins qui seront appliqu&#xE9;es au store. Un plugin re&#xE7;oit simplement le store comme seul argument et peut soit &#xE9;couter les mutations (pour la persistance de donn&#xE9;es, les logs ou le d&#xE9;bogage) ou propager des mutations (pour les donn&#xE9;es internes, c.-&#xE0;-d. websockets ou observables).</p>
 
+<p><a href="plugins.html">Plus de d&#xE9;tails</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>strict</strong></p>
 
+<ul>
 
+<li>type : <code>Boolean</code></li>
 
+<li><p>default: <code>false</code></p>
 
+<p>Force le store Vuex en mode strict. En mode strict, toute mutation de l&apos;&#xE9;tat en dehors des gestionnaires de mutation lancera une erreur.</p>
 
+<p><a href="strict.html">Plus de d&#xE9;tails</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+</ul>
 
+<h3 id="propri&#xE9;t&#xE9;s-dinstance-de-vuexstore">Propri&#xE9;t&#xE9;s d&apos;instance de <code>Vuex.Store</code></h3>
 
+<ul>
 
+<li><p><strong>state</strong></p>
 
+<ul>
 
+<li><p>type : <code>Object</code></p>
 
+<p>L&apos;&#xE9;tat racine. Lecture seule.</p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>getters</strong></p>
 
+<ul>
 
+<li><p>type : <code>Object</code></p>
 
+<p>Expose les accesseurs enregistr&#xE9;s. Lecture seule.</p>
 
+</li>
 
+</ul>
 
+</li>
 
+</ul>
 
+<h3 id="m&#xE9;thodes-dinstance-de-vuexstore">M&#xE9;thodes d&apos;instance de <code>Vuex.Store</code></h3>
 
+<ul>
 
+<li><strong><code>commit(type: string, payload?: any, options?: Object)</code></strong></li>
 
+<li><p><strong><code>commit(mutation: Object, options?: Object)</code></strong></p>
 
+<p>Acter une mutation. <code>options</code> peut avoir <code>root: true</code> ce qui permet d&apos;acter des mutations racines dans des <a href="modules.html#namespacing">modules sous espace de nom</a>. <a href="mutations.html">Plus de d&#xE9;tails</a></p>
 
+</li>
 
+<li><p><strong><code>dispatch(type: string, payload?: any, options?: Object)</code></strong></p>
 
+</li>
 
+<li><p><strong><code>dispatch(action: Object, options?: Object)</code></strong></p>
 
+<p>Propager une action. Retourne la valeur renvoy&#xE9;e par le gestionnaire d&apos;action d&#xE9;clench&#xE9;, ou une Promesse si plusieurs gestionnaires ont &#xE9;t&#xE9; d&#xE9;clench&#xE9;s. <a href="actions.html">Plus de d&#xE9;tails</a></p>
 
+</li>
 
+<li><p><strong><code>replaceState(state: Object)</code></strong></p>
 
+<p>Remplacer l&apos;&#xE9;tat racine du store. Utiliser seulement pour hydrater l&apos;&#xE9;tat ou dans le but de voyager dans le temps.</p>
 
+</li>
 
+<li><p><strong><code>watch(getter: Function, cb: Function, options?: Object)</code></strong></p>
 
+<p>Observer de fa&#xE7;on r&#xE9;active la valeur de retour d&apos;une fonction accesseur, et appeler la fonction de rappel lorsque la valeur change. L&apos;accesseur re&#xE7;oit l&apos;&#xE9;tat du store en premier argument, et les accesseurs en second argument. Accepte un objet optionnel d&apos;options qui prend les m&#xEA;mes options que la m&#xE9;thode <code>vm.$watch</code> de Vue.</p>
 
+<p>Pour arr&#xEA;ter d&apos;observer, appeler la fonction gestionnaire retourn&#xE9;e.</p>
 
+</li>
 
+<li><p><strong><code>subscribe(handler: Function)</code></strong></p>
 
+<p>S&apos;abonner aux mutations du store. Le <code>handler</code> est appel&#xE9; apr&#xE8;s chaque mutation et re&#xE7;oit le descripteur de mutation et l&apos;&#xE9;tat post mutation comme arguments :</p>
 
+<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span>mutation<span class="token punctuation">,</span> state<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>mutation<span class="token punctuation">.</span>type<span class="token punctuation">)</span>
 
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>mutation<span class="token punctuation">.</span>payload<span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>Utilis&#xE9; plus commun&#xE9;ment dans les plugins. <a href="plugins.html">Plus de d&#xE9;tails</a></p>
 
+</li>
 
+<li><p><strong><code>subscribeAction(handler: Function)</code></strong></p>
 
+<blockquote>
 
+<p>Nouveau dans la 2.5.0+</p>
 
+</blockquote>
 
+<p>S&apos;abonner au actions du store. Le <code>handler</code> est appel&#xE9; pour chaque action propag&#xE9;e et re&#xE7;oit chaque description d&apos;action et l&apos;&#xE9;tat du store courant en arguments :</p>
 
+<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span><span class="token function">subscribeAction</span><span class="token punctuation">(</span><span class="token punctuation">(</span>action<span class="token punctuation">,</span> state<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>action<span class="token punctuation">.</span>type<span class="token punctuation">)</span>
 
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>action<span class="token punctuation">.</span>payload<span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>Souvent utiliser dans les plugins. <a href="plugins.html">Pour plus de d&#xE9;tails</a></p>
 
+</li>
 
+<li><p><strong><code>registerModule(path: string | Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span><span class="token punctuation">&gt;</span></span>, module: Module, options?: Object)</code></strong></p>
 
+<p>Enregistrer un module dynamique. <a href="modules.html#enregistrement-dynamique-de-module">Plus de d&#xE9;tails</a></p>
 
+<p><code>options</code> peut avoir <code>preserveState: true</code> qui lui permet de pr&#xE9;server l&apos;&#xE9;tat pr&#xE9;c&#xE9;dent. Utile pour du rendu c&#xF4;t&#xE9; serveur.</p>
 
+</li>
 
+<li><p><strong><code>unregisterModule(path: string | Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span><span class="token punctuation">&gt;</span></span>)</code></strong></p>
 
+<p>Supprimer un module dynamique. <a href="modules.html#enregistrement-dynamique-de-module">Plus de d&#xE9;tails</a></p>
 
+</li>
 
+<li><p><strong><code>hotUpdate(newOptions: Object)</code></strong></p>
 
+<p>Remplacement &#xE0; la vol&#xE9;e des nouvelles actions et mutations. <a href="hot-reload.html">Plus de d&#xE9;tails</a></p>
 
+</li>
 
+</ul>
 
+<h3 id="fonctions-utilitaires-dattachement-au-composant">Fonctions utilitaires d&apos;attachement au composant</h3>
 
+<ul>
 
+<li><p><strong><code>mapState(namespace?: string, map: Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span><span class="token punctuation">&gt;</span></span> | Object): Object</code></strong></p>
 
+<p>Cr&#xE9;er des propri&#xE9;t&#xE9;s calcul&#xE9;es qui retournent le sous-arbre du store Vuex au composant. <a href="state.html#le-helper-mapstate">Plus de d&#xE9;tails</a></p>
 
+<p>Le premier argument peut &#xEA;tre de fa&#xE7;on optionnelle une chaine d&apos;espace de nom. <a href="modules.html#Fonctions-utilitaires-li&#xE9;es-avec-espace-de-nom">Plus de d&#xE9;tails</a></p>
 
+</li>
 
+<li><p><strong><code>mapGetters(namespace?: string, map: Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span><span class="token punctuation">&gt;</span></span> | Object): Object</code></strong></p>
 
+<p>Cr&#xE9;er des propri&#xE9;t&#xE9;s calcul&#xE9;es qui retournent la valeur calcul&#xE9;e d&apos;un accesseur. <a href="getters.html#la-function-utilitaire-mapgetters">Plus de d&#xE9;tails</a></p>
 
+<p>Le premier argument peut &#xEA;tre de fa&#xE7;on optionnelle une chaine d&apos;espace de nom. <a href="modules.html#Fonctions-utilitaires-li&#xE9;es-avec-espace-de-nom">Plus de d&#xE9;tails</a></p>
 
+</li>
 
+<li><p><strong><code>mapActions(namespace?: string, map: Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span><span class="token punctuation">&gt;</span></span> | Object): Object</code></strong></p>
 
+<p>Cr&#xE9;er des m&#xE9;thodes de composant qui propagent une action. <a href="actions.html#propager-des-actions-dans-les-composants">Plus de d&#xE9;tails</a></p>
 
+<p>Le premier argument peut &#xEA;tre de fa&#xE7;on optionnelle une chaine d&apos;espace de nom. <a href="modules.html#Fonctions-utilitaires-li&#xE9;es-avec-espace-de-nom">Plus de d&#xE9;tails</a></p>
 
+</li>
 
+<li><p><strong><code>mapMutations(namespace?: string, map: Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span><span class="token punctuation">&gt;</span></span> | Object): Object</code></strong></p>
 
+<p>Cr&#xE9;er des m&#xE9;thodes de composant qui actent une mutation. <a href="mutations.html#acter-des-mutations-dans-les-composants">Plus de d&#xE9;tails</a></p>
 
+<p>Le premier argument peut &#xEA;tre de fa&#xE7;on optionnelle une chaine d&apos;espace de nom. <a href="modules.html#Fonctions-utilitaires-li&#xE9;es-avec-espace-de-nom">Plus de d&#xE9;tails</a></p>
 
+</li>
 
+<li><p><strong><code>createNamespacedHelpers(namespace: string): Object</code></strong></p>
 
+<p>Cr&#xE9;er des fonctions utilitaires li&#xE9;es avec espace de nom. L&apos;objet retourn&#xE9; contient <code>mapState</code>, <code>mapGetters</code>, <code>mapActions</code> et <code>mapMutations</code> qui sont li&#xE9;es &#xE0; l&apos;espace de nom fourni. <a href="modules.html#fonctions-utilitaires-li&#xE9;es-avec-espace-de-nom">Plus de d&#xE9;tails</a></p>
 
+</li>
 
+</ul>
 
+
 
+                                
+                                </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="hot-reload.html" class="navigation navigation-prev navigation-unique" aria-label="Previous page: Rechargement à chaud">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Documentation de l'API","level":"1.13","depth":1,"previous":{"title":"Rechargement à chaud","level":"1.12","depth":1,"path":"hot-reload.md","ref":"hot-reload.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":"Éditer cette 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":"fr","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"api.md","mtime":"2018-04-20T00:44:03.855Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"fr"}});
 
+        });
 
+    </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>
 
+

+ 490 - 0
fr/core-concepts.html
View File 

@@ -0,0 +1,490 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="fr" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Concepts de base · 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="state.html" />
 
+    
+    
+    <link rel="prev" href="getting-started.html" />
 
+    
+
 
+    </head>
 
+    <body>
 
+        
+<div class="book">
 
+    <div class="book-summary">
 
+        
+            
+<div id="book-search-input" role="search">
 
+    <input type="text" placeholder="Tapez pour rechercher" />
 
+</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">
 
+            
+                    
+                    Notes de version
 
+            
+                </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">
 
+            
+                    
+                    Vuex, qu'est-ce que c'est ?
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.5" data-path="getting-started.html">
 
+            
+                <a href="getting-started.html">
 
+            
+                    
+                    Pour commencer
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter active" data-level="1.6" data-path="core-concepts.html">
 
+            
+                <a href="core-concepts.html">
 
+            
+                    
+                    Concepts de base
 
+            
+                </a>
 
+            
+
 
+            
+            <ul class="articles">
 
+                
+    
+        <li class="chapter " data-level="1.6.1" data-path="state.html">
 
+            
+                <a href="state.html">
 
+            
+                    
+                    État
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6.2" data-path="getters.html">
 
+            
+                <a href="getters.html">
 
+            
+                    
+                    Accesseurs
 
+            
+                </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">
 
+            
+                    
+                    Structure d'une application
 
+            
+                </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">
 
+            
+                    
+                    Mode strict
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.10" data-path="forms.html">
 
+            
+                <a href="forms.html">
 
+            
+                    
+                    Gestion des formulaires
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.11" data-path="testing.html">
 
+            
+                <a href="testing.html">
 
+            
+                    
+                    Tests
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.12" data-path="hot-reload.html">
 
+            
+                <a href="hot-reload.html">
 
+            
+                    
+                    Rechargement à chaud
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.13" data-path="api.html">
 
+            
+                <a href="api.html">
 
+            
+                    
+                    Documentation de l'API
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+
 
+    
+
 
+    <li class="divider"></li>
 
+
 
+    <li>
 
+        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
 
+            Publié avec 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="." >Concepts de base</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="concepts-de-base">Concepts de base</h1>
 
+<p>Nous allons apprendre les concepts de base dans Vuex avec ce chapitre. Ces concepts sont</p>
 
+<ul>
 
+<li><a href="state.html">&#xC9;tat</a></li>
 
+<li><a href="getters.html">Accesseurs</a></li>
 
+<li><a href="mutations.html">Mutations</a></li>
 
+<li><a href="actions.html">Actions</a></li>
 
+<li><a href="modules.html">Modules</a></li>
 
+</ul>
 
+<p>Une compr&#xE9;hension profonde de ces concepts est essentielle pour l&apos;utilisation de Vuex.</p>
 
+<p>C&apos;est parti.</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="getting-started.html" class="navigation navigation-prev " aria-label="Previous page: Pour commencer">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="state.html" class="navigation navigation-next " aria-label="Next page: État">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Concepts de base","level":"1.6","depth":1,"next":{"title":"État","level":"1.6.1","depth":2,"path":"state.md","ref":"state.md","articles":[]},"previous":{"title":"Pour commencer","level":"1.5","depth":1,"path":"getting-started.md","ref":"getting-started.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":"Éditer cette 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":"fr","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"core-concepts.md","mtime":"2018-04-20T00:44:03.856Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"fr"}});
 
+        });
 
+    </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>
 
+

+ 523 - 0
fr/forms.html
View File 

@@ -0,0 +1,523 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="fr" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Gestion des formulaires · 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="testing.html" />
 
+    
+    
+    <link rel="prev" href="strict.html" />
 
+    
+
 
+    </head>
 
+    <body>
 
+        
+<div class="book">
 
+    <div class="book-summary">
 
+        
+            
+<div id="book-search-input" role="search">
 
+    <input type="text" placeholder="Tapez pour rechercher" />
 
+</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">
 
+            
+                    
+                    Notes de version
 
+            
+                </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">
 
+            
+                    
+                    Vuex, qu'est-ce que c'est ?
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.5" data-path="getting-started.html">
 
+            
+                <a href="getting-started.html">
 
+            
+                    
+                    Pour commencer
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6" data-path="core-concepts.html">
 
+            
+                <a href="core-concepts.html">
 
+            
+                    
+                    Concepts de base
 
+            
+                </a>
 
+            
+
 
+            
+            <ul class="articles">
 
+                
+    
+        <li class="chapter " data-level="1.6.1" data-path="state.html">
 
+            
+                <a href="state.html">
 
+            
+                    
+                    État
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6.2" data-path="getters.html">
 
+            
+                <a href="getters.html">
 
+            
+                    
+                    Accesseurs
 
+            
+                </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">
 
+            
+                    
+                    Structure d'une application
 
+            
+                </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">
 
+            
+                    
+                    Mode strict
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter active" data-level="1.10" data-path="forms.html">
 
+            
+                <a href="forms.html">
 
+            
+                    
+                    Gestion des formulaires
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.11" data-path="testing.html">
 
+            
+                <a href="testing.html">
 
+            
+                    
+                    Tests
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.12" data-path="hot-reload.html">
 
+            
+                <a href="hot-reload.html">
 
+            
+                    
+                    Rechargement à chaud
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.13" data-path="api.html">
 
+            
+                <a href="api.html">
 
+            
+                    
+                    Documentation de l'API
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+
 
+    
+
 
+    <li class="divider"></li>
 
+
 
+    <li>
 
+        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
 
+            Publié avec 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="." >Gestion des formulaires</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="gestion-des-formulaires">Gestion des formulaires</h1>
 
+<p>Lorsque l&apos;on utilise Vuex en mode strict, il peut &#xEA;tre compliqu&#xE9; d&apos;utiliser <code>v-model</code> sur une partie de l&apos;&#xE9;tat qui appartient &#xE0; Vuex :</p>
 
+<pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>obj.message<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
 
+</code></pre>
 
+<p>Supposons que <code>obj</code> est une propri&#xE9;t&#xE9; calcul&#xE9;e qui retourne un objet depuis le store, le <code>v-model</code> tentera de muter directement <code>obj.message</code> lorsque l&apos;utilisateur saisit du texte dans le champ. En mode strict, cela produira une erreur car la mutation n&apos;est pas effectu&#xE9;e dans un gestionnaire de mutation Vuex explicite.</p>
 
+<p>La &#xAB; m&#xE9;thode Vuex &#xBB; pour g&#xE9;rer &#xE7;a est de lier la valeur de l&apos;<code>input</code> et d&apos;appeler une action sur l&apos;&#xE9;v&#xE8;nement <code>input</code> ou <code>change</code> :</p>
 
+<pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@input</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>updateMessage<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// ...</span>
 
+computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+    message<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> state<span class="token punctuation">.</span>obj<span class="token punctuation">.</span>message
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  updateMessage <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;updateMessage&apos;</span><span class="token punctuation">,</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>Et voici le gestionnaire de mutation :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// ...</span>
 
+mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  updateMessage <span class="token punctuation">(</span>state<span class="token punctuation">,</span> message<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    state<span class="token punctuation">.</span>obj<span class="token punctuation">.</span>message <span class="token operator">=</span> message
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<h3 id="propri&#xE9;t&#xE9;-calcul&#xE9;e-bidirectionnelle">Propri&#xE9;t&#xE9; calcul&#xE9;e bidirectionnelle</h3>
 
+<p>Admettons tout de m&#xEA;me que l&apos;exemple ci-dessus est plus verbeux que le <code>v-model</code> coupl&#xE9; &#xE0; l&apos;&#xE9;tat local (tout en perdant quelques fonctionnalit&#xE9;s pratiques de <code>v-model</code> au passage). Une approche alternative consiste &#xE0; utiliser une propri&#xE9;t&#xE9; calcul&#xE9;e bidirectionnelle avec un mutateur :</p>
 
+<pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// ...</span>
 
+computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  message<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">get</span> <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>obj<span class="token punctuation">.</span>message
 
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+    <span class="token keyword">set</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+      <span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;updateMessage&apos;</span><span class="token punctuation">,</span> value<span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+
 
+                                
+                                </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="strict.html" class="navigation navigation-prev " aria-label="Previous page: Mode strict">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="testing.html" class="navigation navigation-next " aria-label="Next page: Tests">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Gestion des formulaires","level":"1.10","depth":1,"next":{"title":"Tests","level":"1.11","depth":1,"path":"testing.md","ref":"testing.md","articles":[]},"previous":{"title":"Mode strict","level":"1.9","depth":1,"path":"strict.md","ref":"strict.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":"Éditer cette 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":"fr","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"forms.md","mtime":"2018-04-20T00:44:03.856Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"fr"}});
 
+        });
 
+    </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>
 
+

+ 556 - 0
fr/getters.html
View File 

@@ -0,0 +1,556 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="fr" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Accesseurs · 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="mutations.html" />
 
+    
+    
+    <link rel="prev" href="state.html" />
 
+    
+
 
+    </head>
 
+    <body>
 
+        
+<div class="book">
 
+    <div class="book-summary">
 
+        
+            
+<div id="book-search-input" role="search">
 
+    <input type="text" placeholder="Tapez pour rechercher" />
 
+</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">
 
+            
+                    
+                    Notes de version
 
+            
+                </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">
 
+            
+                    
+                    Vuex, qu'est-ce que c'est ?
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.5" data-path="getting-started.html">
 
+            
+                <a href="getting-started.html">
 
+            
+                    
+                    Pour commencer
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6" data-path="core-concepts.html">
 
+            
+                <a href="core-concepts.html">
 
+            
+                    
+                    Concepts de base
 
+            
+                </a>
 
+            
+
 
+            
+            <ul class="articles">
 
+                
+    
+        <li class="chapter " data-level="1.6.1" data-path="state.html">
 
+            
+                <a href="state.html">
 
+            
+                    
+                    État
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter active" data-level="1.6.2" data-path="getters.html">
 
+            
+                <a href="getters.html">
 
+            
+                    
+                    Accesseurs
 
+            
+                </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">
 
+            
+                    
+                    Structure d'une application
 
+            
+                </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">
 
+            
+                    
+                    Mode strict
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.10" data-path="forms.html">
 
+            
+                <a href="forms.html">
 
+            
+                    
+                    Gestion des formulaires
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.11" data-path="testing.html">
 
+            
+                <a href="testing.html">
 
+            
+                    
+                    Tests
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.12" data-path="hot-reload.html">
 
+            
+                <a href="hot-reload.html">
 
+            
+                    
+                    Rechargement à chaud
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.13" data-path="api.html">
 
+            
+                <a href="api.html">
 
+            
+                    
+                    Documentation de l'API
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+
 
+    
+
 
+    <li class="divider"></li>
 
+
 
+    <li>
 
+        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
 
+            Publié avec 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="." >Accesseurs</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="accesseurs">Accesseurs</h1>
 
+<p>Parfois nous avons besoin de calculer des valeurs bas&#xE9;es sur l&apos;&#xE9;tat du store, par exemple pour filtrer une liste d&apos;&#xE9;l&#xE9;ments et les compter :</p>
 
+<pre class="language-"><code class="lang-js">computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  doneTodosCount <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>todos<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>todo <span class="token operator">=</span><span class="token operator">&gt;</span> todo<span class="token punctuation">.</span>done<span class="token punctuation">)</span><span class="token punctuation">.</span>length
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>Si plus d&apos;un composant a besoin d&apos;utiliser cela, il nous faut ou bien dupliquer cette fonction, ou bien l&apos;extraire dans une fonction utilitaire s&#xE9;par&#xE9;e et l&apos;importer aux endroits n&#xE9;cessaires. Les deux id&#xE9;es sont loin d&apos;&#xEA;tre id&#xE9;ales.</p>
 
+<p>Vuex nous permet de d&#xE9;finir des accesseurs (&#xAB; getters &#xBB;) dans le store. Voyez-les comme les propri&#xE9;t&#xE9;s calcul&#xE9;es des stores. Comme pour les propri&#xE9;t&#xE9;s calcul&#xE9;es, le r&#xE9;sultat de l&apos;accesseur est mis en cache en se basant sur ses d&#xE9;pendances et il ne sera r&#xE9;&#xE9;valu&#xE9; que lorsque l&apos;une de ses d&#xE9;pendances aura chang&#xE9;e.</p>
 
+<p>Les accesseurs prennent l&apos;&#xE9;tat en premier argument :</p>
 
+<pre class="language-"><code class="lang-js"><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>
 
+    todos<span class="token punctuation">:</span> <span class="token punctuation">[</span>
 
+      <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">&apos;...&apos;</span><span class="token punctuation">,</span> done<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+      <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">&apos;...&apos;</span><span class="token punctuation">,</span> done<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span>
 
+    <span class="token punctuation">]</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    doneTodos<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+      <span class="token keyword">return</span> state<span class="token punctuation">.</span>todos<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>todo <span class="token operator">=</span><span class="token operator">&gt;</span> todo<span class="token punctuation">.</span>done<span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>Les accesseurs seront expos&#xE9;s sur l&apos;objet <code>store.getters</code> :</p>
 
+<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>doneTodos <span class="token comment" spellcheck="true">// -&gt; [{ id: 1, text: &apos;...&apos;, done: true }]</span>
 
+</code></pre>
 
+<p>Les accesseurs recevront &#xE9;galement les autres accesseurs en second argument :</p>
 
+<pre class="language-"><code class="lang-js">getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  doneTodosCount<span class="token punctuation">:</span> <span class="token punctuation">(</span>state<span class="token punctuation">,</span> getters<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">return</span> getters<span class="token punctuation">.</span>doneTodos<span class="token punctuation">.</span>length
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>doneTodosCount <span class="token comment" spellcheck="true">// -&gt; 1</span>
 
+</code></pre>
 
+<p>Nous pouvons maintenant facilement les utiliser dans n&apos;importe quel composant :</p>
 
+<pre class="language-"><code class="lang-js">computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  doneTodosCount <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>getters<span class="token punctuation">.</span>doneTodosCount
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>Vous pouvez aussi passer des arguments aux accesseurs en retournant une fonction. Cela est particuli&#xE8;rement utile quand vous souhaitez interroger un tableau dans le store :</p>
 
+<pre class="language-"><code class="lang-js">getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  getTodoById<span class="token punctuation">:</span> <span class="token punctuation">(</span>state<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span>id<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">return</span> state<span class="token punctuation">.</span>todos<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span>todo <span class="token operator">=</span><span class="token operator">&gt;</span> todo<span class="token punctuation">.</span>id <span class="token operator">===</span> id<span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span><span class="token function">getTodoById</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// -&gt; { id: 2, text: &apos;...&apos;, done: false }</span>
 
+</code></pre>
 
+<h3 id="la-fonction-utilitaire-mapgetters">La fonction utilitaire <code>mapGetters</code></h3>
 
+<p>La fonction utilitaire <code>mapGetters</code> attache simplement vos accesseurs du store aux propri&#xE9;t&#xE9;s calcul&#xE9;es locales :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> mapGetters <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 punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// rajouter les accesseurs dans `computed` avec l&apos;op&#xE9;rateur de d&#xE9;composition</span>
 
+    <span class="token operator">...</span><span class="token function">mapGetters</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
 
+      <span class="token string">&apos;doneTodosCount&apos;</span><span class="token punctuation">,</span>
 
+      <span class="token string">&apos;anotherGetter&apos;</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>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>Si vous voulez attacher un accesseur avec un nom diff&#xE9;rent, utilisez un objet :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token operator">...</span><span class="token function">mapGetters</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// attacher `this.doneCount` &#xE0; `store.getters.doneTodosCount`</span>
 
+  doneCount<span class="token punctuation">:</span> <span class="token string">&apos;doneTodosCount&apos;</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+
 
+                                
+                                </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="state.html" class="navigation navigation-prev " aria-label="Previous page: État">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="mutations.html" class="navigation navigation-next " aria-label="Next page: Mutations">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Accesseurs","level":"1.6.2","depth":2,"next":{"title":"Mutations","level":"1.6.3","depth":2,"path":"mutations.md","ref":"mutations.md","articles":[]},"previous":{"title":"État","level":"1.6.1","depth":2,"path":"state.md","ref":"state.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":"Éditer cette 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":"fr","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"getters.md","mtime":"2018-04-20T00:44:03.856Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"fr"}});
 
+        });
 
+    </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>
 
+

File diff suppressed because it is too large
+ 473 - 0
fr/getting-started.html


+ 518 - 0
fr/hot-reload.html
View File 

@@ -0,0 +1,518 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="fr" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Rechargement à chaud · 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="api.html" />
 
+    
+    
+    <link rel="prev" href="testing.html" />
 
+    
+
 
+    </head>
 
+    <body>
 
+        
+<div class="book">
 
+    <div class="book-summary">
 
+        
+            
+<div id="book-search-input" role="search">
 
+    <input type="text" placeholder="Tapez pour rechercher" />
 
+</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">
 
+            
+                    
+                    Notes de version
 
+            
+                </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">
 
+            
+                    
+                    Vuex, qu'est-ce que c'est ?
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.5" data-path="getting-started.html">
 
+            
+                <a href="getting-started.html">
 
+            
+                    
+                    Pour commencer
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6" data-path="core-concepts.html">
 
+            
+                <a href="core-concepts.html">
 
+            
+                    
+                    Concepts de base
 
+            
+                </a>
 
+            
+
 
+            
+            <ul class="articles">
 
+                
+    
+        <li class="chapter " data-level="1.6.1" data-path="state.html">
 
+            
+                <a href="state.html">
 
+            
+                    
+                    État
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6.2" data-path="getters.html">
 
+            
+                <a href="getters.html">
 
+            
+                    
+                    Accesseurs
 
+            
+                </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">
 
+            
+                    
+                    Structure d'une application
 
+            
+                </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">
 
+            
+                    
+                    Mode strict
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.10" data-path="forms.html">
 
+            
+                <a href="forms.html">
 
+            
+                    
+                    Gestion des formulaires
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.11" data-path="testing.html">
 
+            
+                <a href="testing.html">
 
+            
+                    
+                    Tests
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter active" data-level="1.12" data-path="hot-reload.html">
 
+            
+                <a href="hot-reload.html">
 
+            
+                    
+                    Rechargement à chaud
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.13" data-path="api.html">
 
+            
+                <a href="api.html">
 
+            
+                    
+                    Documentation de l'API
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+
 
+    
+
 
+    <li class="divider"></li>
 
+
 
+    <li>
 
+        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
 
+            Publié avec 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="." >Rechargement à chaud</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="rechargement-&#xE0;-chaud">Rechargement &#xE0; chaud</h1>
 
+<p>Vuex prend en charge le rechargement &#xE0; chaud des mutations, modules, actions et accesseurs durant le d&#xE9;veloppement, en utilisant l&apos;<a href="https://webpack.js.org/guides/hot-module-replacement/" target="_blank">API du module de remplacement &#xE0; chaud</a> de webpack. Vous pouvez &#xE9;galement utiliser Browserify avec le plugin <a href="https://github.com/AgentME/browserify-hmr/" target="_blank">browserify-hmr</a>.</p>
 
+<p>Pour les mutations et les modules, vous aurez besoin d&apos;utiliser la m&#xE9;thode d&apos;API <code>store.hotUpdate()</code> :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// store.js</span>
 
+<span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">&apos;vue&apos;</span>
 
+<span class="token keyword">import</span> Vuex <span class="token keyword">from</span> <span class="token string">&apos;vuex&apos;</span>
 
+<span class="token keyword">import</span> mutations <span class="token keyword">from</span> <span class="token string">&apos;./mutations&apos;</span>
 
+<span class="token keyword">import</span> moduleA <span class="token keyword">from</span> <span class="token string">&apos;./modules/a&apos;</span>
 
+
 
+Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Vuex<span class="token punctuation">)</span>
 
+
 
+<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</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>
 
+  mutations<span class="token punctuation">,</span>
 
+  modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    a<span class="token punctuation">:</span> moduleA
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+
 
+<span class="token keyword">if</span> <span class="token punctuation">(</span>module<span class="token punctuation">.</span>hot<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// accepter les actions et mutations en tant que module &#xE0; chaud</span>
 
+  module<span class="token punctuation">.</span>hot<span class="token punctuation">.</span><span class="token function">accept</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&apos;./mutations&apos;</span><span class="token punctuation">,</span> <span class="token string">&apos;./modules/a&apos;</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// requiert les modules &#xE0; jour</span>
 
+    <span class="token comment" spellcheck="true">// ajout de `.default` ici pour les sorties des modules babel 6</span>
 
+    <span class="token keyword">const</span> newMutations <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&apos;./mutations&apos;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword">default</span>
 
+    <span class="token keyword">const</span> newModuleA <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&apos;./modules/a&apos;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword">default</span>
 
+    <span class="token comment" spellcheck="true">// remplacer les nouvelles actions et mutations</span>
 
+    store<span class="token punctuation">.</span><span class="token function">hotUpdate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+      mutations<span class="token punctuation">:</span> newMutations<span class="token punctuation">,</span>
 
+      modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+        a<span class="token punctuation">:</span> newModuleA
 
+      <span class="token punctuation">}</span>
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>Jetez un &#x153;il &#xE0; <a href="https://github.com/vuejs/vuex/tree/dev/examples/counter-hot" target="_blank">l&apos;exemple counter-hot</a> pour jouer avec du rechargement &#xE0; chaud.</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="testing.html" class="navigation navigation-prev " aria-label="Previous page: Tests">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="api.html" class="navigation navigation-next " aria-label="Next page: Documentation de l'API">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Rechargement à chaud","level":"1.12","depth":1,"next":{"title":"Documentation de l'API","level":"1.13","depth":1,"path":"api.md","ref":"api.md","articles":[]},"previous":{"title":"Tests","level":"1.11","depth":1,"path":"testing.md","ref":"testing.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":"Éditer cette 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":"fr","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"hot-reload.md","mtime":"2018-04-20T00:44:03.857Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"fr"}});
 
+        });
 
+    </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>
 
+

BIN
fr/images/flow.png
View File


BIN
fr/images/vuex.png
View File


+ 492 - 0
fr/index.html
View File 

@@ -0,0 +1,492 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="fr" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Introduction · 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">
 
+
 
+    
+    
+
 
+    </head>
 
+    <body>
 
+        
+<div class="book">
 
+    <div class="book-summary">
 
+        
+            
+<div id="book-search-input" role="search">
 
+    <input type="text" placeholder="Tapez pour rechercher" />
 
+</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 active" 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">
 
+            
+                    
+                    Notes de version
 
+            
+                </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">
 
+            
+                    
+                    Vuex, qu'est-ce que c'est ?
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.5" data-path="getting-started.html">
 
+            
+                <a href="getting-started.html">
 
+            
+                    
+                    Pour commencer
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6" data-path="core-concepts.html">
 
+            
+                <a href="core-concepts.html">
 
+            
+                    
+                    Concepts de base
 
+            
+                </a>
 
+            
+
 
+            
+            <ul class="articles">
 
+                
+    
+        <li class="chapter " data-level="1.6.1" data-path="state.html">
 
+            
+                <a href="state.html">
 
+            
+                    
+                    État
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6.2" data-path="getters.html">
 
+            
+                <a href="getters.html">
 
+            
+                    
+                    Accesseurs
 
+            
+                </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">
 
+            
+                    
+                    Structure d'une application
 
+            
+                </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">
 
+            
+                    
+                    Mode strict
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.10" data-path="forms.html">
 
+            
+                <a href="forms.html">
 
+            
+                    
+                    Gestion des formulaires
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.11" data-path="testing.html">
 
+            
+                <a href="testing.html">
 
+            
+                    
+                    Tests
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.12" data-path="hot-reload.html">
 
+            
+                <a href="hot-reload.html">
 
+            
+                    
+                    Rechargement à chaud
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.13" data-path="api.html">
 
+            
+                <a href="api.html">
 
+            
+                    
+                    Documentation de l'API
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+
 
+    
+
 
+    <li class="divider"></li>
 
+
 
+    <li>
 
+        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
 
+            Publié avec 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="." >Introduction</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="vuex">Vuex</h1>
 
+<blockquote>
 
+<p>Note aux utilisateurs de TypeScript : vuex@3.0+ n&#xE9;cessite vue@2.5+, et inversement.</p>
 
+</blockquote>
 
+<ul>
 
+<li><a href="https://github.com/vuejs/vuex/releases" target="_blank">Notes de version</a></li>
 
+<li><a href="installation.html">Installation</a></li>
 
+<li><a href="intro.html">Vuex, qu&apos;est-ce que c&apos;est ?</a></li>
 
+<li><a href="getting-started.html">Pour commencer</a></li>
 
+<li><a href="core-concepts.html">Concepts de base</a><ul>
 
+<li><a href="state.html">&#xC9;tat</a></li>
 
+<li><a href="getters.html">Accesseurs</a></li>
 
+<li><a href="mutations.html">Mutations</a></li>
 
+<li><a href="actions.html">Actions</a></li>
 
+<li><a href="modules.html">Modules</a></li>
 
+</ul>
 
+</li>
 
+<li><a href="structure.html">Structure d&apos;une application</a></li>
 
+<li><a href="plugins.html">Plugins</a></li>
 
+<li><a href="strict.html">Mode strict</a></li>
 
+<li><a href="forms.html">Gestion des formulaires</a></li>
 
+<li><a href="testing.html">Tests</a></li>
 
+<li><a href="hot-reload.html">Rechargement &#xE0; chaud</a></li>
 
+<li><a href="api.html">Documentation de l&apos;API</a></li>
 
+</ul>
 
+
 
+                                
+                                </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>
 
+
 
+            
+                
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Introduction","level":"1.1","depth":1,"next":{"title":"Notes de version","level":"1.2","depth":1,"url":"https://github.com/vuejs/vuex/releases","ref":"https://github.com/vuejs/vuex/releases","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":"Éditer cette 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":"fr","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"README.md","mtime":"2018-04-20T00:44:03.854Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"fr"}});
 
+        });
 
+    </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>
 
+

+ 503 - 0
fr/installation.html
View File 

@@ -0,0 +1,503 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="fr" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Installation · 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="intro.html" />
 
+    
+    
+
 
+    </head>
 
+    <body>
 
+        
+<div class="book">
 
+    <div class="book-summary">
 
+        
+            
+<div id="book-search-input" role="search">
 
+    <input type="text" placeholder="Tapez pour rechercher" />
 
+</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">
 
+            
+                    
+                    Notes de version
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter active" 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">
 
+            
+                    
+                    Vuex, qu'est-ce que c'est ?
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.5" data-path="getting-started.html">
 
+            
+                <a href="getting-started.html">
 
+            
+                    
+                    Pour commencer
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6" data-path="core-concepts.html">
 
+            
+                <a href="core-concepts.html">
 
+            
+                    
+                    Concepts de base
 
+            
+                </a>
 
+            
+
 
+            
+            <ul class="articles">
 
+                
+    
+        <li class="chapter " data-level="1.6.1" data-path="state.html">
 
+            
+                <a href="state.html">
 
+            
+                    
+                    État
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6.2" data-path="getters.html">
 
+            
+                <a href="getters.html">
 
+            
+                    
+                    Accesseurs
 
+            
+                </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">
 
+            
+                    
+                    Structure d'une application
 
+            
+                </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">
 
+            
+                    
+                    Mode strict
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.10" data-path="forms.html">
 
+            
+                <a href="forms.html">
 
+            
+                    
+                    Gestion des formulaires
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.11" data-path="testing.html">
 
+            
+                <a href="testing.html">
 
+            
+                    
+                    Tests
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.12" data-path="hot-reload.html">
 
+            
+                <a href="hot-reload.html">
 
+            
+                    
+                    Rechargement à chaud
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.13" data-path="api.html">
 
+            
+                <a href="api.html">
 
+            
+                    
+                    Documentation de l'API
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+
 
+    
+
 
+    <li class="divider"></li>
 
+
 
+    <li>
 
+        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
 
+            Publié avec 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="." >Installation</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="installation">Installation</h1>
 
+<h3 id="t&#xE9;l&#xE9;chargement-direct--cdn">T&#xE9;l&#xE9;chargement direct / CDN</h3>
 
+<p><a href="https://unpkg.com/vuex" target="_blank">https://unpkg.com/vuex</a></p>
 
+<!--email_off-->
 
+<p><a href="https://unpkg.com" target="_blank">Unpkg.com</a> fournit des liens CDN bas&#xE9;s sur npm. Le lien ci-dessus pointera toujours vers la derni&#xE8;re release sur npm. Vous pouvez aussi utiliser un tag ou une version sp&#xE9;cifique via un URL comme <code>https://unpkg.com/vuex@2.0.0</code>.
 
+<!--/email_off--></p>
 
+<p>Incluez <code>vuex</code> apr&#xE8;s Vue et l&apos;installation sera automatique :</p>
 
+<pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>/path/to/vue.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
 
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>/path/to/vuex.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
 
+</code></pre>
 
+<h3 id="npm">npm</h3>
 
+<pre class="language-"><code class="lang-bash"><span class="token function">npm</span> <span class="token function">install</span> vuex --save
 
+</code></pre>
 
+<h3 id="yarn">Yarn</h3>
 
+<pre class="language-"><code class="lang-bash">yarn add vuex
 
+</code></pre>
 
+<p>Lorsqu&apos;il est utilis&#xE9; avec un syst&#xE8;me de module, vous devez explicitement installer Vuex via <code>Vue.use()</code>:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">&apos;vue&apos;</span>
 
+<span class="token keyword">import</span> Vuex <span class="token keyword">from</span> <span class="token string">&apos;vuex&apos;</span>
 
+
 
+Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Vuex<span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>Vous n&apos;avez pas besoin de faire cela lors de l&apos;utilisation des balises de script globales (<code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span></code>).</p>
 
+<h3 id="build-de-d&#xE9;veloppement">Build de d&#xE9;veloppement</h3>
 
+<p>Vous aurez besoin de cloner directement vuex depuis GitHub et le compiler vous-m&#xEA;me si vous souhaitez utiliser le dernier build de d&#xE9;veloppement.</p>
 
+<pre class="language-"><code class="lang-bash"><span class="token function">git</span> clone https://github.com/vuejs/vuex.git node_modules/vuex
 
+<span class="token function">cd</span> node_modules/vuex
 
+<span class="token function">npm</span> <span class="token function">install</span>
 
+<span class="token function">npm</span> run build
 
+</code></pre>
 
+
 
+                                
+                                </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-next navigation-unique" aria-label="Next page: Vuex, qu'est-ce que c'est ?">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Installation","level":"1.3","depth":1,"next":{"title":"Vuex, qu'est-ce que c'est ?","level":"1.4","depth":1,"path":"intro.md","ref":"intro.md","articles":[]},"previous":{"title":"Notes de version","level":"1.2","depth":1,"url":"https://github.com/vuejs/vuex/releases","ref":"https://github.com/vuejs/vuex/releases","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":"Éditer cette 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":"fr","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"installation.md","mtime":"2018-04-20T00:44:03.858Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"fr"}});
 
+        });
 
+    </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>
 
+

+ 529 - 0
fr/intro.html
View File 

@@ -0,0 +1,529 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="fr" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Vuex, qu'est-ce que c'est ? · 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="getting-started.html" />
 
+    
+    
+    <link rel="prev" href="installation.html" />
 
+    
+
 
+    </head>
 
+    <body>
 
+        
+<div class="book">
 
+    <div class="book-summary">
 
+        
+            
+<div id="book-search-input" role="search">
 
+    <input type="text" placeholder="Tapez pour rechercher" />
 
+</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">
 
+            
+                    
+                    Notes de version
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.3" data-path="installation.html">
 
+            
+                <a href="installation.html">
 
+            
+                    
+                    Installation
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter active" data-level="1.4" data-path="intro.html">
 
+            
+                <a href="intro.html">
 
+            
+                    
+                    Vuex, qu'est-ce que c'est ?
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.5" data-path="getting-started.html">
 
+            
+                <a href="getting-started.html">
 
+            
+                    
+                    Pour commencer
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6" data-path="core-concepts.html">
 
+            
+                <a href="core-concepts.html">
 
+            
+                    
+                    Concepts de base
 
+            
+                </a>
 
+            
+
 
+            
+            <ul class="articles">
 
+                
+    
+        <li class="chapter " data-level="1.6.1" data-path="state.html">
 
+            
+                <a href="state.html">
 
+            
+                    
+                    État
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6.2" data-path="getters.html">
 
+            
+                <a href="getters.html">
 
+            
+                    
+                    Accesseurs
 
+            
+                </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">
 
+            
+                    
+                    Structure d'une application
 
+            
+                </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">
 
+            
+                    
+                    Mode strict
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.10" data-path="forms.html">
 
+            
+                <a href="forms.html">
 
+            
+                    
+                    Gestion des formulaires
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.11" data-path="testing.html">
 
+            
+                <a href="testing.html">
 
+            
+                    
+                    Tests
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.12" data-path="hot-reload.html">
 
+            
+                <a href="hot-reload.html">
 
+            
+                    
+                    Rechargement à chaud
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.13" data-path="api.html">
 
+            
+                <a href="api.html">
 
+            
+                    
+                    Documentation de l'API
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+
 
+    
+
 
+    <li class="divider"></li>
 
+
 
+    <li>
 
+        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
 
+            Publié avec 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="." >Vuex, qu'est-ce que c'est ?</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="vuex-quest-ce-que-cest-">Vuex, qu&apos;est-ce que c&apos;est ?</h1>
 
+<p>Vuex est un <strong><em>gestionnaire d&apos;&#xE9;tat (&#xAB; state management pattern &#xBB;)</em> et une biblioth&#xE8;que</strong> pour des applications Vue.js. Il sert de zone de stockage de donn&#xE9;es centralis&#xE9;e pour tous les composants dans une application, avec des r&#xE8;gles pour s&apos;assurer que l&apos;&#xE9;tat ne puisse subir de mutations que d&apos;une mani&#xE8;re pr&#xE9;visible. Il s&apos;int&#xE8;gre &#xE9;galement avec <a href="https://github.com/vuejs/vue-devtools" target="_blank">l&apos;extension officielle</a> de Vue afin de fournir des fonctionnalit&#xE9;s avanc&#xE9;es comme de la visualisation d&apos;&#xE9;tat dans le temps et des exports et imports d&#x2019;instantan&#xE9;s (&#xAB; snapshot &#xBB;) d&apos;&#xE9;tat.</p>
 
+<h3 id="un-&#xAB;-gestionnaire-d&#xE9;tat-&#xBB;-quest-ce-que-cest-">Un &#xAB; gestionnaire d&apos;&#xE9;tat &#xBB;, qu&apos;est-ce que c&apos;est ?</h3>
 
+<p>Commen&#xE7;ons par une simple application de comptage avec Vue :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// &#xE9;tat</span>
 
+  data <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">return</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><span class="token punctuation">,</span>
 
+  <span class="token comment" spellcheck="true">// vue</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>
 
+  <span class="token comment" spellcheck="true">// actions</span>
 
+  methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    increment <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+      <span class="token keyword">this</span><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>C&apos;est une application autosuffisante avec les parties suivantes :</p>
 
+<ul>
 
+<li>L&apos;<strong>&#xE9;tat</strong>, qui est la source de v&#xE9;rit&#xE9; qui pilote votre application,</li>
 
+<li>La <strong>vue</strong>, qui est une r&#xE9;flexion d&#xE9;clarative de l&apos;<strong>&#xE9;tat</strong>,</li>
 
+<li>Les <strong>actions</strong>, qui sont les fa&#xE7;ons possibles pour l&apos;&#xE9;tat de changer en r&#xE9;action aux actions utilisateurs depuis la <strong>vue</strong>.</li>
 
+</ul>
 
+<p>Voici une repr&#xE9;sentation extr&#xEA;mement simple du concept de &#xAB; flux de donn&#xE9;e unidirectionnel &#xBB; :</p>
 
+<p style="text-align: center; margin: 2em">
 
+  <img style="width:100%;max-width:450px;" src="images/flow.png">
 
+</p>
 
+
 
+<p>Cependant, la simplicit&#xE9; s&apos;&#xE9;vapore rapidement lorsque nous avons <strong>de multiples composants qui partagent un m&#xEA;me &#xE9;tat global</strong> :</p>
 
+<ul>
 
+<li>Plusieurs vues peuvent d&#xE9;pendre de la m&#xEA;me partie de l&apos;&#xE9;tat global.</li>
 
+<li>Des actions dans diff&#xE9;rentes vues peuvent avoir besoin de muter la m&#xEA;me partie de l&apos;&#xE9;tat global.</li>
 
+</ul>
 
+<p>Pour le premier probl&#xE8;me, passer des props peut &#xEA;tre fastidieux pour les composants profond&#xE9;ment imbriqu&#xE9;s, et &#xE7;a ne fonctionne tout simplement pas pour les composants d&apos;un m&#xEA;me parent. Pour le deuxi&#xE8;me probl&#xE8;me, on se retrouve souvent &#xE0; se rabattre sur des solutions telles qu&apos;acc&#xE9;der aux r&#xE9;f&#xE9;rences d&apos;instance du parent/enfant direct ou essayer de muter et synchroniser de multiples copies de l&apos;&#xE9;tat via des &#xE9;v&#xE8;nements. Ces deux mod&#xE8;les sont fragiles et posent rapidement des probl&#xE8;mes de maintenabilit&#xE9; du code.</p>
 
+<p>Alors pourquoi ne pas extraire l&apos;&#xE9;tat global partag&#xE9; des composants, et le g&#xE9;rer dans un singleton global ? De cette mani&#xE8;re, notre arbre de composant devient une grosse &#xAB; vue &#xBB;, et n&apos;importe quel composant peut acc&#xE9;der &#xE0; l&apos;&#xE9;tat global ou d&#xE9;clencher des actions, peu importe o&#xF9; il se trouve dans l&apos;arbre !</p>
 
+<p>De plus, en d&#xE9;finissant et en s&#xE9;parant les concepts impliqu&#xE9;s dans la gestion de l&apos;&#xE9;tat global et en appliquant certaines r&#xE8;gles, on donne aussi une structure et une maintenabilit&#xE9; &#xE0; notre code.</p>
 
+<p>Voil&#xE0; l&apos;id&#xE9;e de base derri&#xE8;re Vuex, inspir&#xE9; par <a href="https://facebook.github.io/flux/docs/overview.html" target="_blank">Flux</a>, <a href="http://redux.js.org/" target="_blank">Redux</a> et <a href="https://guide.elm-lang.org/architecture/" target="_blank">l&apos;architecture Elm</a>. &#xC0; l&apos;inverse des autres mod&#xE8;les, Vuex est aussi une biblioth&#xE8;que d&apos;impl&#xE9;mentation con&#xE7;ue sp&#xE9;cialement pour Vue.js afin de b&#xE9;n&#xE9;ficier de son syst&#xE8;me de r&#xE9;activit&#xE9; granulaire pour des modifications efficaces.</p>
 
+<p><img src="images/vuex.png" alt="vuex"></p>
 
+<h3 id="quand-lutiliser-">Quand l&apos;utiliser ?</h3>
 
+<p>Bien que Vuex nous aide &#xE0; g&#xE9;rer un &#xE9;tat global partag&#xE9;, il apporte aussi le cout de nouveaux concepts et <em>abstraction de code</em> (&#xAB; boilerplate &#xBB;). C&apos;est un compromis entre la productivit&#xE9; &#xE0; court terme et &#xE0; long terme.</p>
 
+<p>Si vous n&apos;avez jamais cr&#xE9;&#xE9; une <em>application monopage</em> &#xE0; grande &#xE9;chelle et que vous sautez directement dans Vuex, cela peut paraitre verbeux et intimidant. C&apos;est parfaitement normal ; si votre application est simple, vous vous en sortirez sans doute tr&#xE8;s bien sans Vuex. Un simple <a href="https://fr.vuejs.org/v2/guide/components.html#Communication-non-parent-enfant" target="_blank">canal d&apos;&#xE9;v&#xE8;nement global</a> pourrait tr&#xE8;s bien vous suffire. Mais si vous devez cr&#xE9;er une application monopage &#xE0; moyenne ou grande &#xE9;chelle, il y a des chances que vous vous trouviez dans des situations qui vous feront vous interroger sur une meilleure gestion de l&apos;&#xE9;tat global, d&#xE9;tach&#xE9; de votre composant Vue, et Vuex sera naturellement la prochaine &#xE9;tape pour vous. Voici une bonne citation de Dan Abramov, l&apos;auteur de Redux :</p>
 
+<blockquote>
 
+<p>&#xAB; Les librairies Flux, c&apos;est comme les lunettes : vous saurez quand vous en aurez besoin. &#xBB;</p>
 
+</blockquote>
 
+
 
+                                
+                                </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="installation.html" class="navigation navigation-prev " aria-label="Previous page: Installation">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="getting-started.html" class="navigation navigation-next " aria-label="Next page: Pour commencer">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Vuex, qu'est-ce que c'est ?","level":"1.4","depth":1,"next":{"title":"Pour commencer","level":"1.5","depth":1,"path":"getting-started.md","ref":"getting-started.md","articles":[]},"previous":{"title":"Installation","level":"1.3","depth":1,"path":"installation.md","ref":"installation.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":"Éditer cette 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":"fr","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"intro.md","mtime":"2018-04-20T00:44:03.859Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"fr"}});
 
+        });
 
+    </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>
 
+

+ 721 - 0
fr/modules.html
View File 

@@ -0,0 +1,721 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="fr" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Modules · 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="structure.html" />
 
+    
+    
+    <link rel="prev" href="actions.html" />
 
+    
+
 
+    </head>
 
+    <body>
 
+        
+<div class="book">
 
+    <div class="book-summary">
 
+        
+            
+<div id="book-search-input" role="search">
 
+    <input type="text" placeholder="Tapez pour rechercher" />
 
+</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">
 
+            
+                    
+                    Notes de version
 
+            
+                </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">
 
+            
+                    
+                    Vuex, qu'est-ce que c'est ?
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.5" data-path="getting-started.html">
 
+            
+                <a href="getting-started.html">
 
+            
+                    
+                    Pour commencer
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6" data-path="core-concepts.html">
 
+            
+                <a href="core-concepts.html">
 
+            
+                    
+                    Concepts de base
 
+            
+                </a>
 
+            
+
 
+            
+            <ul class="articles">
 
+                
+    
+        <li class="chapter " data-level="1.6.1" data-path="state.html">
 
+            
+                <a href="state.html">
 
+            
+                    
+                    État
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6.2" data-path="getters.html">
 
+            
+                <a href="getters.html">
 
+            
+                    
+                    Accesseurs
 
+            
+                </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 active" 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">
 
+            
+                    
+                    Structure d'une application
 
+            
+                </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">
 
+            
+                    
+                    Mode strict
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.10" data-path="forms.html">
 
+            
+                <a href="forms.html">
 
+            
+                    
+                    Gestion des formulaires
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.11" data-path="testing.html">
 
+            
+                <a href="testing.html">
 
+            
+                    
+                    Tests
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.12" data-path="hot-reload.html">
 
+            
+                <a href="hot-reload.html">
 
+            
+                    
+                    Rechargement à chaud
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.13" data-path="api.html">
 
+            
+                <a href="api.html">
 
+            
+                    
+                    Documentation de l'API
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+
 
+    
+
 
+    <li class="divider"></li>
 
+
 
+    <li>
 
+        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
 
+            Publié avec 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="." >Modules</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="modules">Modules</h1>
 
+<p>Du fait de l&apos;utilisation d&apos;un arbre d&apos;&#xE9;tat unique, tout l&apos;&#xE9;tat de notre application est contenu dans un seul et m&#xEA;me gros objet. Cependant, au fur et &#xE0; mesure que notre application grandit, le store peut devenir tr&#xE8;s engorg&#xE9;.</p>
 
+<p>Pour y rem&#xE9;dier, Vuex nous permet de diviser notre store en <strong>modules</strong>. Chaque module peut contenir ses propres &#xE9;tats, mutations, actions, accesseurs. Il peut m&#xEA;me contenir ses propres modules internes.</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+  state<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  actions<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  getters<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+
 
+<span class="token keyword">const</span> moduleB <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+  state<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  actions<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</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>
 
+  modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    a<span class="token punctuation">:</span> moduleA<span class="token punctuation">,</span>
 
+    b<span class="token punctuation">:</span> moduleB
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+
 
+store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>a <span class="token comment" spellcheck="true">// -&gt; l&apos;&#xE9;tat du `moduleA`</span>
 
+store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>b <span class="token comment" spellcheck="true">// -&gt; l&apos;&#xE9;tat du `moduleB`</span>
 
+</code></pre>
 
+<h3 id="&#xE9;tat-local-dun-module">&#xC9;tat local d&apos;un module</h3>
 
+<p>Dans les mutations et accesseurs d&apos;un module, le premier argument re&#xE7;u sera <strong>l&apos;&#xE9;tat local du module</strong>.</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> moduleA <span class="token operator">=</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>
 
+      <span class="token comment" spellcheck="true">// `state` est l&apos;&#xE9;tat du module local</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>
 
+
 
+  getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    doubleCount <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 number">2</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>De fa&#xE7;on similaire, dans les actions du module, <code>context.state</code> exposera l&apos;&#xE9;tat local, et l&apos;&#xE9;tat racine sera disponible avec <code>context.rootState</code> :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    incrementIfOddOnRootSum <span class="token punctuation">(</span><span class="token punctuation">{</span> state<span class="token punctuation">,</span> commit<span class="token punctuation">,</span> rootState <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>count <span class="token operator">+</span> rootState<span class="token punctuation">.</span>count<span class="token punctuation">)</span> <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <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>
 
+      <span class="token punctuation">}</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>&#xC9;galement, dans les accesseurs du module, l&apos;&#xE9;tat racine sera expos&#xE9; en troisi&#xE8;me argument :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    sumWithRootCount <span class="token punctuation">(</span>state<span class="token punctuation">,</span> getters<span class="token punctuation">,</span> rootState<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> rootState<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="espace-de-nom">Espace de nom</h3>
 
+<p>Par d&#xE9;faut, les actions, mutations et accesseurs &#xE0; l&apos;int&#xE9;rieur d&apos;un module sont toujours enregistr&#xE9;s sous l&apos;<strong>espace de nom global</strong>. Cela permet &#xE0; de multiples modules d&apos;&#xEA;tre r&#xE9;actifs au m&#xEA;me type de mutation et d&apos;action.</p>
 
+<p>Si vous souhaitez que votre module soit autosuffisant et r&#xE9;utilisable, vous pouvez le ranger sous un espace de nom avec <code>namespaced: true</code>. Quand le module est enregistr&#xE9;, tous ses accesseurs, actions et mutations seront automatiquement bas&#xE9;s sur l&apos;espace de nom du module dans lesquels ils sont rang&#xE9;s. Par exemple :</p>
 
+<pre class="language-"><code class="lang-js"><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>
 
+  modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    account<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+      namespaced<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
 
+
 
+      <span class="token comment" spellcheck="true">// propri&#xE9;t&#xE9;s du module</span>
 
+      state<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// l&apos;&#xE9;tat du module est d&#xE9;j&#xE0; imbriqu&#xE9; et n&apos;est pas affect&#xE9; par l&apos;option `namespace`</span>
 
+      getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+        isAdmin <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">// -&gt; getters[&apos;account/isAdmin&apos;]</span>
 
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+      actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+        login <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">// -&gt; dispatch(&apos;account/login&apos;)</span>
 
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+      mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+        login <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">// -&gt; commit(&apos;account/login&apos;)</span>
 
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+
 
+      <span class="token comment" spellcheck="true">// modules imbriqu&#xE9;s</span>
 
+      modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+        <span class="token comment" spellcheck="true">// h&#xE9;rite de l&apos;espace de nom du module parent</span>
 
+        myPage<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+          state<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+          getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+            profile <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">// -&gt; getters[&apos;account/profile&apos;]</span>
 
+          <span class="token punctuation">}</span>
 
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+
 
+        <span class="token comment" spellcheck="true">// utilise un espace de nom imbriqu&#xE9;</span>
 
+        posts<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+          namespaced<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
 
+
 
+          state<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+          getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+            popular <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">// -&gt; getters[&apos;account/posts/popular&apos;]</span>
 
+          <span class="token punctuation">}</span>
 
+        <span class="token punctuation">}</span>
 
+      <span class="token punctuation">}</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>Les accesseurs et actions sous espace de nom re&#xE7;oivent des <code>getters</code>, <code>dispatch</code> et <code>commit</code> localis&#xE9;s. En d&apos;autres termes, vous pouvez utiliser les param&#xE8;tres de module sans &#xE9;crire de pr&#xE9;fixe dans ce m&#xEA;me module. Permuter entre un espace de nom ou non n&apos;affecte pas le code &#xE0; l&apos;int&#xE9;rieur du module.</p>
 
+<h4 id="acc&#xE9;der-aux-propri&#xE9;t&#xE9;s-globales-dans-les-modules-&#xE0;-espace-de-nom">Acc&#xE9;der aux propri&#xE9;t&#xE9;s globales dans les modules &#xE0; espace de nom</h4>
 
+<p>Si vous voulez utiliser des &#xE9;tats et accesseurs globaux, <code>rootState</code> et <code>rootGetters</code> sont pass&#xE9;s en 3&#x1D49; et 4&#x1D49; arguments des fonctions d&apos;acc&#xE8;s et sont &#xE9;galement expos&#xE9;s en tant que propri&#xE9;t&#xE9; de l&apos;objet <code>context</code> pass&#xE9; aux fonctions d&apos;action.</p>
 
+<p>Pour propager les actions ou les mutations act&#xE9;es dans l&apos;espace de nom global, passez <code>{ root: true }</code> en 3&#x1D49; argument &#xE0; <code>dispatch</code> et <code>commit</code>.</p>
 
+<pre class="language-"><code class="lang-js">modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  foo<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    namespaced<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
 
+
 
+    getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+      <span class="token comment" spellcheck="true">// Les `getters` sont localis&#xE9;s dans le module des accesseurs</span>
 
+      <span class="token comment" spellcheck="true">// vous pouvez utiliser `rootGetters` via le 4&#x1D49; argument des accesseurs</span>
 
+      someGetter <span class="token punctuation">(</span>state<span class="token punctuation">,</span> getters<span class="token punctuation">,</span> rootState<span class="token punctuation">,</span> rootGetters<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+        getters<span class="token punctuation">.</span>someOtherGetter <span class="token comment" spellcheck="true">// -&gt; &apos;foo/someOtherGetter&apos;</span>
 
+        rootGetters<span class="token punctuation">.</span>someOtherGetter <span class="token comment" spellcheck="true">// -&gt; &apos;someOtherGetter&apos;</span>
 
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+      someOtherGetter<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
 
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+
 
+    actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+      <span class="token comment" spellcheck="true">// les actions et mutations sont aussi localis&#xE9;es pour ce module</span>
 
+      <span class="token comment" spellcheck="true">// elles vont accepter une option `root` pour la racine des actions et mutations.</span>
 
+      someAction <span class="token punctuation">(</span><span class="token punctuation">{</span> dispatch<span class="token punctuation">,</span> commit<span class="token punctuation">,</span> getters<span class="token punctuation">,</span> rootGetters <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+        getters<span class="token punctuation">.</span>someGetter <span class="token comment" spellcheck="true">// -&gt; &apos;foo/someGetter&apos;</span>
 
+        rootGetters<span class="token punctuation">.</span>someGetter <span class="token comment" spellcheck="true">// -&gt; &apos;someGetter&apos;</span>
 
+
 
+        <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;someOtherAction&apos;</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// -&gt; &apos;foo/someOtherAction&apos;</span>
 
+        <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;someOtherAction&apos;</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> root<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// -&gt; &apos;someOtherAction&apos;</span>
 
+
 
+        <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;someMutation&apos;</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// -&gt; &apos;foo/someMutation&apos;</span>
 
+        <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;someMutation&apos;</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> root<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// -&gt; &apos;someMutation&apos;</span>
 
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+      someOtherAction <span class="token punctuation">(</span>ctx<span class="token punctuation">,</span> payload<span class="token punctuation">)</span> <span class="token punctuation">{</span> <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>
 
+<h4 id="fonctions-utilitaires-li&#xE9;es-avec-espace-de-nom">Fonctions utilitaires li&#xE9;es avec espace de nom</h4>
 
+<p>Quand nous lions un module sous espace de nom &#xE0; un composant avec les fonctions utilitaires <code>mapState</code>, <code>mapGetters</code>, <code>mapActions</code> and <code>mapMutations</code>, cela peut &#xEA;tre l&#xE9;g&#xE8;rement verbeux :</p>
 
+<pre class="language-"><code class="lang-js">computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+    a<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> state<span class="token punctuation">.</span>some<span class="token punctuation">.</span>nested<span class="token punctuation">.</span>module<span class="token punctuation">.</span>a<span class="token punctuation">,</span>
 
+    b<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> state<span class="token punctuation">.</span>some<span class="token punctuation">.</span>nested<span class="token punctuation">.</span>module<span class="token punctuation">.</span>b
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
 
+    <span class="token string">&apos;some/nested/module/foo&apos;</span><span class="token punctuation">,</span>
 
+    <span class="token string">&apos;some/nested/module/bar&apos;</span>
 
+  <span class="token punctuation">]</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>Dans ces cas-l&#xE0;, vous pouvez passer une chaine de caract&#xE8;re repr&#xE9;sentant le nom d&apos;espace en tant que premier argument aux fonctions utilitaires ainsi toutes les liaisons seront faites en utilisant le module comme contexte. Cela peut &#xEA;tre simplifi&#xE9; comme ci-dessous :</p>
 
+<pre class="language-"><code class="lang-js">computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token string">&apos;some/nested/module&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
 
+    a<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> state<span class="token punctuation">.</span>a<span class="token punctuation">,</span>
 
+    b<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> state<span class="token punctuation">.</span>b
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token string">&apos;some/nested/module&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>
 
+    <span class="token string">&apos;foo&apos;</span><span class="token punctuation">,</span>
 
+    <span class="token string">&apos;bar&apos;</span>
 
+  <span class="token punctuation">]</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>De plus, vous pouvez cr&#xE9;er des fonctions utilitaires li&#xE9;es avec espace de nom en utilisant <code>createNamespacedHelpers</code>. Cela retourne un objet qui a les nouvelles fonctions utilitaires rattach&#xE9;es &#xE0; la valeur d&apos;espace de nom fournie :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> createNamespacedHelpers <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&apos;vuex&apos;</span>
 
+
 
+<span class="token keyword">const</span> <span class="token punctuation">{</span> mapState<span class="token punctuation">,</span> mapActions <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">createNamespacedHelpers</span><span class="token punctuation">(</span><span class="token string">&apos;some/nested/module&apos;</span><span class="token punctuation">)</span>
 
+
 
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
 
+  computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// v&#xE9;rifie dans `some/nested/module`</span>
 
+    <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+      a<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> state<span class="token punctuation">.</span>a<span class="token punctuation">,</span>
 
+      b<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> state<span class="token punctuation">.</span>b
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// v&#xE9;rifie dans `some/nested/module`</span>
 
+    <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
 
+      <span class="token string">&apos;foo&apos;</span><span class="token punctuation">,</span>
 
+      <span class="token string">&apos;bar&apos;</span>
 
+    <span class="token punctuation">]</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<h4 id="limitations-pour-les-plugins-des-d&#xE9;veloppeurs">Limitations pour les plugins des d&#xE9;veloppeurs</h4>
 
+<p>Vous devez faire attention au nom d&apos;espace impr&#xE9;visible pour vos modules quand vous cr&#xE9;ez un <a href="plugins.html">plugin</a> qui fournit les modules et laisser les utilisateurs les ajouter au store de Vuex. Vos modules seront &#xE9;galement sous espace de nom si l&apos;utilisateur du plugin l&apos;ajoute sous un module sous espace de nom. Pour vous adapter &#xE0; la situation, vous devez recevoir la valeur de l&apos;espace de nom via vos options de plugin :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// passer la valeur d&apos;espace de nom via une option du plugin</span>
 
+<span class="token comment" spellcheck="true">// et retourner une fonction de plugin Vuex</span>
 
+<span class="token keyword">export</span> <span class="token keyword">function</span> createPlugin <span class="token punctuation">(</span>options <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>
 
+  <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>store<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// ajouter l&apos;espace de nom aux types de module</span>
 
+    <span class="token keyword">const</span> namespace <span class="token operator">=</span> options<span class="token punctuation">.</span>namespace <span class="token operator">||</span> <span class="token string">&apos;&apos;</span>
 
+    store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span>namespace <span class="token operator">+</span> <span class="token string">&apos;pluginAction&apos;</span><span class="token punctuation">)</span>
 
+ <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<h3 id="enregistrement-dynamique-de-module">Enregistrement dynamique de module</h3>
 
+<p>Vous pouvez enregistrer un module <strong>apr&#xE8;s</strong> que le store ait &#xE9;t&#xE9; cr&#xE9;&#xE9; avec la m&#xE9;thode <code>store.registerModule</code> :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// enregistrer un module `myModule`</span>
 
+store<span class="token punctuation">.</span><span class="token function">registerModule</span><span class="token punctuation">(</span><span class="token string">&apos;myModule&apos;</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">// enregistrer un module imbriqu&#xE9; `nested/myModule`</span>
 
+store<span class="token punctuation">.</span><span class="token function">registerModule</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&apos;nested&apos;</span><span class="token punctuation">,</span> <span class="token string">&apos;myModule&apos;</span><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>
 
+</code></pre>
 
+<p>L&apos;&#xE9;tat des modules est disponible dans <code>store.state.myModule</code> et <code>store.state.nested.myModule</code>.</p>
 
+<p>L&apos;enregistrement dynamique de module permet aux autres plugins Vue de b&#xE9;n&#xE9;ficier de la gestion de l&apos;&#xE9;tat de Vuex en attachant un module au store de l&apos;application. Par exemple, la biblioth&#xE8;que <a href="https://github.com/vuejs/vuex-router-sync" target="_blank"><code>vuex-router-sync</code></a> int&#xE8;gre vue-router avec vuex en g&#xE9;rant l&apos;&#xE9;tat de la route d&apos;application dans un module enregistr&#xE9; dynamiquement.</p>
 
+<p>Vous pouvez aussi supprimer un module enregistr&#xE9; dynamiquement avec <code>store.unregisterModule(moduleName)</code>. Notez que vous ne pouvez pas supprimer des modules statiques (d&#xE9;clar&#xE9;s &#xE0; la cr&#xE9;ation du store) avec cette m&#xE9;thode.</p>
 
+<p>Il est possible que vous souhaitiez pr&#xE9;server un &#xE9;tat pr&#xE9;c&#xE9;dent quand vous abonnez un nouveau module. Par exemple pr&#xE9;server l&apos;&#xE9;tat depuis l&apos;application rendue c&#xF4;t&#xE9; serveur. Vous pouvez r&#xE9;aliser ceci avec l&apos;option <code>preserveState</code> : <code>store.registerModule(&apos;a&apos;, module, { preserveState: true })</code>.</p>
 
+<h3 id="r&#xE9;utiliser-un-module">R&#xE9;utiliser un module</h3>
 
+<p>Parfois nous devrons cr&#xE9;er de multiples instances d&apos;un module pour, par exemple :</p>
 
+<ul>
 
+<li>cr&#xE9;er plusieurs stores qui utilisent le m&#xEA;me module (par ex. pour <a href="https://ssr.vuejs.org/fr/structure.html#avoid-stateful-singletons" target="_blank">&#xE9;viter les singletons d&apos;&#xE9;tat avec du SSR</a> quand l&apos;option <code>runInNewContext</code> est &#xE0; <code>false</code> ou <code>&apos;once&apos;</code>) ou</li>
 
+<li>enregistrer le m&#xEA;me module plusieurs fois dans le m&#xEA;me store.</li>
 
+</ul>
 
+<p>Si nous utilisons un objet pour d&#xE9;clarer l&apos;&#xE9;tat du module, alors cet objet d&apos;&#xE9;tat sera partag&#xE9; par r&#xE9;f&#xE9;rence et causera de contamination inter store/module quand il sera mut&#xE9;.</p>
 
+<p>C&apos;est exactement le m&#xEA;me probl&#xE8;me qu&apos;avec <code>data</code> dans un composant Vue. Ainsi la solution est l&#xE0; m&#xEA;me, utiliser une fonction pour d&#xE9;clarer notre &#xE9;tat de module (support&#xE9; par la 2.3.0+) :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> MyReusableModule <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+  state <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
 
+      foo<span class="token punctuation">:</span> <span class="token string">&apos;bar&apos;</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  <span class="token comment" spellcheck="true">// mutations, actions, accesseurs...</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+
 
+                                
+                                </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="actions.html" class="navigation navigation-prev " aria-label="Previous page: Actions">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="structure.html" class="navigation navigation-next " aria-label="Next page: Structure d'une application">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Modules","level":"1.6.5","depth":2,"next":{"title":"Structure d'une application","level":"1.7","depth":1,"path":"structure.md","ref":"structure.md","articles":[]},"previous":{"title":"Actions","level":"1.6.4","depth":2,"path":"actions.md","ref":"actions.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":"Éditer cette 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":"fr","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"modules.md","mtime":"2018-04-20T00:44:03.859Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"fr"}});
 
+        });
 
+    </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>
 
+

+ 607 - 0
fr/mutations.html
View File 

@@ -0,0 +1,607 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="fr" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Mutations · 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="actions.html" />
 
+    
+    
+    <link rel="prev" href="getters.html" />
 
+    
+
 
+    </head>
 
+    <body>
 
+        
+<div class="book">
 
+    <div class="book-summary">
 
+        
+            
+<div id="book-search-input" role="search">
 
+    <input type="text" placeholder="Tapez pour rechercher" />
 
+</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">
 
+            
+                    
+                    Notes de version
 
+            
+                </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">
 
+            
+                    
+                    Vuex, qu'est-ce que c'est ?
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.5" data-path="getting-started.html">
 
+            
+                <a href="getting-started.html">
 
+            
+                    
+                    Pour commencer
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6" data-path="core-concepts.html">
 
+            
+                <a href="core-concepts.html">
 
+            
+                    
+                    Concepts de base
 
+            
+                </a>
 
+            
+
 
+            
+            <ul class="articles">
 
+                
+    
+        <li class="chapter " data-level="1.6.1" data-path="state.html">
 
+            
+                <a href="state.html">
 
+            
+                    
+                    État
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6.2" data-path="getters.html">
 
+            
+                <a href="getters.html">
 
+            
+                    
+                    Accesseurs
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter active" 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">
 
+            
+                    
+                    Structure d'une application
 
+            
+                </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">
 
+            
+                    
+                    Mode strict
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.10" data-path="forms.html">
 
+            
+                <a href="forms.html">
 
+            
+                    
+                    Gestion des formulaires
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.11" data-path="testing.html">
 
+            
+                <a href="testing.html">
 
+            
+                    
+                    Tests
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.12" data-path="hot-reload.html">
 
+            
+                <a href="hot-reload.html">
 
+            
+                    
+                    Rechargement à chaud
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.13" data-path="api.html">
 
+            
+                <a href="api.html">
 
+            
+                    
+                    Documentation de l'API
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+
 
+    
+
 
+    <li class="divider"></li>
 
+
 
+    <li>
 
+        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
 
+            Publié avec 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="." >Mutations</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="mutations">Mutations</h1>
 
+<p>La seule fa&#xE7;on de vraiment modifier l&apos;&#xE9;tat dans un store Vuex est d&apos;acter une mutation. Les mutations Vuex sont tr&#xE8;s similaires aux &#xE9;v&#xE8;nements : chaque mutation a un <strong>type</strong> sous forme de chaine de caract&#xE8;res et un <strong>gestionnaire</strong>. La fonction de gestion est en charge de proc&#xE9;der aux v&#xE9;ritables modifications de l&apos;&#xE9;tat, et elle re&#xE7;oit l&apos;&#xE9;tat en premier argument :</p>
 
+<pre class="language-"><code class="lang-js"><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">1</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>
 
+      <span class="token comment" spellcheck="true">// muter l&apos;&#xE9;tat</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>Vous ne pouvez pas appeler directement un gestionnaire de mutation. Le parti-pris ici est proche de l&apos;abonnement &#xE0; un &#xE9;v&#xE8;nement : &#xAB; Lorsqu&apos;une mutation du type <code>increment</code> est d&#xE9;clench&#xE9;e, appelle ce gestionnaire. &#xBB; Pour invoquer un gestionnaire de mutation, il faut appeler <code>store.commit</code> avec son type :</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>
 
+</code></pre>
 
+<h3 id="acter-avec-un-argument-additionnel">Acter avec un argument additionnel</h3>
 
+<p>Vous pouvez donner un argument additionnel (&#xAB; payload &#xBB;) &#xE0; la fonction <code>store.commit</code> lors de la mutation :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// ...</span>
 
+mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  increment <span class="token punctuation">(</span>state<span class="token punctuation">,</span> n<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 operator">=</span> n
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<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> <span class="token number">10</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>Dans la plupart des cas, l&apos;argument additionnel devrait &#xEA;tre un objet, ainsi il peut contenir plusieurs champs, et les mutations enregistr&#xE9;es seront &#xE9;galement plus descriptives :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// ...</span>
 
+mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  increment <span class="token punctuation">(</span>state<span class="token punctuation">,</span> payload<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 operator">=</span> payload<span class="token punctuation">.</span>amount
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<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> <span class="token punctuation">{</span>
 
+  amount<span class="token punctuation">:</span> <span class="token number">10</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<h3 id="acter-avec-un-objet">Acter avec un objet</h3>
 
+<p>Une m&#xE9;thode alternative pour acter une mutation est d&apos;utiliser directement un objet qui a une propri&#xE9;t&#xE9; <code>type</code> :</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 punctuation">{</span>
 
+  type<span class="token punctuation">:</span> <span class="token string">&apos;increment&apos;</span><span class="token punctuation">,</span>
 
+  amount<span class="token punctuation">:</span> <span class="token number">10</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>Lors de l&apos;utilisation d&apos;un objet pour acter, c&apos;est l&apos;objet lui-m&#xEA;me qui ferra office d&apos;argument pour aux gestionnaires de mutation, le gestionnaire reste donc inchang&#xE9; :</p>
 
+<pre class="language-"><code class="lang-js">mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  increment <span class="token punctuation">(</span>state<span class="token punctuation">,</span> payload<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 operator">=</span> payload<span class="token punctuation">.</span>amount
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<h3 id="les-mutations-suivent-les-r&#xE8;gles-de-r&#xE9;activit&#xE9;-de-vue">Les mutations suivent les r&#xE8;gles de r&#xE9;activit&#xE9; de Vue</h3>
 
+<p>Puisqu&apos;un &#xE9;tat de store de Vuex est rendu r&#xE9;actif par Vue, lorsque nous mutons l&apos;&#xE9;tat, les composants Vue observant cet &#xE9;tat seront automatiquement mis &#xE0; jour. Cela signifie &#xE9;galement que les mutations Vuex sont sujettes aux m&#xEA;mes limitations qu&apos;avec l&apos;utilisation de Vue seul :</p>
 
+<ol>
 
+<li><p>Initialisez de pr&#xE9;f&#xE9;rence le store initial de votre &#xE9;tat avec tous les champs d&#xE9;sir&#xE9;s auparavant.</p>
 
+</li>
 
+<li><p>Lorsque vous ajoutez de nouvelles propri&#xE9;t&#xE9;s &#xE0; un objet, vous devriez soit :</p>
 
+<ul>
 
+<li><p>Utiliser <code>Vue.set(obj, &apos;newProp&apos;, 123)</code>, ou</p>
 
+</li>
 
+<li><p>Remplacer cet objet par un nouvel objet. Par exemple, en utilisant <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition" target="_blank">op&#xE9;rateur de d&#xE9;composition</a> (stage-2), il est possible d&apos;&#xE9;crire :</p>
 
+<pre class="language-"><code class="lang-js">state<span class="token punctuation">.</span>obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span>state<span class="token punctuation">.</span>obj<span class="token punctuation">,</span> newProp<span class="token punctuation">:</span> <span class="token number">123</span> <span class="token punctuation">}</span>
 
+</code></pre>
 
+</li>
 
+</ul>
 
+</li>
 
+</ol>
 
+<h3 id="utilisation-de-constante-pour-les-types-de-mutation">Utilisation de constante pour les types de mutation</h3>
 
+<p>C&apos;est une fa&#xE7;on de faire r&#xE9;guli&#xE8;re que d&apos;utiliser des constantes pour les types de mutations dans diverses impl&#xE9;mentations de Flux. Cela permet au code de b&#xE9;n&#xE9;ficier d&apos;outils comme les linters (des outils d&apos;aide &#xE0; l&apos;analyse syntaxique), et &#xE9;crire toutes ces constantes dans un seul fichier permet &#xE0; vos collaborateurs d&apos;avoir un aper&#xE7;u de quelles mutations sont possibles dans toute l&apos;application :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// mutation-types.js</span>
 
+<span class="token keyword">export</span> <span class="token keyword">const</span> SOME_MUTATION <span class="token operator">=</span> <span class="token string">&apos;SOME_MUTATION&apos;</span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// store.js</span>
 
+<span class="token keyword">import</span> Vuex <span class="token keyword">from</span> <span class="token string">&apos;vuex&apos;</span>
 
+<span class="token keyword">import</span> <span class="token punctuation">{</span> SOME_MUTATION <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&apos;./mutation-types&apos;</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> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// nous pouvons utiliser la fonctionnalit&#xE9; de nom de propri&#xE9;t&#xE9; calcul&#xE9;e</span>
 
+    <span class="token comment" spellcheck="true">// pour utiliser une constante en tant que nom de fonction</span>
 
+    <span class="token punctuation">[</span>SOME_MUTATION<span class="token punctuation">]</span> <span class="token punctuation">(</span>state<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+      <span class="token comment" spellcheck="true">// muter l&apos;&#xE9;tat</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>Utiliser les constantes ou non rel&#xE8;ve de la pr&#xE9;f&#xE9;rence personnelle. Cela peut &#xEA;tre b&#xE9;n&#xE9;fique sur un gros projet avec beaucoup de d&#xE9;veloppeurs, mais c&apos;est totalement optionnel si vous n&apos;aimez pas cette pratique.</p>
 
+<h3 id="les-mutations-doivent-&#xEA;tre-synchrones">Les mutations doivent &#xEA;tre synchrones</h3>
 
+<p>Une r&#xE8;gle importante &#xE0; retenir est que <strong>les fonctions de gestion des mutations doivent &#xEA;tre synchrones</strong>. Pourquoi ? Consid&#xE9;rons l&apos;exemple suivant :</p>
 
+<pre class="language-"><code class="lang-js">mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  someMutation <span class="token punctuation">(</span>state<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    api<span class="token punctuation">.</span><span class="token function">callAsyncMethod</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</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>Maintenant imaginons que nous d&#xE9;boguons l&apos;application et que nous regardons dans les logs de mutation des outils de d&#xE9;veloppement (&#xAB; devtools &#xBB;). Pour chaque mutation enregistr&#xE9;e, le devtool aura besoin de capturer un instantan&#xE9; de l&apos;&#xE9;tat &#xAB; avant &#xBB; et un instantan&#xE9; &#xAB; apr&#xE8;s &#xBB;. Cependant, la fonction de rappel asynchrone de l&apos;exemple ci-dessus rend l&apos;op&#xE9;ration impossible : la fonction de rappel n&apos;est pas encore appel&#xE9;e lorsque la mutation est act&#xE9;e, et il n&apos;y a aucun moyen pour le devtool de savoir quand la fonction de rappel sera v&#xE9;ritablement appel&#xE9;e. Toute mutation d&apos;&#xE9;tat effectu&#xE9;e dans la fonction de rappel est essentiellement intra&#xE7;able !</p>
 
+<h3 id="acter-des-mutations-dans-les-composants">Acter des mutations dans les composants</h3>
 
+<p>Vous pouvez acter des mutations dans les composants avec <code>this.$store.commit(&apos;xxx&apos;)</code>, ou en utilisant la fonction utilitaire <code>mapMutations</code> qui attache les m&#xE9;thodes du composant aux appels de <code>store.commit</code> (n&#xE9;cessite l&apos;injection de <code>store</code> &#xE0; la racine) :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> mapMutations <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>
 
+  methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    <span class="token operator">...</span><span class="token function">mapMutations</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
 
+      <span class="token string">&apos;increment&apos;</span> <span class="token comment" spellcheck="true">// attacher `this.increment()` &#xE0; `this.$store.commit(&apos;increment&apos;)`</span>
 
+
 
+      <span class="token comment" spellcheck="true">// `mapMutations` supporte &#xE9;galement les param&#xE8;tres additionnels :</span>
 
+      <span class="token string">&apos;incrementBy&apos;</span> <span class="token comment" spellcheck="true">// attacher `this.incrementBy(amount)` &#xE0; `this.$store.commit(&apos;incrementBy&apos;, amount)`</span>
 
+    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
 
+    <span class="token operator">...</span><span class="token function">mapMutations</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+      add<span class="token punctuation">:</span> <span class="token string">&apos;increment&apos;</span> <span class="token comment" spellcheck="true">// attacher `this.add()` &#xE0; `this.$store.commit(&apos;increment&apos;)`</span>
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<h3 id="en-avant-vers-les-actions">En avant vers les actions</h3>
 
+<p>L&apos;asynchronisme combin&#xE9; &#xE0; la mutation de l&apos;&#xE9;tat peut rendre votre programme tr&#xE8;s difficile &#xE0; comprendre. Par exemple, lorsque vous appelez deux m&#xE9;thodes avec toutes les deux des fonctions de rappel asynchrones qui changent l&apos;&#xE9;tat, comment savez-vous quelle fonction de rappel est appel&#xE9;e en premi&#xE8;re ? C&apos;est exactement la raison pour laquelle nous voulons s&#xE9;parer les deux concepts. Avec Vuex, <strong>les mutations sont des transactions synchrones</strong> :</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>
 
+<span class="token comment" spellcheck="true">// n&apos;importe quel changement d&apos;&#xE9;tat de &#xAB; increment &#xBB; par mutation</span>
 
+<span class="token comment" spellcheck="true">// devrait &#xEA;tre faite de mani&#xE8;re synchrone.</span>
 
+</code></pre>
 
+<p>Pour g&#xE9;rer les op&#xE9;rations asynchrones, tournons-nous vers les <a href="actions.html">Actions</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="getters.html" class="navigation navigation-prev " aria-label="Previous page: Accesseurs">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="actions.html" class="navigation navigation-next " aria-label="Next page: Actions">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Mutations","level":"1.6.3","depth":2,"next":{"title":"Actions","level":"1.6.4","depth":2,"path":"actions.md","ref":"actions.md","articles":[]},"previous":{"title":"Accesseurs","level":"1.6.2","depth":2,"path":"getters.md","ref":"getters.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":"Éditer cette 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":"fr","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"mutations.md","mtime":"2018-04-20T00:44:03.859Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"fr"}});
 
+        });
 
+    </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>
 
+

+ 576 - 0
fr/plugins.html
View File 

@@ -0,0 +1,576 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="fr" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Plugins · 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="strict.html" />
 
+    
+    
+    <link rel="prev" href="structure.html" />
 
+    
+
 
+    </head>
 
+    <body>
 
+        
+<div class="book">
 
+    <div class="book-summary">
 
+        
+            
+<div id="book-search-input" role="search">
 
+    <input type="text" placeholder="Tapez pour rechercher" />
 
+</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">
 
+            
+                    
+                    Notes de version
 
+            
+                </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">
 
+            
+                    
+                    Vuex, qu'est-ce que c'est ?
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.5" data-path="getting-started.html">
 
+            
+                <a href="getting-started.html">
 
+            
+                    
+                    Pour commencer
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6" data-path="core-concepts.html">
 
+            
+                <a href="core-concepts.html">
 
+            
+                    
+                    Concepts de base
 
+            
+                </a>
 
+            
+
 
+            
+            <ul class="articles">
 
+                
+    
+        <li class="chapter " data-level="1.6.1" data-path="state.html">
 
+            
+                <a href="state.html">
 
+            
+                    
+                    État
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6.2" data-path="getters.html">
 
+            
+                <a href="getters.html">
 
+            
+                    
+                    Accesseurs
 
+            
+                </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">
 
+            
+                    
+                    Structure d'une application
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter active" 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">
 
+            
+                    
+                    Mode strict
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.10" data-path="forms.html">
 
+            
+                <a href="forms.html">
 
+            
+                    
+                    Gestion des formulaires
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.11" data-path="testing.html">
 
+            
+                <a href="testing.html">
 
+            
+                    
+                    Tests
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.12" data-path="hot-reload.html">
 
+            
+                <a href="hot-reload.html">
 
+            
+                    
+                    Rechargement à chaud
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.13" data-path="api.html">
 
+            
+                <a href="api.html">
 
+            
+                    
+                    Documentation de l'API
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+
 
+    
+
 
+    <li class="divider"></li>
 
+
 
+    <li>
 
+        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
 
+            Publié avec 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="." >Plugins</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="plugins">Plugins</h1>
 
+<p>Les stores Vuex prennent une option <code>plugins</code> qui expose des hooks pour chaque mutation. Un plugin Vuex est simplement une fonction qui re&#xE7;oit un store comme unique argument :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> myPlugin <span class="token operator">=</span> store <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// appel&#xE9; quand le store est initialis&#xE9;</span>
 
+  store<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span>mutation<span class="token punctuation">,</span> state<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// appel&#xE9; apr&#xE8;s chaque mutation.</span>
 
+    <span class="token comment" spellcheck="true">// Les mutations arrivent au format `{ type, payload }`.</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>Et peut &#xEA;tre utilis&#xE9; ainsi :</p>
 
+<pre class="language-"><code class="lang-js"><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>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>myPlugin<span class="token punctuation">]</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<h3 id="acter-des-mutations-dans-des-plugins">Acter des mutations dans des plugins</h3>
 
+<p>Les plugins ne sont pas autoris&#xE9;s &#xE0; muter directement l&apos;&#xE9;tat. Tout comme vos composants, ils peuvent simplement d&#xE9;clencher des changements en actant des mutations.</p>
 
+<p>En actant des mutations, un plugin peut &#xEA;tre utilis&#xE9; pour synchroniser la source de donn&#xE9;es avec le store. Par exemple, pour synchroniser la source de donn&#xE9;es d&apos;une websocket vers le store (c&apos;est juste un exemple artificiel, en r&#xE9;alit&#xE9; la fonction <code>createPlugin</code> peut prendre des options additionnelles pour des t&#xE2;ches plus complexes) :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> createWebSocketPlugin <span class="token punctuation">(</span>socket<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+  <span class="token keyword">return</span> store <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    socket<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&apos;data&apos;</span><span class="token punctuation">,</span> data <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+      store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;receiveData&apos;</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+    store<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span>mutation <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+      <span class="token keyword">if</span> <span class="token punctuation">(</span>mutation<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&apos;UPDATE_DATA&apos;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+        socket<span class="token punctuation">.</span><span class="token function">emit</span><span class="token punctuation">(</span><span class="token string">&apos;update&apos;</span><span class="token punctuation">,</span> mutation<span class="token punctuation">.</span>payload<span class="token punctuation">)</span>
 
+      <span class="token punctuation">}</span>
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> plugin <span class="token operator">=</span> <span class="token function">createWebSocketPlugin</span><span class="token punctuation">(</span>socket<span class="token punctuation">)</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>
 
+  mutations<span class="token punctuation">,</span>
 
+  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>plugin<span class="token punctuation">]</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<h3 id="prendre-des-instantan&#xE9;s-de-l&#xE9;tat">Prendre des instantan&#xE9;s de l&apos;&#xE9;tat</h3>
 
+<p>Parfois un plugin peut vouloir recevoir des &#xAB; instantan&#xE9;s &#xBB; de l&apos;&#xE9;tat, et &#xE9;galement comparer l&apos;&#xE9;tat post mutation avec l&apos;&#xE9;tat pr&#xE9;mutation. Pour faire ceci, vous aurez besoin d&apos;effectuer une copie compl&#xE8;te de l&apos;&#xE9;tat :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> myPluginWithSnapshot <span class="token operator">=</span> store <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  <span class="token keyword">let</span> prevState <span class="token operator">=</span> _<span class="token punctuation">.</span><span class="token function">cloneDeep</span><span class="token punctuation">(</span>store<span class="token punctuation">.</span>state<span class="token punctuation">)</span>
 
+  store<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span>mutation<span class="token punctuation">,</span> state<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">let</span> nextState <span class="token operator">=</span> _<span class="token punctuation">.</span><span class="token function">cloneDeep</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span>
 
+
 
+    <span class="token comment" spellcheck="true">// comparer `prevState` et `nextState`...</span>
 
+
 
+    <span class="token comment" spellcheck="true">// sauver l&apos;&#xE9;tat pour la prochaine mutation</span>
 
+    prevState <span class="token operator">=</span> nextState
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p><strong>Les plugins qui peuvent prendre des instantan&#xE9;s ne devraient &#xEA;tre utilis&#xE9;s que pendant le d&#xE9;veloppement.</strong> Lorsqu&apos;on utilise webpack ou Browserify, on peut laisser nos outils de d&#xE9;veloppement (&#xAB; devtools &#xBB;) s&apos;occuper de &#xE7;a pour nous :</p>
 
+<pre class="language-"><code class="lang-js"><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>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  plugins<span class="token punctuation">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span>NODE_ENV <span class="token operator">!==</span> <span class="token string">&apos;production&apos;</span>
 
+    <span class="token operator">?</span> <span class="token punctuation">[</span>myPluginWithSnapshot<span class="token punctuation">]</span>
 
+    <span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>Le plugin sera utilis&#xE9; par d&#xE9;faut. Pour la production, vous aurez besoin de <a href="https://webpack.js.org/plugins/define-plugin/" target="_blank">DefinePlugin</a> pour webpack ou de <a href="https://github.com/hughsk/envify" target="_blank">envify</a> pour Browserify pour convertir la valeur de <code>process.env.NODE_ENV !== &apos;production&apos;</code> &#xE0; <code>false</code> pour le build final.</p>
 
+<h3 id="plugin-de-logs-int&#xE9;gr&#xE9;">Plugin de logs int&#xE9;gr&#xE9;</h3>
 
+<blockquote>
 
+<p>Si vous utilisez <a href="https://github.com/vuejs/vue-devtools" target="_blank">vue-devtools</a> vous n&apos;avez probablement pas besoin de &#xE7;a.</p>
 
+</blockquote>
 
+<p>Vuex fournit un plugin de logs &#xE0; des fins de d&#xE9;bogage :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">import</span> createLogger <span class="token keyword">from</span> <span class="token string">&apos;vuex/dist/logger&apos;</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>
 
+  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token function">createLogger</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>La fonction <code>createLogger</code> prend quelques options :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> logger <span class="token operator">=</span> <span class="token function">createLogger</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+  collapsed<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// auto-expand logged mutations</span>
 
+  filter <span class="token punctuation">(</span>mutation<span class="token punctuation">,</span> stateBefore<span class="token punctuation">,</span> stateAfter<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// retourne `true` si une mutation devrait &#xEA;tre loggu&#xE9;e</span>
 
+    <span class="token comment" spellcheck="true">// `mutation` est un `{ type, payload }`</span>
 
+    <span class="token keyword">return</span> mutation<span class="token punctuation">.</span>type <span class="token operator">!==</span> <span class="token string">&quot;aBlacklistedMutation&quot;</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  transformer <span class="token punctuation">(</span>state<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// transforme l&apos;&#xE9;tat avant de le logguer.</span>
 
+    <span class="token comment" spellcheck="true">// retourne par exemple seulement un sous-arbre sp&#xE9;cifique</span>
 
+    <span class="token keyword">return</span> state<span class="token punctuation">.</span>subTree
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  mutationTransformer <span class="token punctuation">(</span>mutation<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// les mutations sont loggu&#xE9;es au format `{ type, payload }`</span>
 
+    <span class="token comment" spellcheck="true">// nous pouvons les formater comme nous le souhaitons.</span>
 
+    <span class="token keyword">return</span> mutation<span class="token punctuation">.</span>type
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  logger<span class="token punctuation">:</span> console<span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// implementation de l&apos;API `console`, par d&#xE9;faut `console`</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>Le fichier de logs peut aussi &#xEA;tre inclus directement via une balise <code>script</code>, et exposera la fonction <code>createVuexLogger</code> globalement.</p>
 
+<p>Notez que le plugin de logs peut prendre des instantan&#xE9;s de l&apos;&#xE9;tat, ne l&apos;utilisez donc que durant le d&#xE9;veloppement.</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="structure.html" class="navigation navigation-prev " aria-label="Previous page: Structure d'une application">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="strict.html" class="navigation navigation-next " aria-label="Next page: Mode strict">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Plugins","level":"1.8","depth":1,"next":{"title":"Mode strict","level":"1.9","depth":1,"path":"strict.md","ref":"strict.md","articles":[]},"previous":{"title":"Structure d'une application","level":"1.7","depth":1,"path":"structure.md","ref":"structure.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":"Éditer cette 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":"fr","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"plugins.md","mtime":"2018-04-20T00:44:03.860Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"fr"}});
 
+        });
 
+    </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>
 
+

File diff suppressed because it is too large
+ 0 - 0
fr/search_index.json


File diff suppressed because it is too large
+ 519 - 0
fr/state.html


+ 495 - 0
fr/strict.html
View File 

@@ -0,0 +1,495 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="fr" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Mode strict · 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="forms.html" />
 
+    
+    
+    <link rel="prev" href="plugins.html" />
 
+    
+
 
+    </head>
 
+    <body>
 
+        
+<div class="book">
 
+    <div class="book-summary">
 
+        
+            
+<div id="book-search-input" role="search">
 
+    <input type="text" placeholder="Tapez pour rechercher" />
 
+</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">
 
+            
+                    
+                    Notes de version
 
+            
+                </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">
 
+            
+                    
+                    Vuex, qu'est-ce que c'est ?
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.5" data-path="getting-started.html">
 
+            
+                <a href="getting-started.html">
 
+            
+                    
+                    Pour commencer
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6" data-path="core-concepts.html">
 
+            
+                <a href="core-concepts.html">
 
+            
+                    
+                    Concepts de base
 
+            
+                </a>
 
+            
+
 
+            
+            <ul class="articles">
 
+                
+    
+        <li class="chapter " data-level="1.6.1" data-path="state.html">
 
+            
+                <a href="state.html">
 
+            
+                    
+                    État
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6.2" data-path="getters.html">
 
+            
+                <a href="getters.html">
 
+            
+                    
+                    Accesseurs
 
+            
+                </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">
 
+            
+                    
+                    Structure d'une application
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.8" data-path="plugins.html">
 
+            
+                <a href="plugins.html">
 
+            
+                    
+                    Plugins
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter active" data-level="1.9" data-path="strict.html">
 
+            
+                <a href="strict.html">
 
+            
+                    
+                    Mode strict
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.10" data-path="forms.html">
 
+            
+                <a href="forms.html">
 
+            
+                    
+                    Gestion des formulaires
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.11" data-path="testing.html">
 
+            
+                <a href="testing.html">
 
+            
+                    
+                    Tests
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.12" data-path="hot-reload.html">
 
+            
+                <a href="hot-reload.html">
 
+            
+                    
+                    Rechargement à chaud
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.13" data-path="api.html">
 
+            
+                <a href="api.html">
 
+            
+                    
+                    Documentation de l'API
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+
 
+    
+
 
+    <li class="divider"></li>
 
+
 
+    <li>
 
+        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
 
+            Publié avec 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="." >Mode strict</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="mode-strict">Mode strict</h1>
 
+<p>Pour activer le mode strict, passez simplement l&apos;option <code>strict: true</code> pendant la cr&#xE9;ation d&apos;un store Vuex :</p>
 
+<pre class="language-"><code class="lang-js"><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>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  strict<span class="token punctuation">:</span> <span class="token boolean">true</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>En mode strict, lorsque l&apos;&#xE9;tat de Vuex est modifi&#xE9; en dehors des gestionnaires de mutation, une erreur sera lanc&#xE9;e. Cela permet de s&apos;assurer que toutes les mutations de l&apos;&#xE9;tat peuvent &#xEA;tre explicitement trac&#xE9;es par les outils de d&#xE9;bogage.</p>
 
+<h3 id="d&#xE9;veloppement-vs-production">D&#xE9;veloppement vs. production</h3>
 
+<p><strong>N&apos;activez pas le mode strict lorsque vous d&#xE9;ployez en production !</strong> Le mode strict lance une observation r&#xE9;cursive de l&apos;arbre d&apos;&#xE9;tat pour d&#xE9;tecter des mutations inappropri&#xE9;es. Assurez-vous de l&apos;avoir d&#xE9;sactiv&#xE9; en production pour &#xE9;viter un cout sur les performances.</p>
 
+<p>Tout comme les plugins, nous pouvons laisser nos outils de build g&#xE9;rer &#xE7;a :</p>
 
+<pre class="language-"><code class="lang-js"><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>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  strict<span class="token punctuation">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span>NODE_ENV <span class="token operator">!==</span> <span class="token string">&apos;production&apos;</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+
 
+                                
+                                </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="plugins.html" class="navigation navigation-prev " aria-label="Previous page: Plugins">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="forms.html" class="navigation navigation-next " aria-label="Next page: Gestion des formulaires">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Mode strict","level":"1.9","depth":1,"next":{"title":"Gestion des formulaires","level":"1.10","depth":1,"path":"forms.md","ref":"forms.md","articles":[]},"previous":{"title":"Plugins","level":"1.8","depth":1,"path":"plugins.md","ref":"plugins.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":"Éditer cette 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":"fr","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"strict.md","mtime":"2018-04-20T00:44:03.860Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"fr"}});
 
+        });
 
+    </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>
 
+

+ 507 - 0
fr/structure.html
View File 

@@ -0,0 +1,507 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="fr" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Structure d'une application · 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="plugins.html" />
 
+    
+    
+    <link rel="prev" href="modules.html" />
 
+    
+
 
+    </head>
 
+    <body>
 
+        
+<div class="book">
 
+    <div class="book-summary">
 
+        
+            
+<div id="book-search-input" role="search">
 
+    <input type="text" placeholder="Tapez pour rechercher" />
 
+</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">
 
+            
+                    
+                    Notes de version
 
+            
+                </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">
 
+            
+                    
+                    Vuex, qu'est-ce que c'est ?
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.5" data-path="getting-started.html">
 
+            
+                <a href="getting-started.html">
 
+            
+                    
+                    Pour commencer
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6" data-path="core-concepts.html">
 
+            
+                <a href="core-concepts.html">
 
+            
+                    
+                    Concepts de base
 
+            
+                </a>
 
+            
+
 
+            
+            <ul class="articles">
 
+                
+    
+        <li class="chapter " data-level="1.6.1" data-path="state.html">
 
+            
+                <a href="state.html">
 
+            
+                    
+                    État
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6.2" data-path="getters.html">
 
+            
+                <a href="getters.html">
 
+            
+                    
+                    Accesseurs
 
+            
+                </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 active" data-level="1.7" data-path="structure.html">
 
+            
+                <a href="structure.html">
 
+            
+                    
+                    Structure d'une application
 
+            
+                </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">
 
+            
+                    
+                    Mode strict
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.10" data-path="forms.html">
 
+            
+                <a href="forms.html">
 
+            
+                    
+                    Gestion des formulaires
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.11" data-path="testing.html">
 
+            
+                <a href="testing.html">
 
+            
+                    
+                    Tests
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.12" data-path="hot-reload.html">
 
+            
+                <a href="hot-reload.html">
 
+            
+                    
+                    Rechargement à chaud
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.13" data-path="api.html">
 
+            
+                <a href="api.html">
 
+            
+                    
+                    Documentation de l'API
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+
 
+    
+
 
+    <li class="divider"></li>
 
+
 
+    <li>
 
+        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
 
+            Publié avec 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="." >Structure d'une application</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="structure-dune-application">Structure d&apos;une application</h1>
 
+<p>Vuex ne vous restreint pas quand &#xE0; la structure de code &#xE0; utiliser. Il impose plut&#xF4;t de respecter des principes de haut niveau :</p>
 
+<ol>
 
+<li><p>L&apos;&#xE9;tat de l&apos;application est centralis&#xE9; dans le store.</p>
 
+</li>
 
+<li><p>La seule fa&#xE7;on de muter l&apos;&#xE9;tat est d&apos;acter des <strong>mutations</strong>, qui sont des transactions synchrones.</p>
 
+</li>
 
+<li><p>La logique asynchrone doit &#xEA;tre compos&#xE9;e et encapsul&#xE9;e dans des <strong>actions</strong>.</p>
 
+</li>
 
+</ol>
 
+<p>Tant que vous suivez ces r&#xE8;gles, c&apos;est &#xE0; vous de structurer votre projet. Si votre fichier de store devient trop gros, commencez d&#xE8;s lors &#xE0; s&#xE9;parer les actions, mutations et accesseurs dans des fichiers s&#xE9;par&#xE9;s.</p>
 
+<p>Pour une application non triviale, nous aurons probablement besoin de faire appel &#xE0; des modules. Voici un exemple de structure de projet :</p>
 
+<pre class="language-"><code class="lang-bash">&#x251C;&#x2500;&#x2500; index.html
 
+&#x251C;&#x2500;&#x2500; main.js
 
+&#x251C;&#x2500;&#x2500; api
 
+&#x2502;   &#x2514;&#x2500;&#x2500; <span class="token punctuation">..</span>. <span class="token comment" spellcheck="true"># abstraction pour faire des requ&#xEA;tes par API</span>
 
+&#x251C;&#x2500;&#x2500; components
 
+&#x2502;   &#x251C;&#x2500;&#x2500; App.vue
 
+&#x2502;   &#x2514;&#x2500;&#x2500; <span class="token punctuation">..</span>.
 
+&#x2514;&#x2500;&#x2500; store
 
+    &#x251C;&#x2500;&#x2500; index.js          <span class="token comment" spellcheck="true"># l&#xE0; o&#xF9; l&apos;on assemble nos modules et exportons le store</span>
 
+    &#x251C;&#x2500;&#x2500; actions.js        <span class="token comment" spellcheck="true"># actions racine</span>
 
+    &#x251C;&#x2500;&#x2500; mutations.js      <span class="token comment" spellcheck="true"># mutations racine</span>
 
+    &#x2514;&#x2500;&#x2500; modules
 
+        &#x251C;&#x2500;&#x2500; cart.js       <span class="token comment" spellcheck="true"># module de panier</span>
 
+        &#x2514;&#x2500;&#x2500; products.js   <span class="token comment" spellcheck="true"># module de produit</span>
 
+</code></pre>
 
+<p>Vous pouvez jeter &#xE0; un &#x153;il &#xE0; l&apos;<a href="https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart" target="_blank">exemple de panier d&apos;achats</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="modules.html" class="navigation navigation-prev " aria-label="Previous page: Modules">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="plugins.html" class="navigation navigation-next " aria-label="Next page: Plugins">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Structure d'une application","level":"1.7","depth":1,"next":{"title":"Plugins","level":"1.8","depth":1,"path":"plugins.md","ref":"plugins.md","articles":[]},"previous":{"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":"Éditer cette 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":"fr","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"structure.md","mtime":"2018-04-20T00:44:03.861Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"fr"}});
 
+        });
 
+    </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>
 
+

+ 666 - 0
fr/testing.html
View File 

@@ -0,0 +1,666 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="fr" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Tests · 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="hot-reload.html" />
 
+    
+    
+    <link rel="prev" href="forms.html" />
 
+    
+
 
+    </head>
 
+    <body>
 
+        
+<div class="book">
 
+    <div class="book-summary">
 
+        
+            
+<div id="book-search-input" role="search">
 
+    <input type="text" placeholder="Tapez pour rechercher" />
 
+</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">
 
+            
+                    
+                    Notes de version
 
+            
+                </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">
 
+            
+                    
+                    Vuex, qu'est-ce que c'est ?
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.5" data-path="getting-started.html">
 
+            
+                <a href="getting-started.html">
 
+            
+                    
+                    Pour commencer
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6" data-path="core-concepts.html">
 
+            
+                <a href="core-concepts.html">
 
+            
+                    
+                    Concepts de base
 
+            
+                </a>
 
+            
+
 
+            
+            <ul class="articles">
 
+                
+    
+        <li class="chapter " data-level="1.6.1" data-path="state.html">
 
+            
+                <a href="state.html">
 
+            
+                    
+                    État
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6.2" data-path="getters.html">
 
+            
+                <a href="getters.html">
 
+            
+                    
+                    Accesseurs
 
+            
+                </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">
 
+            
+                    
+                    Structure d'une application
 
+            
+                </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">
 
+            
+                    
+                    Mode strict
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.10" data-path="forms.html">
 
+            
+                <a href="forms.html">
 
+            
+                    
+                    Gestion des formulaires
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter active" data-level="1.11" data-path="testing.html">
 
+            
+                <a href="testing.html">
 
+            
+                    
+                    Tests
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.12" data-path="hot-reload.html">
 
+            
+                <a href="hot-reload.html">
 
+            
+                    
+                    Rechargement à chaud
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.13" data-path="api.html">
 
+            
+                <a href="api.html">
 
+            
+                    
+                    Documentation de l'API
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+
 
+    
+
 
+    <li class="divider"></li>
 
+
 
+    <li>
 
+        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
 
+            Publié avec 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="." >Tests</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="tests">Tests</h1>
 
+<p>Les parties principales que l&apos;on veut couvrir par des tests unitaires avec Vuex sont les mutations et les actions.</p>
 
+<h3 id="tester-les-mutations">Tester les mutations</h3>
 
+<p>Les mutations sont tr&#xE8;s simples &#xE0; tester, puisque ce sont de simples fonctions qui se basent uniquement sur leurs arguments. Une astuce est que si vous utilisez les modules ES2015 et mettez vos mutations dans votre fichier <code>store.js</code>, en plus de l&apos;export par d&#xE9;faut, vous pouvez &#xE9;galement exporter vos mutations avec un export nomm&#xE9; :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
 
+
 
+<span class="token comment" spellcheck="true">// exporter `mutations` en tant qu&apos;export nomm&#xE9;</span>
 
+<span class="token keyword">export</span> <span class="token keyword">const</span> mutations <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
 
+
 
+<span class="token keyword">export</span> <span class="token keyword">default</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>
 
+  mutations
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>Exemple de test de mutation utilisant Mocha + Chai (vous pouvez utiliser n&apos;importe quel framework/biblioth&#xE8;que d&apos;assertion selon vos pr&#xE9;f&#xE9;rences) :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// mutations.js</span>
 
+<span class="token keyword">export</span> <span class="token keyword">const</span> mutations <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+  increment<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 operator">++</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// mutations.spec.js</span>
 
+<span class="token keyword">import</span> <span class="token punctuation">{</span> expect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&apos;chai&apos;</span>
 
+<span class="token keyword">import</span> <span class="token punctuation">{</span> mutations <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&apos;./store&apos;</span>
 
+
 
+<span class="token comment" spellcheck="true">// assignement de `mutations` par d&#xE9;structuration</span>
 
+<span class="token keyword">const</span> <span class="token punctuation">{</span> increment <span class="token punctuation">}</span> <span class="token operator">=</span> mutations
 
+
 
+<span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">&apos;mutations&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">&apos;INCREMENT&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// &#xE9;tat simul&#xE9;</span>
 
+    <span class="token keyword">const</span> state <span class="token operator">=</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 comment" spellcheck="true">// appliquer la mutation</span>
 
+    <span class="token function">increment</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span>
 
+    <span class="token comment" spellcheck="true">// tester le r&#xE9;sultat</span>
 
+    <span class="token function">expect</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>count<span class="token punctuation">)</span><span class="token punctuation">.</span>to<span class="token punctuation">.</span><span class="token function">equal</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<h3 id="tester-les-actions">Tester les actions</h3>
 
+<p>Les actions sont un peu plus compliqu&#xE9;es car elles peuvent faire appel &#xE0; des APIs externes. Lorsque l&apos;on teste des actions, on a souvent besoin de faire plusieurs niveaux de simulation. Par exemple, on peut abstraire l&apos;appel API dans un service et simuler ce service dans nos tests. Afin de simuler facilement les d&#xE9;pendances, on peut utiliser webpack et <a href="https://github.com/plasticine/inject-loader" target="_blank">inject-loader</a> pour regrouper nos fichiers de test.</p>
 
+<p>Exemple de test d&apos;une action asynchrone :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// actions.js</span>
 
+<span class="token keyword">import</span> shop <span class="token keyword">from</span> <span class="token string">&apos;../api/shop&apos;</span>
 
+
 
+<span class="token keyword">export</span> <span class="token keyword">const</span> getAllProducts <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> commit <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;REQUEST_PRODUCTS&apos;</span><span class="token punctuation">)</span>
 
+  shop<span class="token punctuation">.</span><span class="token function">getProducts</span><span class="token punctuation">(</span>products <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;RECEIVE_PRODUCTS&apos;</span><span class="token punctuation">,</span> products<span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// actions.spec.js</span>
 
+
 
+<span class="token comment" spellcheck="true">// utilisation de la syntaxe `require` pour les loaders.</span>
 
+<span class="token comment" spellcheck="true">// avec inject-loader, cela retourne un module de fabrique</span>
 
+<span class="token comment" spellcheck="true">// cela nous permet d&apos;injecter les d&#xE9;pendances simul&#xE9;es.</span>
 
+<span class="token keyword">import</span> <span class="token punctuation">{</span> expect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&apos;chai&apos;</span>
 
+<span class="token keyword">const</span> actionsInjector <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&apos;inject-loader!./actions&apos;</span><span class="token punctuation">)</span>
 
+
 
+<span class="token comment" spellcheck="true">// cr&#xE9;er un module avec nos simulations</span>
 
+<span class="token keyword">const</span> actions <span class="token operator">=</span> <span class="token function">actionsInjector</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+  <span class="token string">&apos;../api/shop&apos;</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    getProducts <span class="token punctuation">(</span>cb<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+        <span class="token function">cb</span><span class="token punctuation">(</span><span class="token punctuation">[</span> <span class="token comment" spellcheck="true">/* r&#xE9;ponse simul&#xE9;e */</span> <span class="token punctuation">]</span><span class="token punctuation">)</span>
 
+      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+
 
+<span class="token comment" spellcheck="true">// fonction utilitaire pour tester des actions avec les mutations attendues</span>
 
+<span class="token keyword">const</span> testAction <span class="token operator">=</span> <span class="token punctuation">(</span>action<span class="token punctuation">,</span> args<span class="token punctuation">,</span> state<span class="token punctuation">,</span> expectedMutations<span class="token punctuation">,</span> done<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  <span class="token keyword">let</span> count <span class="token operator">=</span> <span class="token number">0</span>
 
+
 
+  <span class="token comment" spellcheck="true">// acter une simulation</span>
 
+  <span class="token keyword">const</span> commit <span class="token operator">=</span> <span class="token punctuation">(</span>type<span class="token punctuation">,</span> payload<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">const</span> mutation <span class="token operator">=</span> expectedMutations<span class="token punctuation">[</span>count<span class="token punctuation">]</span>
 
+
 
+    <span class="token keyword">try</span> <span class="token punctuation">{</span>
 
+      <span class="token function">expect</span><span class="token punctuation">(</span>type<span class="token punctuation">)</span><span class="token punctuation">.</span>to<span class="token punctuation">.</span><span class="token function">equal</span><span class="token punctuation">(</span>mutation<span class="token punctuation">.</span>type<span class="token punctuation">)</span>
 
+      <span class="token keyword">if</span> <span class="token punctuation">(</span>payload<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+        <span class="token function">expect</span><span class="token punctuation">(</span>payload<span class="token punctuation">)</span><span class="token punctuation">.</span>to<span class="token punctuation">.</span>deep<span class="token punctuation">.</span><span class="token function">equal</span><span class="token punctuation">(</span>mutation<span class="token punctuation">.</span>payload<span class="token punctuation">)</span>
 
+      <span class="token punctuation">}</span>
 
+    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+      <span class="token function">done</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span>
 
+
 
+    count<span class="token operator">++</span>
 
+    <span class="token keyword">if</span> <span class="token punctuation">(</span>count <span class="token operator">&gt;=</span> expectedMutations<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+      <span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+
 
+  <span class="token comment" spellcheck="true">// appeler l&apos;action avec le store simul&#xE9; et les arguments</span>
 
+  <span class="token function">action</span><span class="token punctuation">(</span><span class="token punctuation">{</span> commit<span class="token punctuation">,</span> state <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token punctuation">)</span>
 
+
 
+  <span class="token comment" spellcheck="true">// v&#xE9;rifier qu&apos;aucune mutation n&apos;ait &#xE9;t&#xE9; propag&#xE9;e</span>
 
+  <span class="token keyword">if</span> <span class="token punctuation">(</span>expectedMutations<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token function">expect</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span><span class="token punctuation">.</span>to<span class="token punctuation">.</span><span class="token function">equal</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
 
+    <span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+
 
+<span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">&apos;actions&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">&apos;getAllProducts&apos;</span><span class="token punctuation">,</span> done <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token function">testAction</span><span class="token punctuation">(</span>actions<span class="token punctuation">.</span>getAllProducts<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>
 
+      <span class="token punctuation">{</span> type<span class="token punctuation">:</span> <span class="token string">&apos;REQUEST_PRODUCTS&apos;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+      <span class="token punctuation">{</span> type<span class="token punctuation">:</span> <span class="token string">&apos;RECEIVE_PRODUCTS&apos;</span><span class="token punctuation">,</span> payload<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* mocked response */</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
 
+    <span class="token punctuation">]</span><span class="token punctuation">,</span> done<span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<h3 id="tester-les-accesseurs">Tester les accesseurs</h3>
 
+<p>Si vos accesseurs font des calculs compliqu&#xE9;s, il peut &#xEA;tre judicieux de les tester. Les accesseurs sont &#xE9;galement tr&#xE8;s simples &#xE0; tester, pour les m&#xEA;mes raisons que les mutations.</p>
 
+<p>Exemple de test d&apos;un accesseur :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// getters.js</span>
 
+<span class="token keyword">export</span> <span class="token keyword">const</span> getters <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+  filteredProducts <span class="token punctuation">(</span>state<span class="token punctuation">,</span> <span class="token punctuation">{</span> filterCategory <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">return</span> state<span class="token punctuation">.</span>products<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>product <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+      <span class="token keyword">return</span> product<span class="token punctuation">.</span>category <span class="token operator">===</span> filterCategory
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// getters.spec.js</span>
 
+<span class="token keyword">import</span> <span class="token punctuation">{</span> expect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&apos;chai&apos;</span>
 
+<span class="token keyword">import</span> <span class="token punctuation">{</span> getters <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&apos;./getters&apos;</span>
 
+
 
+<span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">&apos;getters&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">&apos;filteredProducts&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// &#xE9;tat simul&#xE9;</span>
 
+    <span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+      products<span class="token punctuation">:</span> <span class="token punctuation">[</span>
 
+        <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token string">&apos;Apple&apos;</span><span class="token punctuation">,</span> category<span class="token punctuation">:</span> <span class="token string">&apos;fruit&apos;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+        <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token string">&apos;Orange&apos;</span><span class="token punctuation">,</span> category<span class="token punctuation">:</span> <span class="token string">&apos;fruit&apos;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+        <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token string">&apos;Carrot&apos;</span><span class="token punctuation">,</span> category<span class="token punctuation">:</span> <span class="token string">&apos;vegetable&apos;</span> <span class="token punctuation">}</span>
 
+      <span class="token punctuation">]</span>
 
+    <span class="token punctuation">}</span>
 
+    <span class="token comment" spellcheck="true">// accesseur simul&#xE9;</span>
 
+    <span class="token keyword">const</span> filterCategory <span class="token operator">=</span> <span class="token string">&apos;fruit&apos;</span>
 
+
 
+    <span class="token comment" spellcheck="true">// obtenir le r&#xE9;sultat depuis l&apos;accesseur</span>
 
+    <span class="token keyword">const</span> result <span class="token operator">=</span> getters<span class="token punctuation">.</span><span class="token function">filteredProducts</span><span class="token punctuation">(</span>state<span class="token punctuation">,</span> <span class="token punctuation">{</span> filterCategory <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+
 
+    <span class="token comment" spellcheck="true">// tester le r&#xE9;sultat</span>
 
+    <span class="token function">expect</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">.</span>to<span class="token punctuation">.</span>deep<span class="token punctuation">.</span><span class="token function">equal</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
 
+      <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token string">&apos;Apple&apos;</span><span class="token punctuation">,</span> category<span class="token punctuation">:</span> <span class="token string">&apos;fruit&apos;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+      <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token string">&apos;Orange&apos;</span><span class="token punctuation">,</span> category<span class="token punctuation">:</span> <span class="token string">&apos;fruit&apos;</span> <span class="token punctuation">}</span>
 
+    <span class="token punctuation">]</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<h3 id="lancer-les-tests">Lancer les tests</h3>
 
+<p>Si vos mutations et actions sont &#xE9;crites comme il se doit, les tests ne devraient pas avoir de d&#xE9;pendance directe sur les APIs navigateur apr&#xE8;s une simulation pr&#xE9;alable. Cela signifie que vous pouvez simplement regrouper les tests avec webpack et les lancer directement dans Node.js. De fa&#xE7;on alternative, vous pouvez utiliser <code>mocha-loader</code> ou Karma + <code>karma-webpack</code> afin d&apos;effectuer les tests dans des vrais navigateurs.</p>
 
+<h4 id="lancer-dans-nodejs">Lancer dans Node.js</h4>
 
+<p>Cr&#xE9;ez la configuration webpack suivante (ainsi que le fichier <a href="https://babeljs.io/docs/usage/babelrc/" target="_blank"><code>.babelrc</code></a> qui correspond) :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// webpack.config.js</span>
 
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+  entry<span class="token punctuation">:</span> <span class="token string">&apos;./test.js&apos;</span><span class="token punctuation">,</span>
 
+  output<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    path<span class="token punctuation">:</span> __dirname<span class="token punctuation">,</span>
 
+    filename<span class="token punctuation">:</span> <span class="token string">&apos;test-bundle.js&apos;</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    loaders<span class="token punctuation">:</span> <span class="token punctuation">[</span>
 
+      <span class="token punctuation">{</span>
 
+        test<span class="token punctuation">:</span> <span class="token regex">/\.js$/</span><span class="token punctuation">,</span>
 
+        loader<span class="token punctuation">:</span> <span class="token string">&apos;babel-loader&apos;</span><span class="token punctuation">,</span>
 
+        exclude<span class="token punctuation">:</span> <span class="token regex">/node_modules/</span>
 
+      <span class="token punctuation">}</span>
 
+    <span class="token punctuation">]</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>Puis :</p>
 
+<pre class="language-"><code class="lang-bash">webpack
 
+mocha test-bundle.js
 
+</code></pre>
 
+<h4 id="lancer-dans-un-navigateur">Lancer dans un navigateur</h4>
 
+<ol>
 
+<li>Installez <code>mocha-loader</code>.</li>
 
+<li>Changez l&apos;option <code>entry</code> de la configuration webpack ci-dessus pour <code>&apos;mocha-loader!babel-loader!./test.js&apos;</code>.</li>
 
+<li>D&#xE9;marrez <code>webpack-dev-server</code> en utilisant la configuration.</li>
 
+<li>Rendez-vous avec votre navigateur sur <code>localhost:8080/webpack-dev-server/test-bundle</code>.</li>
 
+</ol>
 
+<h4 id="lancer-dans-un-navigateur-avec-karma--karma-webpack">Lancer dans un navigateur avec Karma + karma-webpack</h4>
 
+<p>Consultez la proc&#xE9;dure sur la <a href="https://vue-loader.vuejs.org/en/workflow/testing.html" target="_blank">documentation vue-loader</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="forms.html" class="navigation navigation-prev " aria-label="Previous page: Gestion des formulaires">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="hot-reload.html" class="navigation navigation-next " aria-label="Next page: Rechargement à chaud">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Tests","level":"1.11","depth":1,"next":{"title":"Rechargement à chaud","level":"1.12","depth":1,"path":"hot-reload.md","ref":"hot-reload.md","articles":[]},"previous":{"title":"Gestion des formulaires","level":"1.10","depth":1,"path":"forms.md","ref":"forms.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":"Éditer cette 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":"fr","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"testing.md","mtime":"2018-04-20T00:44:03.861Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"fr"}});
 
+        });
 
+    </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>
 
+

BIN
gitbook/fonts/fontawesome/FontAwesome.otf
View File


BIN
gitbook/fonts/fontawesome/fontawesome-webfont.eot
View File


File diff suppressed because it is too large
+ 196 - 0
gitbook/fonts/fontawesome/fontawesome-webfont.svg


BIN
gitbook/fonts/fontawesome/fontawesome-webfont.ttf
View File


BIN
gitbook/fonts/fontawesome/fontawesome-webfont.woff
View File


BIN
gitbook/fonts/fontawesome/fontawesome-webfont.woff2
View File


+ 30 - 0
gitbook/gitbook-plugin-edit-link/plugin.js
View File 

@@ -0,0 +1,30 @@
 
+require(["gitbook", "jQuery"], function(gitbook, $) {
 
+    gitbook.events.bind('start', function (e, config) {
 
+        var conf = config['edit-link'];
 
+        var label = conf.label;
 
+        var base = conf.base;
 
+        var lang = gitbook.state.innerLanguage;
 
+        if (lang) {
 
+            // label can be a unique string for multi-languages site
 
+            if (typeof label === 'object') label = label[lang];
 
+
 
+            lang = lang + '/';
 
+        }
 
+
 
+        // Add slash at the end if not present
 
+        if (base.slice(-1) != "/") {
 
+            base = base + "/";
 
+        }
 
+
 
+        gitbook.toolbar.createButton({
 
+            icon: 'fa fa-edit',
 
+            text: label,
 
+            onClick: function() {
 
+                var filepath = gitbook.state.filepath;
 
+
 
+                window.open(base + lang + filepath);
 
+            }
 
+        });
 
+    });
 
+
 
+});

+ 14 - 0
gitbook/gitbook-plugin-github/plugin.js
View File 

@@ -0,0 +1,14 @@
 
+require([ 'gitbook' ], function (gitbook) {
 
+    gitbook.events.bind('start', function (e, config) {
 
+        var githubURL = config.github.url;
 
+
 
+        gitbook.toolbar.createButton({
 
+            icon: 'fa fa-github',
 
+            label: 'GitHub',
 
+            position: 'right',
 
+            onClick: function() {
 
+                window.open(githubURL)
 
+            }
 
+        });
 
+    });
 
+});

File diff suppressed because it is too large
+ 6 - 0
gitbook/gitbook-plugin-lunr/lunr.min.js


+ 59 - 0
gitbook/gitbook-plugin-lunr/search-lunr.js
View File 

@@ -0,0 +1,59 @@
 
+require([
 
+    'gitbook',
 
+    'jquery'
 
+], function(gitbook, $) {
 
+    // Define global search engine
 
+    function LunrSearchEngine() {
 
+        this.index = null;
 
+        this.store = {};
 
+        this.name = 'LunrSearchEngine';
 
+    }
 
+
 
+    // Initialize lunr by fetching the search index
 
+    LunrSearchEngine.prototype.init = function() {
 
+        var that = this;
 
+        var d = $.Deferred();
 
+
 
+        $.getJSON(gitbook.state.basePath+'/search_index.json')
 
+        .then(function(data) {
 
+            // eslint-disable-next-line no-undef
 
+            that.index = lunr.Index.load(data.index);
 
+            that.store = data.store;
 
+            d.resolve();
 
+        });
 
+
 
+        return d.promise();
 
+    };
 
+
 
+    // Search for a term and return results
 
+    LunrSearchEngine.prototype.search = function(q, offset, length) {
 
+        var that = this;
 
+        var results = [];
 
+
 
+        if (this.index) {
 
+            results = $.map(this.index.search(q), function(result) {
 
+                var doc = that.store[result.ref];
 
+
 
+                return {
 
+                    title: doc.title,
 
+                    url: doc.url,
 
+                    body: doc.summary || doc.body
 
+                };
 
+            });
 
+        }
 
+
 
+        return $.Deferred().resolve({
 
+            query: q,
 
+            results: results.slice(0, length),
 
+            count: results.length
 
+        }).promise();
 
+    };
 
+
 
+    // Set gitbook research
 
+    gitbook.events.bind('start', function(e, config) {
 
+        var engine = gitbook.search.getEngine();
 
+        if (!engine) {
 
+            gitbook.search.setEngine(LunrSearchEngine, config);
 
+        }
 
+    });
 
+});

+ 221 - 0
gitbook/gitbook-plugin-prism/prism-coy.css
View File 

@@ -0,0 +1,221 @@
 
+/**
 
+ * prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML
 
+ * Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics);
 
+ * @author Tim  Shedor
 
+ */
 
+
 
+code[class*="language-"],
 
+pre[class*="language-"] {
 
+	color: black;
 
+	background: none;
 
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 
+	text-align: left;
 
+	white-space: pre;
 
+	word-spacing: normal;
 
+	word-break: normal;
 
+	word-wrap: normal;
 
+	line-height: 1.5;
 
+
 
+	-moz-tab-size: 4;
 
+	-o-tab-size: 4;
 
+	tab-size: 4;
 
+
 
+	-webkit-hyphens: none;
 
+	-moz-hyphens: none;
 
+	-ms-hyphens: none;
 
+	hyphens: none;
 
+}
 
+
 
+/* Code blocks */
 
+pre[class*="language-"] {
 
+	position: relative;
 
+	margin: .5em 0;
 
+	box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
 
+	border-left: 10px solid #358ccb;
 
+	background-color: #fdfdfd;
 
+	background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
 
+	background-size: 3em 3em;
 
+	background-origin: content-box;
 
+	overflow: visible;
 
+	padding: 0;
 
+}
 
+
 
+code[class*="language"] {
 
+	max-height: inherit;
 
+	height: 100%;
 
+	padding: 0 1em;
 
+	display: block;
 
+	overflow: auto;
 
+}
 
+
 
+/* Margin bottom to accomodate shadow */
 
+:not(pre) > code[class*="language-"],
 
+pre[class*="language-"] {
 
+	background-color: #fdfdfd;
 
+	-webkit-box-sizing: border-box;
 
+	-moz-box-sizing: border-box;
 
+	box-sizing: border-box;
 
+	margin-bottom: 1em;
 
+}
 
+
 
+/* Inline code */
 
+:not(pre) > code[class*="language-"] {
 
+	position: relative;
 
+	padding: .2em;
 
+	border-radius: 0.3em;
 
+	color: #c92c2c;
 
+	border: 1px solid rgba(0, 0, 0, 0.1);
 
+	display: inline;
 
+	white-space: normal;
 
+}
 
+
 
+pre[class*="language-"]:before,
 
+pre[class*="language-"]:after {
 
+	content: '';
 
+	z-index: -2;
 
+	display: block;
 
+	position: absolute;
 
+	bottom: 0.75em;
 
+	left: 0.18em;
 
+	width: 40%;
 
+	height: 20%;
 
+	max-height: 13em;
 
+	box-shadow: 0px 13px 8px #979797;
 
+	-webkit-transform: rotate(-2deg);
 
+	-moz-transform: rotate(-2deg);
 
+	-ms-transform: rotate(-2deg);
 
+	-o-transform: rotate(-2deg);
 
+	transform: rotate(-2deg);
 
+}
 
+
 
+:not(pre) > code[class*="language-"]:after,
 
+pre[class*="language-"]:after {
 
+	right: 0.75em;
 
+	left: auto;
 
+	-webkit-transform: rotate(2deg);
 
+	-moz-transform: rotate(2deg);
 
+	-ms-transform: rotate(2deg);
 
+	-o-transform: rotate(2deg);
 
+	transform: rotate(2deg);
 
+}
 
+
 
+.token.comment,
 
+.token.block-comment,
 
+.token.prolog,
 
+.token.doctype,
 
+.token.cdata {
 
+	color: #7D8B99;
 
+}
 
+
 
+.token.punctuation {
 
+	color: #5F6364;
 
+}
 
+
 
+.token.property,
 
+.token.tag,
 
+.token.boolean,
 
+.token.number,
 
+.token.function-name,
 
+.token.constant,
 
+.token.symbol,
 
+.token.deleted {
 
+	color: #c92c2c;
 
+}
 
+
 
+.token.selector,
 
+.token.attr-name,
 
+.token.string,
 
+.token.char,
 
+.token.function,
 
+.token.builtin,
 
+.token.inserted {
 
+	color: #2f9c0a;
 
+}
 
+
 
+.token.operator,
 
+.token.entity,
 
+.token.url,
 
+.token.variable {
 
+	color: #a67f59;
 
+	background: rgba(255, 255, 255, 0.5);
 
+}
 
+
 
+.token.atrule,
 
+.token.attr-value,
 
+.token.keyword,
 
+.token.class-name {
 
+	color: #1990b8;
 
+}
 
+
 
+.token.regex,
 
+.token.important {
 
+	color: #e90;
 
+}
 
+
 
+.language-css .token.string,
 
+.style .token.string {
 
+	color: #a67f59;
 
+	background: rgba(255, 255, 255, 0.5);
 
+}
 
+
 
+.token.important {
 
+	font-weight: normal;
 
+}
 
+
 
+.token.bold {
 
+	font-weight: bold;
 
+}
 
+.token.italic {
 
+	font-style: italic;
 
+}
 
+
 
+.token.entity {
 
+	cursor: help;
 
+}
 
+
 
+.namespace {
 
+	opacity: .7;
 
+}
 
+
 
+@media screen and (max-width: 767px) {
 
+	pre[class*="language-"]:before,
 
+	pre[class*="language-"]:after {
 
+		bottom: 14px;
 
+		box-shadow: none;
 
+	}
 
+
 
+}
 
+
 
+/* Plugin styles */
 
+.token.tab:not(:empty):before,
 
+.token.cr:before,
 
+.token.lf:before {
 
+	color: #e0d7d1;
 
+}
 
+
 
+/* Plugin styles: Line Numbers */
 
+pre[class*="language-"].line-numbers {
 
+	padding-left: 0;
 
+}
 
+
 
+pre[class*="language-"].line-numbers code {
 
+	padding-left: 3.8em;
 
+}
 
+
 
+pre[class*="language-"].line-numbers .line-numbers-rows {
 
+	left: 0;
 
+}
 
+
 
+/* Plugin styles: Line Highlight */
 
+pre[class*="language-"][data-line] {
 
+	padding-top: 0;
 
+	padding-bottom: 0;
 
+	padding-left: 0;
 
+}
 
+pre[data-line] code {
 
+	position: relative;
 
+	padding-left: 4em;
 
+}
 
+pre .line-highlight {
 
+	margin-top: 0;
 
+}

+ 128 - 0
gitbook/gitbook-plugin-prism/prism-dark.css
View File 

@@ -0,0 +1,128 @@
 
+/**
 
+ * prism.js Dark theme for JavaScript, CSS and HTML
 
+ * Based on the slides of the talk “/Reg(exp){2}lained/”
 
+ * @author Lea Verou
 
+ */
 
+
 
+code[class*="language-"],
 
+pre[class*="language-"] {
 
+	color: white;
 
+	background: none;
 
+	text-shadow: 0 -.1em .2em black;
 
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 
+	text-align: left;
 
+	white-space: pre;
 
+	word-spacing: normal;
 
+	word-break: normal;
 
+	word-wrap: normal;
 
+	line-height: 1.5;
 
+
 
+	-moz-tab-size: 4;
 
+	-o-tab-size: 4;
 
+	tab-size: 4;
 
+
 
+	-webkit-hyphens: none;
 
+	-moz-hyphens: none;
 
+	-ms-hyphens: none;
 
+	hyphens: none;
 
+}
 
+
 
+@media print {
 
+	code[class*="language-"],
 
+	pre[class*="language-"] {
 
+		text-shadow: none;
 
+	}
 
+}
 
+
 
+pre[class*="language-"],
 
+:not(pre) > code[class*="language-"] {
 
+	background: hsl(30, 20%, 25%);
 
+}
 
+
 
+/* Code blocks */
 
+pre[class*="language-"] {
 
+	padding: 1em;
 
+	margin: .5em 0;
 
+	overflow: auto;
 
+	border: .3em solid hsl(30, 20%, 40%);
 
+	border-radius: .5em;
 
+	box-shadow: 1px 1px .5em black inset;
 
+}
 
+
 
+/* Inline code */
 
+:not(pre) > code[class*="language-"] {
 
+	padding: .15em .2em .05em;
 
+	border-radius: .3em;
 
+	border: .13em solid hsl(30, 20%, 40%);
 
+	box-shadow: 1px 1px .3em -.1em black inset;
 
+	white-space: normal;
 
+}
 
+
 
+.token.comment,
 
+.token.prolog,
 
+.token.doctype,
 
+.token.cdata {
 
+	color: hsl(30, 20%, 50%);
 
+}
 
+
 
+.token.punctuation {
 
+	opacity: .7;
 
+}
 
+
 
+.namespace {
 
+	opacity: .7;
 
+}
 
+
 
+.token.property,
 
+.token.tag,
 
+.token.boolean,
 
+.token.number,
 
+.token.constant,
 
+.token.symbol {
 
+	color: hsl(350, 40%, 70%);
 
+}
 
+
 
+.token.selector,
 
+.token.attr-name,
 
+.token.string,
 
+.token.char,
 
+.token.builtin,
 
+.token.inserted {
 
+	color: hsl(75, 70%, 60%);
 
+}
 
+
 
+.token.operator,
 
+.token.entity,
 
+.token.url,
 
+.language-css .token.string,
 
+.style .token.string,
 
+.token.variable {
 
+	color: hsl(40, 90%, 60%);
 
+}
 
+
 
+.token.atrule,
 
+.token.attr-value,
 
+.token.keyword {
 
+	color: hsl(350, 40%, 70%);
 
+}
 
+
 
+.token.regex,
 
+.token.important {
 
+	color: #e90;
 
+}
 
+
 
+.token.important,
 
+.token.bold {
 
+	font-weight: bold;
 
+}
 
+.token.italic {
 
+	font-style: italic;
 
+}
 
+
 
+.token.entity {
 
+	cursor: help;
 
+}
 
+
 
+.token.deleted {
 
+	color: red;
 
+}

+ 116 - 0
gitbook/gitbook-plugin-prism/prism-funky.css
View File 

@@ -0,0 +1,116 @@
 
+/**
 
+ * prism.js Funky theme
 
+ * Based on “Polyfilling the gaps” talk slides http://lea.verou.me/polyfilling-the-gaps/
 
+ * @author Lea Verou
 
+ */
 
+
 
+code[class*="language-"],
 
+pre[class*="language-"] {
 
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 
+	text-align: left;
 
+	white-space: pre;
 
+	word-spacing: normal;
 
+	word-break: normal;
 
+	word-wrap: normal;
 
+	line-height: 1.5;
 
+
 
+	-moz-tab-size: 4;
 
+	-o-tab-size: 4;
 
+	tab-size: 4;
 
+
 
+	-webkit-hyphens: none;
 
+	-moz-hyphens: none;
 
+	-ms-hyphens: none;
 
+	hyphens: none;
 
+}
 
+
 
+/* Code blocks */
 
+pre[class*="language-"] {
 
+	padding: .4em .8em;
 
+	margin: .5em 0;
 
+	overflow: auto;
 
+	background: url('data:image/svg+xml;charset=utf-8,<svg%20version%3D"1.1"%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20width%3D"100"%20height%3D"100"%20fill%3D"rgba(0%2C0%2C0%2C.2)">%0D%0A<polygon%20points%3D"0%2C50%2050%2C0%200%2C0"%20%2F>%0D%0A<polygon%20points%3D"0%2C100%2050%2C100%20100%2C50%20100%2C0"%20%2F>%0D%0A<%2Fsvg>');
 
+	background-size: 1em 1em;
 
+}
 
+
 
+code[class*="language-"] {
 
+	background: black;
 
+	color: white;
 
+	box-shadow: -.3em 0 0 .3em black, .3em 0 0 .3em black;
 
+}
 
+
 
+/* Inline code */
 
+:not(pre) > code[class*="language-"] {
 
+	padding: .2em;
 
+	border-radius: .3em;
 
+	box-shadow: none;
 
+	white-space: normal;
 
+}
 
+
 
+.token.comment,
 
+.token.prolog,
 
+.token.doctype,
 
+.token.cdata {
 
+	color: #aaa;
 
+}
 
+
 
+.token.punctuation {
 
+	color: #999;
 
+}
 
+
 
+.namespace {
 
+	opacity: .7;
 
+}
 
+
 
+.token.property,
 
+.token.tag,
 
+.token.boolean,
 
+.token.number,
 
+.token.constant,
 
+.token.symbol {
 
+	color: #0cf;
 
+}
 
+
 
+.token.selector,
 
+.token.attr-name,
 
+.token.string,
 
+.token.char,
 
+.token.builtin {
 
+	color: yellow;
 
+}
 
+
 
+.token.operator,
 
+.token.entity,
 
+.token.url,
 
+.language-css .token.string,
 
+.toke.variable,
 
+.token.inserted {
 
+	color: yellowgreen;
 
+}
 
+
 
+.token.atrule,
 
+.token.attr-value,
 
+.token.keyword {
 
+	color: deeppink;
 
+}
 
+
 
+.token.regex,
 
+.token.important {
 
+	color: orange;
 
+}
 
+
 
+.token.important,
 
+.token.bold {
 
+	font-weight: bold;
 
+}
 
+.token.italic {
 
+	font-style: italic;
 
+}
 
+
 
+.token.entity {
 
+	cursor: help;
 
+}
 
+
 
+.token.deleted {
 
+	color: red;
 
+}

+ 121 - 0
gitbook/gitbook-plugin-prism/prism-okaidia.css
View File 

@@ -0,0 +1,121 @@
 
+/**
 
+ * okaidia theme for JavaScript, CSS and HTML
 
+ * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 
+ * @author ocodia
 
+ */
 
+
 
+code[class*="language-"],
 
+pre[class*="language-"] {
 
+	color: #f8f8f2;
 
+	background: none;
 
+	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
 
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 
+	text-align: left;
 
+	white-space: pre;
 
+	word-spacing: normal;
 
+	word-break: normal;
 
+	word-wrap: normal;
 
+	line-height: 1.5;
 
+
 
+	-moz-tab-size: 4;
 
+	-o-tab-size: 4;
 
+	tab-size: 4;
 
+
 
+	-webkit-hyphens: none;
 
+	-moz-hyphens: none;
 
+	-ms-hyphens: none;
 
+	hyphens: none;
 
+}
 
+
 
+/* Code blocks */
 
+pre[class*="language-"] {
 
+	padding: 1em;
 
+	margin: .5em 0;
 
+	overflow: auto;
 
+	border-radius: 0.3em;
 
+}
 
+
 
+:not(pre) > code[class*="language-"],
 
+pre[class*="language-"] {
 
+	background: #272822;
 
+}
 
+
 
+/* Inline code */
 
+:not(pre) > code[class*="language-"] {
 
+	padding: .1em;
 
+	border-radius: .3em;
 
+	white-space: normal;
 
+}
 
+
 
+.token.comment,
 
+.token.prolog,
 
+.token.doctype,
 
+.token.cdata {
 
+	color: slategray;
 
+}
 
+
 
+.token.punctuation {
 
+	color: #f8f8f2;
 
+}
 
+
 
+.namespace {
 
+	opacity: .7;
 
+}
 
+
 
+.token.property,
 
+.token.tag,
 
+.token.constant,
 
+.token.symbol,
 
+.token.deleted {
 
+	color: #f92672;
 
+}
 
+
 
+.token.boolean,
 
+.token.number {
 
+	color: #ae81ff;
 
+}
 
+
 
+.token.selector,
 
+.token.attr-name,
 
+.token.string,
 
+.token.char,
 
+.token.builtin,
 
+.token.inserted {
 
+	color: #a6e22e;
 
+}
 
+
 
+.token.operator,
 
+.token.entity,
 
+.token.url,
 
+.language-css .token.string,
 
+.style .token.string,
 
+.token.variable {
 
+	color: #f8f8f2;
 
+}
 
+
 
+.token.atrule,
 
+.token.attr-value,
 
+.token.function {
 
+	color: #e6db74;
 
+}
 
+
 
+.token.keyword {
 
+	color: #66d9ef;
 
+}
 
+
 
+.token.regex,
 
+.token.important {
 
+	color: #fd971f;
 
+}
 
+
 
+.token.important,
 
+.token.bold {
 
+	font-weight: bold;
 
+}
 
+.token.italic {
 
+	font-style: italic;
 
+}
 
+
 
+.token.entity {
 
+	cursor: help;
 
+}

+ 148 - 0
gitbook/gitbook-plugin-prism/prism-solarizedlight.css
View File 

@@ -0,0 +1,148 @@
 
+/*
 
+ Solarized Color Schemes originally by Ethan Schoonover
 
+ http://ethanschoonover.com/solarized
 
+
 
+ Ported for PrismJS by Hector Matos
 
+ Website: https://krakendev.io
 
+ Twitter Handle: https://twitter.com/allonsykraken)
 
+*/
 
+
 
+/*
 
+SOLARIZED HEX
 
+--------- -------
 
+base03    #002b36
 
+base02    #073642
 
+base01    #586e75
 
+base00    #657b83
 
+base0     #839496
 
+base1     #93a1a1
 
+base2     #eee8d5
 
+base3     #fdf6e3
 
+yellow    #b58900
 
+orange    #cb4b16
 
+red       #dc322f
 
+magenta   #d33682
 
+violet    #6c71c4
 
+blue      #268bd2
 
+cyan      #2aa198
 
+green     #859900
 
+*/
 
+
 
+code[class*="language-"],
 
+pre[class*="language-"] {
 
+	color: #657b83; /* base00 */
 
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 
+	text-align: left;
 
+	white-space: pre;
 
+	word-spacing: normal;
 
+	word-break: normal;
 
+	word-wrap: normal;
 
+
 
+	line-height: 1.5;
 
+
 
+	-moz-tab-size: 4;
 
+	-o-tab-size: 4;
 
+	tab-size: 4;
 
+
 
+	-webkit-hyphens: none;
 
+	-moz-hyphens: none;
 
+	-ms-hyphens: none;
 
+	hyphens: none;
 
+}
 
+
 
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
 
+	background: #073642; /* base02 */
 
+}
 
+
 
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
 
+	background: #073642; /* base02 */
 
+}
 
+
 
+/* Code blocks */
 
+pre[class*="language-"] {
 
+	padding: 1em;
 
+	margin: .5em 0;
 
+	overflow: auto;
 
+	border-radius: 0.3em;
 
+}
 
+
 
+:not(pre) > code[class*="language-"],
 
+pre[class*="language-"] {
 
+	background-color: #fdf6e3; /* base3 */
 
+}
 
+
 
+/* Inline code */
 
+:not(pre) > code[class*="language-"] {
 
+	padding: .1em;
 
+	border-radius: .3em;
 
+}
 
+
 
+.token.comment,
 
+.token.prolog,
 
+.token.doctype,
 
+.token.cdata {
 
+	color: #93a1a1; /* base1 */
 
+}
 
+
 
+.token.punctuation {
 
+	color: #586e75; /* base01 */
 
+}
 
+
 
+.namespace {
 
+	opacity: .7;
 
+}
 
+
 
+.token.property,
 
+.token.tag,
 
+.token.boolean,
 
+.token.number,
 
+.token.constant,
 
+.token.symbol,
 
+.token.deleted {
 
+	color: #268bd2; /* blue */
 
+}
 
+
 
+.token.selector,
 
+.token.attr-name,
 
+.token.string,
 
+.token.char,
 
+.token.builtin,
 
+.token.url,
 
+.token.inserted {
 
+	color: #2aa198; /* cyan */
 
+}
 
+
 
+.token.entity {
 
+	color: #657b83; /* base00 */
 
+	background: #eee8d5; /* base2 */
 
+}
 
+
 
+.token.atrule,
 
+.token.attr-value,
 
+.token.keyword {
 
+	color: #859900; /* green */
 
+}
 
+
 
+.token.function {
 
+	color: #b58900; /* yellow */
 
+}
 
+
 
+.token.regex,
 
+.token.important,
 
+.token.variable {
 
+	color: #cb4b16; /* orange */
 
+}
 
+
 
+.token.important,
 
+.token.bold {
 
+	font-weight: bold;
 
+}
 
+.token.italic {
 
+	font-style: italic;
 
+}
 
+
 
+.token.entity {
 
+	cursor: help;
 
+}

+ 121 - 0
gitbook/gitbook-plugin-prism/prism-tomorrow.css
View File 

@@ -0,0 +1,121 @@
 
+/**
 
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
 
+ * Based on https://github.com/chriskempson/tomorrow-theme
 
+ * @author Rose Pritchard
 
+ */
 
+
 
+code[class*="language-"],
 
+pre[class*="language-"] {
 
+	color: #ccc;
 
+	background: none;
 
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 
+	text-align: left;
 
+	white-space: pre;
 
+	word-spacing: normal;
 
+	word-break: normal;
 
+	word-wrap: normal;
 
+	line-height: 1.5;
 
+
 
+	-moz-tab-size: 4;
 
+	-o-tab-size: 4;
 
+	tab-size: 4;
 
+
 
+	-webkit-hyphens: none;
 
+	-moz-hyphens: none;
 
+	-ms-hyphens: none;
 
+	hyphens: none;
 
+
 
+}
 
+
 
+/* Code blocks */
 
+pre[class*="language-"] {
 
+	padding: 1em;
 
+	margin: .5em 0;
 
+	overflow: auto;
 
+}
 
+
 
+:not(pre) > code[class*="language-"],
 
+pre[class*="language-"] {
 
+	background: #2d2d2d;
 
+}
 
+
 
+/* Inline code */
 
+:not(pre) > code[class*="language-"] {
 
+	padding: .1em;
 
+	border-radius: .3em;
 
+	white-space: normal;
 
+}
 
+
 
+.token.comment,
 
+.token.block-comment,
 
+.token.prolog,
 
+.token.doctype,
 
+.token.cdata {
 
+	color: #999;
 
+}
 
+
 
+.token.punctuation {
 
+	color: #ccc;
 
+}
 
+
 
+.token.tag,
 
+.token.attr-name,
 
+.token.namespace,
 
+.token.deleted {
 
+	color: #e2777a;
 
+}
 
+
 
+.token.function-name {
 
+	color: #6196cc;
 
+}
 
+
 
+.token.boolean,
 
+.token.number,
 
+.token.function {
 
+	color: #f08d49;
 
+}
 
+
 
+.token.property,
 
+.token.class-name,
 
+.token.constant,
 
+.token.symbol {
 
+	color: #f8c555;
 
+}
 
+
 
+.token.selector,
 
+.token.important,
 
+.token.atrule,
 
+.token.keyword,
 
+.token.builtin {
 
+	color: #cc99cd;
 
+}
 
+
 
+.token.string,
 
+.token.char,
 
+.token.attr-value,
 
+.token.regex,
 
+.token.variable {
 
+	color: #7ec699;
 
+}
 
+
 
+.token.operator,
 
+.token.entity,
 
+.token.url {
 
+	color: #67cdcc;
 
+}
 
+
 
+.token.important,
 
+.token.bold {
 
+	font-weight: bold;
 
+}
 
+.token.italic {
 
+	font-style: italic;
 
+}
 
+
 
+.token.entity {
 
+	cursor: help;
 
+}
 
+
 
+.token.inserted {
 
+	color: green;
 
+}

+ 198 - 0
gitbook/gitbook-plugin-prism/prism-twilight.css
View File 

@@ -0,0 +1,198 @@
 
+/**
 
+ * prism.js Twilight theme
 
+ * Based (more or less) on the Twilight theme originally of Textmate fame.
 
+ * @author Remy Bach
 
+ */
 
+code[class*="language-"],
 
+pre[class*="language-"] {
 
+	color: white;
 
+	background: none;
 
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 
+	text-align: left;
 
+	text-shadow: 0 -.1em .2em black;
 
+	white-space: pre;
 
+	word-spacing: normal;
 
+	word-break: normal;
 
+	word-wrap: normal;
 
+	line-height: 1.5;
 
+
 
+	-moz-tab-size: 4;
 
+	-o-tab-size: 4;
 
+	tab-size: 4;
 
+
 
+	-webkit-hyphens: none;
 
+	-moz-hyphens: none;
 
+	-ms-hyphens: none;
 
+	hyphens: none;
 
+}
 
+
 
+pre[class*="language-"],
 
+:not(pre) > code[class*="language-"] {
 
+	background: hsl(0, 0%, 8%); /* #141414 */
 
+}
 
+
 
+/* Code blocks */
 
+pre[class*="language-"] {
 
+	border-radius: .5em;
 
+	border: .3em solid hsl(0, 0%, 33%); /* #282A2B */
 
+	box-shadow: 1px 1px .5em black inset;
 
+	margin: .5em 0;
 
+	overflow: auto;
 
+	padding: 1em;
 
+}
 
+
 
+pre[class*="language-"]::-moz-selection {
 
+	/* Firefox */
 
+	background: hsl(200, 4%, 16%); /* #282A2B */
 
+}
 
+
 
+pre[class*="language-"]::selection {
 
+	/* Safari */
 
+	background: hsl(200, 4%, 16%); /* #282A2B */
 
+}
 
+
 
+/* Text Selection colour */
 
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
 
+	text-shadow: none;
 
+	background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */
 
+}
 
+
 
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
 
+	text-shadow: none;
 
+	background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */
 
+}
 
+
 
+/* Inline code */
 
+:not(pre) > code[class*="language-"] {
 
+	border-radius: .3em;
 
+	border: .13em solid hsl(0, 0%, 33%); /* #545454 */
 
+	box-shadow: 1px 1px .3em -.1em black inset;
 
+	padding: .15em .2em .05em;
 
+	white-space: normal;
 
+}
 
+
 
+.token.comment,
 
+.token.prolog,
 
+.token.doctype,
 
+.token.cdata {
 
+	color: hsl(0, 0%, 47%); /* #777777 */
 
+}
 
+
 
+.token.punctuation {
 
+	opacity: .7;
 
+}
 
+
 
+.namespace {
 
+	opacity: .7;
 
+}
 
+
 
+.token.tag,
 
+.token.boolean,
 
+.token.number,
 
+.token.deleted {
 
+	color: hsl(14, 58%, 55%); /* #CF6A4C */
 
+}
 
+
 
+.token.keyword,
 
+.token.property,
 
+.token.selector,
 
+.token.constant,
 
+.token.symbol,
 
+.token.builtin {
 
+	color: hsl(53, 89%, 79%); /* #F9EE98 */
 
+}
 
+
 
+.token.attr-name,
 
+.token.attr-value,
 
+.token.string,
 
+.token.char,
 
+.token.operator,
 
+.token.entity,
 
+.token.url,
 
+.language-css .token.string,
 
+.style .token.string,
 
+.token.variable,
 
+.token.inserted {
 
+	color: hsl(76, 21%, 52%); /* #8F9D6A */
 
+}
 
+
 
+.token.atrule {
 
+	color: hsl(218, 22%, 55%); /* #7587A6 */
 
+}
 
+
 
+.token.regex,
 
+.token.important {
 
+	color: hsl(42, 75%, 65%); /* #E9C062 */
 
+}
 
+
 
+.token.important,
 
+.token.bold {
 
+	font-weight: bold;
 
+}
 
+.token.italic {
 
+	font-style: italic;
 
+}
 
+
 
+.token.entity {
 
+	cursor: help;
 
+}
 
+
 
+pre[data-line] {
 
+	padding: 1em 0 1em 3em;
 
+	position: relative;
 
+}
 
+
 
+/* Markup */
 
+.language-markup .token.tag,
 
+.language-markup .token.attr-name,
 
+.language-markup .token.punctuation {
 
+	color: hsl(33, 33%, 52%); /* #AC885B */
 
+}
 
+
 
+/* Make the tokens sit above the line highlight so the colours don't look faded. */
 
+.token {
 
+	position: relative;
 
+	z-index: 1;
 
+}
 
+
 
+.line-highlight {
 
+	background: hsla(0, 0%, 33%, 0.25); /* #545454 */
 
+	background: linear-gradient(to right, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */
 
+	border-bottom: 1px dashed hsl(0, 0%, 33%); /* #545454 */
 
+	border-top: 1px dashed hsl(0, 0%, 33%); /* #545454 */
 
+	left: 0;
 
+	line-height: inherit;
 
+	margin-top: 0.75em; /* Same as .prism’s padding-top */
 
+	padding: inherit 0;
 
+	pointer-events: none;
 
+	position: absolute;
 
+	right: 0;
 
+	white-space: pre;
 
+	z-index: 0;
 
+}
 
+
 
+.line-highlight:before,
 
+.line-highlight[data-end]:after {
 
+	background-color: hsl(215, 15%, 59%); /* #8794A6 */
 
+	border-radius: 999px;
 
+	box-shadow: 0 1px white;
 
+	color: hsl(24, 20%, 95%); /* #F5F2F0 */
 
+	content: attr(data-start);
 
+	font: bold 65%/1.5 sans-serif;
 
+	left: .6em;
 
+	min-width: 1em;
 
+	padding: 0 .5em;
 
+	position: absolute;
 
+	text-align: center;
 
+	text-shadow: none;
 
+	top: .4em;
 
+	vertical-align: .3em;
 
+}
 
+
 
+.line-highlight[data-end]:after {
 
+	bottom: .4em;
 
+	content: attr(data-end);
 
+	top: auto;
 
+}

+ 137 - 0
gitbook/gitbook-plugin-prism/prism.css
View File 

@@ -0,0 +1,137 @@
 
+/**
 
+ * prism.js default theme for JavaScript, CSS and HTML
 
+ * Based on dabblet (http://dabblet.com)
 
+ * @author Lea Verou
 
+ */
 
+
 
+code[class*="language-"],
 
+pre[class*="language-"] {
 
+	color: black;
 
+	background: none;
 
+	text-shadow: 0 1px white;
 
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 
+	text-align: left;
 
+	white-space: pre;
 
+	word-spacing: normal;
 
+	word-break: normal;
 
+	word-wrap: normal;
 
+	line-height: 1.5;
 
+
 
+	-moz-tab-size: 4;
 
+	-o-tab-size: 4;
 
+	tab-size: 4;
 
+
 
+	-webkit-hyphens: none;
 
+	-moz-hyphens: none;
 
+	-ms-hyphens: none;
 
+	hyphens: none;
 
+}
 
+
 
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
 
+	text-shadow: none;
 
+	background: #b3d4fc;
 
+}
 
+
 
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
 
+	text-shadow: none;
 
+	background: #b3d4fc;
 
+}
 
+
 
+@media print {
 
+	code[class*="language-"],
 
+	pre[class*="language-"] {
 
+		text-shadow: none;
 
+	}
 
+}
 
+
 
+/* Code blocks */
 
+pre[class*="language-"] {
 
+	padding: 1em;
 
+	margin: .5em 0;
 
+	overflow: auto;
 
+}
 
+
 
+:not(pre) > code[class*="language-"],
 
+pre[class*="language-"] {
 
+	background: #f5f2f0;
 
+}
 
+
 
+/* Inline code */
 
+:not(pre) > code[class*="language-"] {
 
+	padding: .1em;
 
+	border-radius: .3em;
 
+	white-space: normal;
 
+}
 
+
 
+.token.comment,
 
+.token.prolog,
 
+.token.doctype,
 
+.token.cdata {
 
+	color: slategray;
 
+}
 
+
 
+.token.punctuation {
 
+	color: #999;
 
+}
 
+
 
+.namespace {
 
+	opacity: .7;
 
+}
 
+
 
+.token.property,
 
+.token.tag,
 
+.token.boolean,
 
+.token.number,
 
+.token.constant,
 
+.token.symbol,
 
+.token.deleted {
 
+	color: #905;
 
+}
 
+
 
+.token.selector,
 
+.token.attr-name,
 
+.token.string,
 
+.token.char,
 
+.token.builtin,
 
+.token.inserted {
 
+	color: #690;
 
+}
 
+
 
+.token.operator,
 
+.token.entity,
 
+.token.url,
 
+.language-css .token.string,
 
+.style .token.string {
 
+	color: #a67f59;
 
+	background: hsla(0, 0%, 100%, .5);
 
+}
 
+
 
+.token.atrule,
 
+.token.attr-value,
 
+.token.keyword {
 
+	color: #07a;
 
+}
 
+
 
+.token.function {
 
+	color: #DD4A68;
 
+}
 
+
 
+.token.regex,
 
+.token.important,
 
+.token.variable {
 
+	color: #e90;
 
+}
 
+
 
+.token.important,
 
+.token.bold {
 
+	font-weight: bold;
 
+}
 
+.token.italic {
 
+	font-style: italic;
 
+}
 
+
 
+.token.entity {
 
+	cursor: help;
 
+}

File diff suppressed because it is too large
+ 6 - 0
gitbook/gitbook-plugin-search/lunr.min.js


+ 50 - 0
gitbook/gitbook-plugin-search/search-engine.js
View File 

@@ -0,0 +1,50 @@
 
+require([
 
+    'gitbook',
 
+    'jquery'
 
+], function(gitbook, $) {
 
+    // Global search objects
 
+    var engine      = null;
 
+    var initialized = false;
 
+
 
+    // Set a new search engine
 
+    function setEngine(Engine, config) {
 
+        initialized = false;
 
+        engine      = new Engine(config);
 
+
 
+        init(config);
 
+    }
 
+
 
+    // Initialize search engine with config
 
+    function init(config) {
 
+        if (!engine) throw new Error('No engine set for research. Set an engine using gitbook.research.setEngine(Engine).');
 
+
 
+        return engine.init(config)
 
+        .then(function() {
 
+            initialized = true;
 
+            gitbook.events.trigger('search.ready');
 
+        });
 
+    }
 
+
 
+    // Launch search for query q
 
+    function query(q, offset, length) {
 
+        if (!initialized) throw new Error('Search has not been initialized');
 
+        return engine.search(q, offset, length);
 
+    }
 
+
 
+    // Get stats about search
 
+    function getEngine() {
 
+        return engine? engine.name : null;
 
+    }
 
+
 
+    function isInitialized() {
 
+        return initialized;
 
+    }
 
+
 
+    // Initialize gitbook.search
 
+    gitbook.search = {
 
+        setEngine:     setEngine,
 
+        getEngine:     getEngine,
 
+        query:         query,
 
+        isInitialized: isInitialized
 
+    };
 
+});

+ 35 - 0
gitbook/gitbook-plugin-search/search.css
View File 

@@ -0,0 +1,35 @@
 
+/*
 
+    This CSS only styled the search results section, not the search input
 
+    It defines the basic interraction to hide content when displaying results, etc
 
+*/
 
+#book-search-results .search-results {
 
+  display: none;
 
+}
 
+#book-search-results .search-results ul.search-results-list {
 
+  list-style-type: none;
 
+  padding-left: 0;
 
+}
 
+#book-search-results .search-results ul.search-results-list li {
 
+  margin-bottom: 1.5rem;
 
+  padding-bottom: 0.5rem;
 
+  /* Highlight results */
 
+}
 
+#book-search-results .search-results ul.search-results-list li p em {
 
+  background-color: rgba(255, 220, 0, 0.4);
 
+  font-style: normal;
 
+}
 
+#book-search-results .search-results .no-results {
 
+  display: none;
 
+}
 
+#book-search-results.open .search-results {
 
+  display: block;
 
+}
 
+#book-search-results.open .search-noresults {
 
+  display: none;
 
+}
 
+#book-search-results.no-results .search-results .has-results {
 
+  display: none;
 
+}
 
+#book-search-results.no-results .search-results .no-results {
 
+  display: block;
 
+}

+ 213 - 0
gitbook/gitbook-plugin-search/search.js
View File 

@@ -0,0 +1,213 @@
 
+require([
 
+    'gitbook',
 
+    'jquery'
 
+], function(gitbook, $) {
 
+    var MAX_RESULTS = 15;
 
+    var MAX_DESCRIPTION_SIZE = 500;
 
+
 
+    var usePushState = (typeof history.pushState !== 'undefined');
 
+
 
+    // DOM Elements
 
+    var $body = $('body');
 
+    var $bookSearchResults;
 
+    var $searchInput;
 
+    var $searchList;
 
+    var $searchTitle;
 
+    var $searchResultsCount;
 
+    var $searchQuery;
 
+
 
+    // Throttle search
 
+    function throttle(fn, wait) {
 
+        var timeout;
 
+
 
+        return function() {
 
+            var ctx = this, args = arguments;
 
+            if (!timeout) {
 
+                timeout = setTimeout(function() {
 
+                    timeout = null;
 
+                    fn.apply(ctx, args);
 
+                }, wait);
 
+            }
 
+        };
 
+    }
 
+
 
+    function displayResults(res) {
 
+        $bookSearchResults.addClass('open');
 
+
 
+        var noResults = res.count == 0;
 
+        $bookSearchResults.toggleClass('no-results', noResults);
 
+
 
+        // Clear old results
 
+        $searchList.empty();
 
+
 
+        // Display title for research
 
+        $searchResultsCount.text(res.count);
 
+        $searchQuery.text(res.query);
 
+
 
+        // Create an <li> element for each result
 
+        res.results.forEach(function(res) {
 
+            var $li = $('<li>', {
 
+                'class': 'search-results-item'
 
+            });
 
+
 
+            var $title = $('<h3>');
 
+
 
+            var $link = $('<a>', {
 
+                'href': gitbook.state.basePath + '/' + res.url,
 
+                'text': res.title
 
+            });
 
+
 
+            var content = res.body.trim();
 
+            if (content.length > MAX_DESCRIPTION_SIZE) {
 
+                content = content.slice(0, MAX_DESCRIPTION_SIZE).trim()+'...';
 
+            }
 
+            var $content = $('<p>').html(content);
 
+
 
+            $link.appendTo($title);
 
+            $title.appendTo($li);
 
+            $content.appendTo($li);
 
+            $li.appendTo($searchList);
 
+        });
 
+    }
 
+
 
+    function launchSearch(q) {
 
+        // Add class for loading
 
+        $body.addClass('with-search');
 
+        $body.addClass('search-loading');
 
+
 
+        // Launch search query
 
+        throttle(gitbook.search.query(q, 0, MAX_RESULTS)
 
+        .then(function(results) {
 
+            displayResults(results);
 
+        })
 
+        .always(function() {
 
+            $body.removeClass('search-loading');
 
+        }), 1000);
 
+    }
 
+
 
+    function closeSearch() {
 
+        $body.removeClass('with-search');
 
+        $bookSearchResults.removeClass('open');
 
+    }
 
+
 
+    function launchSearchFromQueryString() {
 
+        var q = getParameterByName('q');
 
+        if (q && q.length > 0) {
 
+            // Update search input
 
+            $searchInput.val(q);
 
+
 
+            // Launch search
 
+            launchSearch(q);
 
+        }
 
+    }
 
+
 
+    function bindSearch() {
 
+        // Bind DOM
 
+        $searchInput        = $('#book-search-input input');
 
+        $bookSearchResults  = $('#book-search-results');
 
+        $searchList         = $bookSearchResults.find('.search-results-list');
 
+        $searchTitle        = $bookSearchResults.find('.search-results-title');
 
+        $searchResultsCount = $searchTitle.find('.search-results-count');
 
+        $searchQuery        = $searchTitle.find('.search-query');
 
+
 
+        // Launch query based on input content
 
+        function handleUpdate() {
 
+            var q = $searchInput.val();
 
+
 
+            if (q.length == 0) {
 
+                closeSearch();
 
+            }
 
+            else {
 
+                launchSearch(q);
 
+            }
 
+        }
 
+
 
+        // Detect true content change in search input
 
+        // Workaround for IE < 9
 
+        var propertyChangeUnbound = false;
 
+        $searchInput.on('propertychange', function(e) {
 
+            if (e.originalEvent.propertyName == 'value') {
 
+                handleUpdate();
 
+            }
 
+        });
 
+
 
+        // HTML5 (IE9 & others)
 
+        $searchInput.on('input', function(e) {
 
+            // Unbind propertychange event for IE9+
 
+            if (!propertyChangeUnbound) {
 
+                $(this).unbind('propertychange');
 
+                propertyChangeUnbound = true;
 
+            }
 
+
 
+            handleUpdate();
 
+        });
 
+
 
+        // Push to history on blur
 
+        $searchInput.on('blur', function(e) {
 
+            // Update history state
 
+            if (usePushState) {
 
+                var uri = updateQueryString('q', $(this).val());
 
+                history.pushState({ path: uri }, null, uri);
 
+            }
 
+        });
 
+    }
 
+
 
+    gitbook.events.on('page.change', function() {
 
+        bindSearch();
 
+        closeSearch();
 
+
 
+        // Launch search based on query parameter
 
+        if (gitbook.search.isInitialized()) {
 
+            launchSearchFromQueryString();
 
+        }
 
+    });
 
+
 
+    gitbook.events.on('search.ready', function() {
 
+        bindSearch();
 
+
 
+        // Launch search from query param at start
 
+        launchSearchFromQueryString();
 
+    });
 
+
 
+    function getParameterByName(name) {
 
+        var url = window.location.href;
 
+        name = name.replace(/[\[\]]/g, '\\$&');
 
+        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)', 'i'),
 
+            results = regex.exec(url);
 
+        if (!results) return null;
 
+        if (!results[2]) return '';
 
+        return decodeURIComponent(results[2].replace(/\+/g, ' '));
 
+    }
 
+
 
+    function updateQueryString(key, value) {
 
+        value = encodeURIComponent(value);
 
+
 
+        var url = window.location.href;
 
+        var re = new RegExp('([?&])' + key + '=.*?(&|#|$)(.*)', 'gi'),
 
+            hash;
 
+
 
+        if (re.test(url)) {
 
+            if (typeof value !== 'undefined' && value !== null)
 
+                return url.replace(re, '$1' + key + '=' + value + '$2$3');
 
+            else {
 
+                hash = url.split('#');
 
+                url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
 
+                if (typeof hash[1] !== 'undefined' && hash[1] !== null)
 
+                    url += '#' + hash[1];
 
+                return url;
 
+            }
 
+        }
 
+        else {
 
+            if (typeof value !== 'undefined' && value !== null) {
 
+                var separator = url.indexOf('?') !== -1 ? '&' : '?';
 
+                hash = url.split('#');
 
+                url = hash[0] + separator + key + '=' + value;
 
+                if (typeof hash[1] !== 'undefined' && hash[1] !== null)
 
+                    url += '#' + hash[1];
 
+                return url;
 
+            }
 
+            else
 
+                return url;
 
+        }
 
+    }
 
+});

+ 90 - 0
gitbook/gitbook-plugin-sharing/buttons.js
View File 

@@ -0,0 +1,90 @@
 
+require(['gitbook', 'jquery'], function(gitbook, $) {
 
+    var SITES = {
 
+        'facebook': {
 
+            'label': 'Facebook',
 
+            'icon': 'fa fa-facebook',
 
+            'onClick': function(e) {
 
+                e.preventDefault();
 
+                window.open('http://www.facebook.com/sharer/sharer.php?s=100&p[url]='+encodeURIComponent(location.href));
 
+            }
 
+        },
 
+        'twitter': {
 
+            'label': 'Twitter',
 
+            'icon': 'fa fa-twitter',
 
+            'onClick': function(e) {
 
+                e.preventDefault();
 
+                window.open('http://twitter.com/home?status='+encodeURIComponent(document.title+' '+location.href));
 
+            }
 
+        },
 
+        'google': {
 
+            'label': 'Google+',
 
+            'icon': 'fa fa-google-plus',
 
+            'onClick': function(e) {
 
+                e.preventDefault();
 
+                window.open('https://plus.google.com/share?url='+encodeURIComponent(location.href));
 
+            }
 
+        },
 
+        'weibo': {
 
+            'label': 'Weibo',
 
+            'icon': 'fa fa-weibo',
 
+            'onClick': function(e) {
 
+                e.preventDefault();
 
+                window.open('http://service.weibo.com/share/share.php?content=utf-8&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title));
 
+            }
 
+        },
 
+        'instapaper': {
 
+            'label': 'Instapaper',
 
+            'icon': 'fa fa-instapaper',
 
+            'onClick': function(e) {
 
+                e.preventDefault();
 
+                window.open('http://www.instapaper.com/text?u='+encodeURIComponent(location.href));
 
+            }
 
+        },
 
+        'vk': {
 
+            'label': 'VK',
 
+            'icon': 'fa fa-vk',
 
+            'onClick': function(e) {
 
+                e.preventDefault();
 
+                window.open('http://vkontakte.ru/share.php?url='+encodeURIComponent(location.href));
 
+            }
 
+        }
 
+    };
 
+
 
+
 
+
 
+    gitbook.events.bind('start', function(e, config) {
 
+        var opts = config.sharing;
 
+
 
+        // Create dropdown menu
 
+        var menu = $.map(opts.all, function(id) {
 
+            var site = SITES[id];
 
+
 
+            return {
 
+                text: site.label,
 
+                onClick: site.onClick
 
+            };
 
+        });
 
+
 
+        // Create main button with dropdown
 
+        if (menu.length > 0) {
 
+            gitbook.toolbar.createButton({
 
+                icon: 'fa fa-share-alt',
 
+                label: 'Share',
 
+                position: 'right',
 
+                dropdown: [menu]
 
+            });
 
+        }
 
+
 
+        // Direct actions to share
 
+        $.each(SITES, function(sideId, site) {
 
+            if (!opts[sideId]) return;
 
+
 
+            gitbook.toolbar.createButton({
 
+                icon: site.icon,
 
+                label: site.text,
 
+                position: 'right',
 
+                onClick: site.onClick
 
+            });
 
+        });
 
+    });
 
+});

+ 291 - 0
gitbook/gitbook-plugin-theme-vuejs/vue.css
View File 

@@ -0,0 +1,291 @@
 
+@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600');
 
+
 
+body {
 
+  letter-spacing: 0;
 
+  color: #34495e;
 
+  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
 
+  font-size: 15px;
 
+  -webkit-font-smoothing: antialiased;
 
+  -moz-osx-font-smoothing: grayscale;
 
+  color: #34495e;
 
+  background-color: #fff;
 
+  margin: 0;
 
+}
 
+
 
+/* LANGS.md index page */
 
+.book-langs-index {
 
+  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
 
+}
 
+.book-langs-index .inner .languages {
 
+  padding: 20px 0px;
 
+}
 
+.book-langs-index .inner .languages li {
 
+  float: none;
 
+}
 
+li a {
 
+  color: #42b983;
 
+  font-weight: 600;
 
+}
 
+
 
+/* set correct fonts on sidebar and main page */
 
+.book .book-body .page-wrapper .page-inner section.normal, .book-summary { font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; }
 
+
 
+/* sidebar */
 
+.book-summary ul.summary li a,
 
+.book-summary ul.summary li span {
 
+  color: #7f8c8d;
 
+  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
 
+}
 
+.book .book-summary ul.summary li span {
 
+  opacity: 0.6;
 
+  cursor: not-allowed;
 
+}
 
+.book-summary ul.summary li.active>a {
 
+  color: #42b983;
 
+  font-weight: 600;
 
+}
 
+#book-search-input { background-color: #fafafa; }
 
+.book-summary { background-color: #fff; }
 
+
 
+/* markdown content found on pages */
 
+.markdown-section h1,
 
+.markdown-section h2,
 
+.markdown-section h3,
 
+.markdown-section h4,
 
+.markdown-section strong {
 
+  font-weight: 600;
 
+  color: #2c3e50;
 
+}
 
+.markdown-section a {
 
+  color: #42b983;
 
+  font-weight: 600;
 
+}
 
+.markdown-section p,
 
+.markdown-section ul,
 
+.markdown-section ol {
 
+  word-spacing: 0.05em;
 
+}
 
+.markdown-section em {
 
+  color: #7f8c8d;
 
+}
 
+
 
+.markdown-section pre {
 
+  padding: 1.2em 1.4em;
 
+  line-height: 1.5em;
 
+  margin: 0;
 
+}
 
+
 
+.markdown-section code, .markdown-section pre {
 
+  font-family: 'Roboto Mono', Monaco, courier, monospace;
 
+  -webkit-font-smoothing: initial;
 
+  -moz-osx-font-smoothing: initial;
 
+  background-color: #f8f8f8;
 
+}
 
+code span.css,
 
+code span.javascript,
 
+code span.html,
 
+span[class^="hljs-"] {
 
+  -webkit-font-smoothing: initial;
 
+  -moz-osx-font-smoothing: initial;
 
+}
 
+.markdown-section pre>code {
 
+  font-size: 0.8em;
 
+  display: block;
 
+}
 
+.markdown-section code:after, .markdown-section code:before {
 
+  content: none;
 
+  letter-spacing: 0.05em;
 
+}
 
+
 
+code, pre {
 
+  font-family: 'Roboto Mono', Monaco, courier, monospace;
 
+  font-size: 0.8em;
 
+  background-color: #f8f8f8;
 
+  -webkit-font-smoothing: initial;
 
+  -moz-osx-font-smoothing: initial;
 
+}
 
+code {
 
+  color: #e96900;
 
+  padding: 3px 5px;
 
+  margin: 0 2px;
 
+  border-radius: 2px;
 
+  white-space: nowrap;
 
+}
 
+
 
+code .token {
 
+  min-height: 1.5em;
 
+  -webkit-font-smoothing: initial;
 
+  -moz-osx-font-smoothing: initial;
 
+}
 
+pre code { position: relative; }
 
+pre code.lang-html:after,
 
+pre code.lang-js:after,
 
+pre code.lang-bash:after,
 
+pre code.lang-css:after {
 
+  position: absolute;
 
+  top: 0;
 
+  right: 0;
 
+  color: #ccc;
 
+  text-align: right;
 
+  font-size: 0.75em;
 
+  padding: 5px 10px 0;
 
+  line-height: 15px;
 
+  height: 15px;
 
+  font-weight: 600;
 
+}
 
+pre code.lang-html:after {
 
+  content: 'HTML';
 
+}
 
+pre code.lang-js:after {
 
+  content: 'JS';
 
+}
 
+pre code.lang-bash:after {
 
+  content: 'Shell';
 
+}
 
+pre code.lang-css:after {
 
+  content: 'CSS';
 
+}
 
+.content img {
 
+  max-width: 100%;
 
+}
 
+.content span.light {
 
+  color: #7f8c8d;
 
+}
 
+.content span.info {
 
+  font-size: 0.85em;
 
+  display: inline-block;
 
+  vertical-align: middle;
 
+  width: 280px;
 
+  margin-left: 20px;
 
+}
 
+.markdown-section h1 {
 
+  margin: 0 0 1em;
 
+}
 
+.markdown-section h2 {
 
+  margin: 45px 0 0.8em;
 
+  padding-bottom: 0.7em;
 
+  border-bottom: 1px solid #ddd;
 
+}
 
+.markdown-section h3 {
 
+  margin: 52px 0 1.2em;
 
+}
 
+.markdown-section figure,
 
+.markdown-section p,
 
+.markdown-section ul,
 
+.markdown-section ol {
 
+  margin: 1.2em 0;
 
+}
 
+.markdown-section p,
 
+.markdown-section ul,
 
+.markdown-section ol {
 
+  line-height: 1.6em;
 
+}
 
+.markdown-section ul,
 
+.markdown-section ol {
 
+  padding-left: 1.5em;
 
+}
 
+.markdown-section a {
 
+  color: #42b983;
 
+  font-weight: 600;
 
+}
 
+.markdown-section blockquote {
 
+  margin: 2em 0;
 
+  padding-left: 20px;
 
+  border-left: 4px solid #42b983;
 
+}
 
+.markdown-section blockquote p {
 
+  font-weight: 600;
 
+  margin-left: 0;
 
+}
 
+.markdown-section iframe {
 
+  margin: 1em 0;
 
+}
 
+
 
+/* these aren't in gitbook at the moment, but leaving them in for future reference */
 
+img {
 
+  border: none;
 
+}
 
+.highlight {
 
+  overflow-x: auto;
 
+  position: relative;
 
+  padding: 0;
 
+  background-color: #f8f8f8;
 
+  padding: 0.8em 0.8em 0.4em;
 
+  line-height: 1.1em;
 
+  border-radius: 2px;
 
+}
 
+.highlight table,
 
+.highlight tr,
 
+.highlight td {
 
+  width: 100%;
 
+  border-collapse: collapse;
 
+  padding: 0;
 
+  margin: 0;
 
+}
 
+.highlight .gutter {
 
+  width: 1.5em;
 
+}
 
+
 
+/* ads */
 
+#carbonads {
 
+  height: 100px;
 
+  margin: 15px;
 
+  font-size: 13px;
 
+}
 
+#carbonads .carbon-img {
 
+  float: left;
 
+  margin-right: 10px;
 
+}
 
+#carbonads .carbon-text {
 
+  color: #444;
 
+}
 
+#carbonads .carbon-poweredby {
 
+  color: #999;
 
+  display: block;
 
+  margin-top: 5px;
 
+}
 
+
 
+.bsa-cpc {
 
+  font-size: .9em;
 
+  background-color: #f8f8f8;
 
+  max-width: 770px;
 
+  margin: 0px auto;
 
+}
 
+.bsa-cpc a._default_ {
 
+  text-align: left;
 
+  display: block;
 
+  padding: 10px 15px 12px;
 
+  margin-bottom: 20px;
 
+  color: #666;
 
+  font-weight: 400;
 
+  line-height: 18px;
 
+}
 
+.bsa-cpc a._default_ .default-image,
 
+.bsa-cpc a._default_ .default-title,
 
+.bsa-cpc a._default_ .default-description {
 
+  display: inline;
 
+  vertical-align: middle;
 
+  margin-right: 6px;
 
+}
 
+.bsa-cpc a._default_ .default-image img {
 
+  height: 20px;
 
+  border-radius: 3px;
 
+  vertical-align: middle;
 
+  position: relative;
 
+  top: -1px;
 
+}
 
+.bsa-cpc a._default_ .default-title {
 
+  font-weight: 600;
 
+}
 
+.bsa-cpc a._default_ .default-description:after {
 
+  font-size: 0.85em;
 
+  content: "Sponsored";
 
+  color: #1C90F3;
 
+  border: 1px solid #1C90F3;
 
+  border-radius: 3px;
 
+  padding: 0 4px 1px;
 
+  margin-left: 6px;
 
+}
 
+.bsa-cpc .default-ad {
 
+  display: none;
 
+}

File diff suppressed because it is too large
+ 0 - 0
gitbook/gitbook.js


BIN
gitbook/images/apple-touch-icon-precomposed-152.png
View File


BIN
gitbook/images/favicon.ico
View File


File diff suppressed because it is too large
+ 0 - 0
gitbook/style.css


File diff suppressed because it is too large
+ 0 - 0
gitbook/theme.js


+ 94 - 0
index.html
View File 

@@ -0,0 +1,94 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Choose a language · 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">
 
+
 
+    
+            
+        
+
 
+    
+
 
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+        
+    
+
 
+        
+    
+    <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">
 
+
 
+    </head>
 
+    <body>
 
+        
+<div class="book-langs-index" role="navigation">
 
+    <div class="inner">
 
+        <h3>Choose a language</h3>
 
+
 
+        <ul class="languages">
 
+        
+            <li>
 
+                <a href="en/">English</a>
 
+            </li>
 
+        
+            <li>
 
+                <a href="zh-cn/">简体中文</a>
 
+            </li>
 
+        
+            <li>
 
+                <a href="pt-br/">Português</a>
 
+            </li>
 
+        
+            <li>
 
+                <a href="fr/">Français</a>
 
+            </li>
 
+        
+            <li>
 
+                <a href="ru/">Русский</a>
 
+            </li>
 
+        
+            <li>
 
+                <a href="ja/">日本語</a>
 
+            </li>
 
+        
+            <li>
 
+                <a href="kr/">한국어(Korean)</a>
 
+            </li>
 
+        
+            <li>
 
+                <a href="old/">1.0 Docs</a>
 
+            </li>
 
+        
+        </ul>
 
+    </div>
 
+</div>
 
+
 
+        
+    </body>
 
+</html>
 
+

+ 617 - 0
ja/actions.html
View File 

@@ -0,0 +1,617 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="ja" >
 
+    <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.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="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">
 
+            
+                    
+                    Vuex 入門
 
+            
+                </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">
 
+            
+                    
+                    厳格モード
 
+            
+                </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">
 
+    
+
 
+    <!-- Title -->
 
+    <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="&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;">&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;</h1>
 
+<p>&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x306F;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3068;&#x4F3C;&#x3066;&#x3044;&#x307E;&#x3059;&#x304C;&#x3001;&#x4E0B;&#x8A18;&#x306E;&#x70B9;&#x3067;&#x7570;&#x306A;&#x308A;&#x307E;&#x3059;:</p>
 
+<ul>
 
+<li>&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x306F;&#x3001;&#x72B6;&#x614B;&#x3092;&#x5909;&#x66F4;&#x3059;&#x308B;&#x306E;&#x3067;&#x306F;&#x306A;&#x304F;&#x3001;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x30B3;&#x30DF;&#x30C3;&#x30C8;&#x3057;&#x307E;&#x3059;&#x3002;</li>
 
+<li>&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x306F;&#x4EFB;&#x610F;&#x306E;&#x975E;&#x540C;&#x671F;&#x51E6;&#x7406;&#x3092;&#x542B;&#x3080;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;</li>
 
+</ul>
 
+<p>&#x30B7;&#x30F3;&#x30D7;&#x30EB;&#x306A;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x767B;&#x9332;&#x3057;&#x3066;&#x307F;&#x307E;&#x3057;&#x3087;&#x3046;:</p>
 
+<pre class="language-"><code class="lang-js"><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>
 
+  actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    increment <span class="token punctuation">(</span>context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+      context<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>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x30CF;&#x30F3;&#x30C9;&#x30E9;&#x306F;&#x30B9;&#x30C8;&#x30A2;&#x30A4;&#x30F3;&#x30B9;&#x30BF;&#x30F3;&#x30B9;&#x306E;&#x30E1;&#x30BD;&#x30C3;&#x30C9;&#x3084;&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x306E;&#x30BB;&#x30C3;&#x30C8;&#x3068;&#x540C;&#x3058;&#x3082;&#x306E;&#x3092;&#x547C;&#x3073;&#x51FA;&#x305B;&#x308B;&#x30B3;&#x30F3;&#x30C6;&#x30AD;&#x30B9;&#x30C8;&#x30AA;&#x30D6;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x3092;&#x53D7;&#x3051;&#x53D6;&#x308A;&#x307E;&#x3059;&#x3002;&#x3057;&#x305F;&#x304C;&#x3063;&#x3066; <code>context.commit</code> &#x3092;&#x547C;&#x3073;&#x51FA;&#x3059;&#x3053;&#x3068;&#x3067;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x30B3;&#x30DF;&#x30C3;&#x30C8;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;&#x3042;&#x308B;&#x3044;&#x306F; <code>context.state</code> &#x3084; <code>context.getters</code> &#x3067;&#x3001;&#x72B6;&#x614B;&#x3084;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x306B;&#x30A2;&#x30AF;&#x30BB;&#x30B9;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;&#x306A;&#x305C;&#x30B3;&#x30F3;&#x30C6;&#x30AD;&#x30B9;&#x30C8;&#x30AA;&#x30D6;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x304C;&#x30B9;&#x30C8;&#x30A2;&#x30A4;&#x30F3;&#x30B9;&#x30BF;&#x30F3;&#x30B9;&#x305D;&#x306E;&#x3082;&#x306E;&#x3067;&#x306F;&#x306A;&#x3044;&#x306E;&#x304B;&#x306F;&#x3001;&#x5F8C;&#x307B;&#x3069;<a href="modules.html">&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;</a>&#x3067;&#x8AAC;&#x660E;&#x3057;&#x307E;&#x3059;&#x3002;</p>
 
+<p>&#x5B9F;&#x969B;&#x306B;&#x306F;&#x30B3;&#x30FC;&#x30C9;&#x3092;&#x5C11;&#x3057;&#x30B7;&#x30F3;&#x30D7;&#x30EB;&#x306B;&#x3059;&#x308B;&#x305F;&#x3081;&#x306B; ES2015 &#x306E;<a href="https://github.com/lukehoban/es6features#destructuring" target="_blank">&#x5F15;&#x6570;&#x5206;&#x5272;&#x675F;&#x7E1B;&#xFF08;argument destructuring&#xFF09;</a>&#x304C;&#x3088;&#x304F;&#x4F7F;&#x308F;&#x308C;&#x307E;&#x3059;&#xFF08;&#x7279;&#x306B; <code>commit</code> &#x3092;&#x8907;&#x6570;&#x56DE;&#x547C;&#x3073;&#x51FA;&#x3059;&#x5FC5;&#x8981;&#x304C;&#x3042;&#x308B;&#x3068;&#x304D;&#xFF09;:</p>
 
+<pre class="language-"><code class="lang-js">actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  increment <span class="token punctuation">(</span><span class="token punctuation">{</span> commit <span class="token punctuation">}</span><span class="token punctuation">)</span> <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>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<h3 id="&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x30C7;&#x30A3;&#x30B9;&#x30D1;&#x30C3;&#x30C1;">&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x30C7;&#x30A3;&#x30B9;&#x30D1;&#x30C3;&#x30C1;</h3>
 
+<p>&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x306F; <code>store.dispatch</code> &#x304C;&#x30C8;&#x30EA;&#x30AC;&#x30FC;&#x3068;&#x306A;&#x3063;&#x3066;&#x5B9F;&#x884C;&#x3055;&#x308C;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;increment&apos;</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>&#x3053;&#x308C;&#x306F;&#x4E00;&#x898B;&#x3070;&#x304B;&#x3052;&#x3066;&#x898B;&#x3048;&#x308B;&#x304B;&#x3082;&#x3057;&#x308C;&#x307E;&#x305B;&#x3093;&#x3002;&#x3064;&#x307E;&#x308A;&#x3001;&#x30AB;&#x30A6;&#x30F3;&#x30C8;&#x3092;&#x30A4;&#x30F3;&#x30AF;&#x30EA;&#x30E1;&#x30F3;&#x30C8;&#x3057;&#x305F;&#x3044;&#x3068;&#x304D;&#x306B;&#x3001;&#x3069;&#x3046;&#x3057;&#x3066;&#x76F4;&#x63A5; <code>store.commit(&apos;increment&apos;)</code> &#x3092;&#x547C;&#x3073;&#x51FA;&#x3057;&#x3066;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x30B3;&#x30DF;&#x30C3;&#x30C8;&#x3057;&#x306A;&#x3044;&#x306E;&#x304B;&#x3001;&#x3068;&#x3002;<strong>&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306F;&#x540C;&#x671F;&#x7684;&#x3067;&#x306A;&#x3051;&#x308C;&#x3070;&#x306A;&#x3089;&#x306A;&#x3044;</strong>&#x3068;&#x3044;&#x3046;&#x306E;&#x3092;&#x899A;&#x3048;&#x3066;&#x3044;&#x307E;&#x3059;&#x304B;&#xFF1F;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x306F;&#x305D;&#x3046;&#x3067;&#x306F;&#x3042;&#x308A;&#x307E;&#x305B;&#x3093;&#x3002;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x4E2D;&#x3067;&#x306F;<strong>&#x975E;&#x540C;&#x671F;</strong>&#x306E;&#x64CD;&#x4F5C;&#x3092;&#x884C;&#x3046;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;</p>
 
+<pre class="language-"><code class="lang-js">actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  incrementAsync <span class="token punctuation">(</span><span class="token punctuation">{</span> commit <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <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>
 
+    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x306F;&#x30DA;&#x30A4;&#x30ED;&#x30FC;&#x30C9;&#x5F62;&#x5F0F;&#x3068;&#x30AA;&#x30D6;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x30B9;&#x30BF;&#x30A4;&#x30EB;&#x306E;&#x30C7;&#x30A3;&#x30B9;&#x30D1;&#x30C3;&#x30C1;&#x3092;&#x30B5;&#x30DD;&#x30FC;&#x30C8;&#x3057;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// &#x30DA;&#x30A4;&#x30ED;&#x30FC;&#x30C9;&#x3092;&#x4F7F;&#x3063;&#x3066;&#x30C7;&#x30A3;&#x30B9;&#x30D1;&#x30C3;&#x30C1;&#x3059;&#x308B;</span>
 
+store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;incrementAsync&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
 
+  amount<span class="token punctuation">:</span> <span class="token number">10</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+
 
+<span class="token comment" spellcheck="true">// &#x30AA;&#x30D6;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x3092;&#x4F7F;&#x3063;&#x3066;&#x30C7;&#x30A3;&#x30B9;&#x30D1;&#x30C3;&#x30C1;&#x3059;&#x308B;</span>
 
+store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+  type<span class="token punctuation">:</span> <span class="token string">&apos;incrementAsync&apos;</span><span class="token punctuation">,</span>
 
+  amount<span class="token punctuation">:</span> <span class="token number">10</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>&#x3088;&#x308A;&#x5B9F;&#x8DF5;&#x7684;&#x306A;&#x4F8B;&#x3068;&#x3057;&#x3066;&#x3001;&#x30B7;&#x30E7;&#x30C3;&#x30D4;&#x30F3;&#x30B0;&#x30AB;&#x30FC;&#x30C8;&#x3092;&#x30C1;&#x30A7;&#x30C3;&#x30AF;&#x30A2;&#x30A6;&#x30C8;&#x3059;&#x308B;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x6319;&#x3052;&#x307E;&#x3059;&#x3002;&#x3053;&#x306E;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x306F;<strong>&#x975E;&#x540C;&#x671F;&#x306A; API &#x306E;&#x547C;&#x3073;&#x51FA;&#x3057;</strong>&#x3068;&#x3001;<strong>&#x8907;&#x6570;&#x306E;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x30B3;&#x30DF;&#x30C3;&#x30C8;</strong>&#x3092;&#x3057;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js">actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  checkout <span class="token punctuation">(</span><span class="token punctuation">{</span> commit<span class="token punctuation">,</span> state <span class="token punctuation">}</span><span class="token punctuation">,</span> products<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// &#x73FE;&#x5728;&#x306E;&#x30AB;&#x30FC;&#x30C8;&#x5185;&#x306E;&#x5546;&#x54C1;&#x3092;&#x4FDD;&#x5B58;&#x3059;&#x308B;</span>
 
+    <span class="token keyword">const</span> savedCartItems <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>state<span class="token punctuation">.</span>cart<span class="token punctuation">.</span>added<span class="token punctuation">]</span>
 
+    <span class="token comment" spellcheck="true">// &#x30C1;&#x30A7;&#x30C3;&#x30AF;&#x30A2;&#x30A6;&#x30C8;&#x306E;&#x30EA;&#x30AF;&#x30A8;&#x30B9;&#x30C8;&#x3092;&#x9001;&#x4FE1;&#x3057;&#x3001;&#x697D;&#x89B3;&#x7684;&#x306B;&#x30AB;&#x30FC;&#x30C8;&#x5185;&#x3092;&#x30AF;&#x30EA;&#x30A2;&#x3059;&#x308B;</span>
 
+    <span class="token function">commit</span><span class="token punctuation">(</span>types<span class="token punctuation">.</span>CHECKOUT_REQUEST<span class="token punctuation">)</span>
 
+    <span class="token comment" spellcheck="true">// shop API &#x306F;&#x6210;&#x529F;&#x6642;&#x306E;&#x30B3;&#x30FC;&#x30EB;&#x30D0;&#x30C3;&#x30AF;&#x3068;&#x5931;&#x6557;&#x6642;&#x306E;&#x30B3;&#x30FC;&#x30EB;&#x30D0;&#x30C3;&#x30AF;&#x3092;&#x53D7;&#x3051;&#x53D6;&#x308B;</span>
 
+    shop<span class="token punctuation">.</span><span class="token function">buyProducts</span><span class="token punctuation">(</span>
 
+      products<span class="token punctuation">,</span>
 
+      <span class="token comment" spellcheck="true">// &#x6210;&#x529F;&#x6642;&#x306E;&#x51E6;&#x7406;</span>
 
+      <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token function">commit</span><span class="token punctuation">(</span>types<span class="token punctuation">.</span>CHECKOUT_SUCCESS<span class="token punctuation">)</span><span class="token punctuation">,</span>
 
+      <span class="token comment" spellcheck="true">// &#x5931;&#x6557;&#x6642;&#x306E;&#x51E6;&#x7406;</span>
 
+      <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token function">commit</span><span class="token punctuation">(</span>types<span class="token punctuation">.</span>CHECKOUT_FAILURE<span class="token punctuation">,</span> savedCartItems<span class="token punctuation">)</span>
 
+    <span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>&#x4E00;&#x9023;&#x306E;&#x975E;&#x540C;&#x671F;&#x306E;&#x51E6;&#x7406;&#x3092;&#x5B9F;&#x884C;&#x3057;&#x3064;&#x3064;&#x3001;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x30B3;&#x30DF;&#x30C3;&#x30C8;&#x306B;&#x3088;&#x3063;&#x3066;&#x306E;&#x307F;&#x526F;&#x4F5C;&#x7528;&#xFF08;&#x72B6;&#x614B;&#x306E;&#x5909;&#x66F4;&#xFF09;&#x3092;&#x4E0E;&#x3048;&#x3066;&#x3044;&#x308B;&#x3053;&#x3068;&#x306B;&#x6CE8;&#x610F;&#x3057;&#x3066;&#x304F;&#x3060;&#x3055;&#x3044;&#x3002;</p>
 
+<h3 id="&#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x5185;&#x3067;&#x306E;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x30C7;&#x30A3;&#x30B9;&#x30D1;&#x30C3;&#x30C1;">&#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x5185;&#x3067;&#x306E;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x30C7;&#x30A3;&#x30B9;&#x30D1;&#x30C3;&#x30C1;</h3>
 
+<p><code>this.$store.dispatch(&apos;xxx&apos;)</code> &#x3067;&#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x5185;&#x3067;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x30C7;&#x30A3;&#x30B9;&#x30D1;&#x30C3;&#x30C1;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;&#x3042;&#x308B;&#x3044;&#x306F;&#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x306E;&#x30E1;&#x30BD;&#x30C3;&#x30C9;&#x3092; <code>store.dispatch</code> &#x306B;&#x30DE;&#x30C3;&#x30D4;&#x30F3;&#x30B0;&#x3059;&#x308B; <code>mapActions</code> &#x30D8;&#x30EB;&#x30D1;&#x30FC;&#x3092;&#x4F7F;&#x3046;&#x3053;&#x3068;&#x3082;&#x3067;&#x304D;&#x307E;&#x3059;&#xFF08;&#x30EB;&#x30FC;&#x30C8;&#x306E; <code>store</code> &#x306E;&#x6CE8;&#x5165;&#x304C;&#x5FC5;&#x8981;&#x3067;&#x3059;&#xFF09;:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> mapActions <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>
 
+  methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
 
+      <span class="token string">&apos;increment&apos;</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// `this.increment()` &#x3092; `this.$store.dispatch(&apos;increment&apos;)` &#x306B;&#x30DE;&#x30C3;&#x30D4;&#x30F3;&#x30B0;&#x3059;&#x308B;</span>
 
+      <span class="token comment" spellcheck="true">// `mapActions` &#x3082;&#x30DA;&#x30A4;&#x30ED;&#x30FC;&#x30C9;&#x3092;&#x30B5;&#x30DD;&#x30FC;&#x30C8;&#x3059;&#x308B;:</span>
 
+      <span class="token string">&apos;incrementBy&apos;</span> <span class="token comment" spellcheck="true">// `this.incrementBy(amount)` &#x3092; `this.$store.dispatch(&apos;incrementBy&apos;, amount)` &#x306B;&#x30DE;&#x30C3;&#x30D4;&#x30F3;&#x30B0;&#x3059;&#x308B;</span>
 
+    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
 
+    <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+      add<span class="token punctuation">:</span> <span class="token string">&apos;increment&apos;</span> <span class="token comment" spellcheck="true">// `this.add()` &#x3092; `this.$store.dispatch(&apos;increment&apos;)` &#x306B;&#x30DE;&#x30C3;&#x30D4;&#x30F3;&#x30B0;&#x3059;&#x308B;</span>
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<h3 id="&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x69CB;&#x6210;&#x3059;&#x308B;">&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x69CB;&#x6210;&#x3059;&#x308B;</h3>
 
+<p>&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x306F;&#x3057;&#x3070;&#x3057;&#x3070;&#x975E;&#x540C;&#x671F;&#x51E6;&#x7406;&#x3092;&#x884C;&#x3044;&#x307E;&#x3059;&#x304C;&#x3001;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x304C;&#x5B8C;&#x4E86;&#x3057;&#x305F;&#x3053;&#x3068;&#x3092;&#x3069;&#x3046;&#x3084;&#x3063;&#x3066;&#x77E5;&#x308C;&#x3070;&#x826F;&#x3044;&#x306E;&#x3067;&#x3057;&#x3087;&#x3046;&#xFF1F;&#x305D;&#x3057;&#x3066;&#x3082;&#x3063;&#x3068;&#x91CD;&#x8981;&#x306A;&#x3053;&#x3068;&#x306F;&#x3001;&#x3055;&#x3089;&#x306B;&#x8907;&#x96D1;&#x306A;&#x975E;&#x540C;&#x671F;&#x51E6;&#x7406;&#x3092;&#x53D6;&#x308A;&#x6271;&#x3046;&#x305F;&#x3081;&#x306B;&#x3001;&#x3069;&#x3046;&#x3084;&#x3063;&#x3066;&#x8907;&#x6570;&#x306E;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x69CB;&#x6210;&#x3055;&#x305B;&#x308B;&#x304B;&#x3068;&#x3044;&#x3046;&#x3053;&#x3068;&#x3067;&#x3059;&#x3002;</p>
 
+<p>&#x307E;&#x305A;&#x77E5;&#x3063;&#x3066;&#x304A;&#x304F;&#x3079;&#x304D;&#x3053;&#x3068;&#x306F; <code>store.dispatch</code> &#x304C;&#x30C8;&#x30EA;&#x30AC;&#x30FC;&#x3055;&#x308C;&#x305F;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x30CF;&#x30F3;&#x30C9;&#x30E9;&#x306B;&#x3088;&#x3063;&#x3066;&#x8FD4;&#x3055;&#x308C;&#x305F; Promise &#x3092;&#x51E6;&#x7406;&#x3067;&#x304D;&#x308B;&#x3053;&#x3068;&#x3068;&#x3001;<code>store.dispatch</code> &#x3082;&#x307E;&#x305F; Promise &#x3092;&#x8FD4;&#x3059;&#x3053;&#x3068;&#x3067;&#x3059;&#x3002;</p>
 
+<pre class="language-"><code class="lang-js">actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  actionA <span class="token punctuation">(</span><span class="token punctuation">{</span> commit <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">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> reject<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+        <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;someMutation&apos;</span><span class="token punctuation">)</span>
 
+        <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
 
+      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>&#x3059;&#x308B;&#x3068;&#x6B21;&#x306E;&#x3088;&#x3046;&#x306B;&#x3067;&#x304D;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;actionA&apos;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>&#x307E;&#x305F;&#x5225;&#x306E;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3067;&#x4E0B;&#x8A18;&#x306E;&#x3088;&#x3046;&#x306B;&#x66F8;&#x304F;&#x3068;:</p>
 
+<pre class="language-"><code class="lang-js">actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  actionB <span class="token punctuation">(</span><span class="token punctuation">{</span> dispatch<span class="token punctuation">,</span> commit <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">return</span> <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;actionA&apos;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+      <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;someOtherMutation&apos;</span><span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>&#x6700;&#x7D42;&#x7684;&#x306B; <a href="https://tc39.github.io/ecmascript-asyncawait/" target="_blank">async / await</a> &#x3092;&#x4F7F;&#x7528;&#x3059;&#x308B;&#x3053;&#x3068;&#x3067;&#x3001;&#x6B21;&#x306E;&#x3088;&#x3046;&#x306B;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x7D44;&#x307F;&#x5408;&#x308F;&#x305B;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// `getData()` &#x3068; `getOtherData()` &#x304C; Promise &#x3092;&#x8FD4;&#x3059;&#x3053;&#x3068;&#x3092;&#x60F3;&#x5B9A;&#x3057;&#x3066;&#x3044;&#x308B;</span>
 
+
 
+actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token keyword">async</span> actionA <span class="token punctuation">(</span><span class="token punctuation">{</span> commit <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;gotData&apos;</span><span class="token punctuation">,</span> <span class="token keyword">await</span> <span class="token function">getData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  <span class="token keyword">async</span> actionB <span class="token punctuation">(</span><span class="token punctuation">{</span> dispatch<span class="token punctuation">,</span> commit <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">await</span> <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;actionA&apos;</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// `actionA` &#x304C;&#x5B8C;&#x4E86;&#x3059;&#x308B;&#x306E;&#x3092;&#x5F85;&#x6A5F;&#x3059;&#x308B;</span>
 
+    <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;gotOtherData&apos;</span><span class="token punctuation">,</span> <span class="token keyword">await</span> <span class="token function">getOtherData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<blockquote>
 
+<p><code>store.dispatch</code> &#x3067;&#x7570;&#x306A;&#x308B;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x5185;&#x306E;&#x8907;&#x6570;&#x306E;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x30CF;&#x30F3;&#x30C9;&#x30E9;&#x3092;&#x30C8;&#x30EA;&#x30AC;&#x30FC;&#x3059;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;&#x305D;&#x306E;&#x3088;&#x3046;&#x306A;&#x30B1;&#x30FC;&#x30B9;&#x3067;&#x306F;&#x3001;&#x5168;&#x3066;&#x306E;&#x30C8;&#x30EA;&#x30AC;&#x30FC;&#x3055;&#x308C;&#x305F;&#x30CF;&#x30F3;&#x30C9;&#x30E9;&#x304C;&#x89E3;&#x6C7A;&#x3055;&#x308C;&#x305F;&#x3068;&#x304D;&#x306B;&#x89E3;&#x6C7A;&#x3059;&#x308B; Promise &#x304C;&#x623B;&#x308A;&#x5024;&#x3068;&#x3057;&#x3066;&#x8FD4;&#x3063;&#x3066;&#x304F;&#x308B;&#x3053;&#x3068;&#x306B;&#x306A;&#x308A;&#x307E;&#x3059;&#x3002;</p>
 
+</blockquote>
 
+
 
+                                
+                                </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="mutations.html" class="navigation navigation-prev " aria-label="Previous page: ミューテーション">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="modules.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.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","-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":"ja","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"actions.md","mtime":"2018-04-20T00:44:03.862Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"ja"}});
 
+        });
 
+    </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>
 
+

+ 661 - 0
ja/api.html
View File 

@@ -0,0 +1,661 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="ja" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>API リファレンス · 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="prev" href="hot-reload.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">
 
+            
+                    
+                    Vuex 入門
 
+            
+                </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 " 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">
 
+            
+                    
+                    厳格モード
 
+            
+                </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 active" 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">
 
+    
+
 
+    <!-- Title -->
 
+    <h1>
 
+        <i class="fa fa-circle-o-notch fa-spin"></i>
 
+        <a href="." >API リファレンス</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="api-&#x30EA;&#x30D5;&#x30A1;&#x30EC;&#x30F3;&#x30B9;">API &#x30EA;&#x30D5;&#x30A1;&#x30EC;&#x30F3;&#x30B9;</h1>
 
+<h3 id="vuexstore">Vuex.Store</h3>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">import</span> Vuex <span class="token keyword">from</span> <span class="token string">&apos;vuex&apos;</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> <span class="token operator">...</span>options <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<h3 id="vuexstore-&#x30B3;&#x30F3;&#x30B9;&#x30C8;&#x30E9;&#x30AF;&#x30BF;&#x30AA;&#x30D7;&#x30B7;&#x30E7;&#x30F3;">Vuex.Store &#x30B3;&#x30F3;&#x30B9;&#x30C8;&#x30E9;&#x30AF;&#x30BF;&#x30AA;&#x30D7;&#x30B7;&#x30E7;&#x30F3;</h3>
 
+<ul>
 
+<li><p><strong>state</strong></p>
 
+<ul>
 
+<li><p>&#x578B;: <code>Object | Function</code></p>
 
+<p>&#x30B9;&#x30C8;&#x30A2;&#x306E;&#x305F;&#x3081;&#x306E; &#x30EB;&#x30FC;&#x30C8;&#x30B9;&#x30C6;&#x30FC;&#x30C8;&#x30AA;&#x30D6;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x3067;&#x3059;&#x3002;<a href="state.html">&#x8A73;&#x7D30;</a></p>
 
+<p>&#x30AA;&#x30D6;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x3092;&#x8FD4;&#x3059;&#x95A2;&#x6570;&#x3092;&#x6E21;&#x3059;&#x5834;&#x5408;&#x3001;&#x8FD4;&#x3055;&#x308C;&#x305F;&#x30AA;&#x30D6;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x306F;&#x30EB;&#x30FC;&#x30C8;&#x30B9;&#x30C6;&#x30FC;&#x30C8;&#x3068;&#x3057;&#x3066;&#x4F7F;&#x7528;&#x3055;&#x308C;&#x307E;&#x3059;&#x3002;&#x3053;&#x308C;&#x306F;&#x7279;&#x306B;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x518D;&#x5229;&#x7528;&#x306E;&#x305F;&#x3081;&#x306B;&#x30B9;&#x30C6;&#x30FC;&#x30C8;&#x30AA;&#x30D6;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x3092;&#x518D;&#x5229;&#x7528;&#x3059;&#x308B;&#x5834;&#x5408;&#x306B;&#x4FBF;&#x5229;&#x3067;&#x3059;&#x3002;<a href="modules.html#&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x518D;&#x5229;&#x7528;">&#x8A73;&#x7D30;</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>mutations</strong></p>
 
+<ul>
 
+<li><p>&#x578B;: <code>{ [type: string]: Function }</code></p>
 
+<p>&#x30B9;&#x30C8;&#x30A2;&#x306B;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x767B;&#x9332;&#x3057;&#x307E;&#x3059;&#x3002;&#x30CF;&#x30F3;&#x30C9;&#x30E9;&#x95A2;&#x6570;&#x306F;&#x7B2C;&#x4E00;&#x5F15;&#x6570;&#x306B; <code>state</code> &#x3092;&#x5E38;&#x306B;&#x53D7;&#x3051;&#x53D6;&#x308A;(&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x5185;&#x3067;&#x5B9A;&#x7FA9;&#x3055;&#x308C;&#x3066;&#x3044;&#x308C;&#x3070;&#x3001;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x30ED;&#x30FC;&#x30AB;&#x30EB;&#x30B9;&#x30C6;&#x30FC;&#x30C8;&#x3092;&#x53D7;&#x3051;&#x53D6;&#x308A;)&#x3001;&#x6307;&#x5B9A;&#x3055;&#x308C;&#x3066;&#x3044;&#x308C;&#x3070;&#x7B2C;&#x4E8C;&#x5F15;&#x6570;&#x306B; <code>payload</code> &#x3092;&#x53D7;&#x3051;&#x53D6;&#x308A;&#x307E;&#x3059;&#x3002;</p>
 
+<p><a href="mutations.html">&#x8A73;&#x7D30;</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>actions</strong></p>
 
+<ul>
 
+<li><p>&#x578B;: <code>{ [type: string]: Function }</code></p>
 
+<p>&#x30B9;&#x30C8;&#x30A2;&#x306B;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x767B;&#x9332;&#x3057;&#x307E;&#x3059;&#x3002;&#x30CF;&#x30F3;&#x30C9;&#x30E9;&#x95A2;&#x6570;&#x306F;&#x6B21;&#x306E;&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x3092;&#x6301;&#x3064; <code>context</code> &#x30AA;&#x30D6;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x3092;&#x53D7;&#x3051;&#x53D6;&#x308A;&#x307E;&#x3059;&#x3002;:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token punctuation">{</span>
 
+  state<span class="token punctuation">,</span>      <span class="token comment" spellcheck="true">// `store.state` &#x3068;&#x540C;&#x3058;&#x304B;&#x3001;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x5185;&#x306B;&#x3042;&#x308C;&#x3070;&#x30ED;&#x30FC;&#x30AB;&#x30EB;&#x30B9;&#x30C6;&#x30FC;&#x30C8;</span>
 
+  rootState<span class="token punctuation">,</span>  <span class="token comment" spellcheck="true">// `store.state` &#x3068;&#x540C;&#x3058;&#x3002;&#x305F;&#x3060;&#x3057;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x5185;&#x306B;&#x9650;&#x308B;</span>
 
+  commit<span class="token punctuation">,</span>     <span class="token comment" spellcheck="true">// `store.commit` &#x3068;&#x540C;&#x3058;</span>
 
+  dispatch<span class="token punctuation">,</span>   <span class="token comment" spellcheck="true">// `store.dispatch` &#x3068;&#x540C;&#x3058;</span>
 
+  getters<span class="token punctuation">,</span>    <span class="token comment" spellcheck="true">// `store.getters` &#x3068;&#x540C;&#x3058;&#x304B;&#x3001;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x5185;&#x306B;&#x3042;&#x308C;&#x3070;&#x30ED;&#x30FC;&#x30AB;&#x30EB;&#x30B2;&#x30C3;&#x30BF;&#x30FC;</span>
 
+  rootGetters <span class="token comment" spellcheck="true">// `store.getters` &#x3068;&#x540C;&#x3058;&#x3002;&#x305F;&#x3060;&#x3057;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x5185;&#x306B;&#x9650;&#x308B;</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>&#x305D;&#x3057;&#x3066;&#x3001;&#x7B2C; 2 &#x5F15;&#x6570;&#x306E; <code>payload</code> &#x304C;&#x3042;&#x308C;&#x3070;&#x3001;&#x305D;&#x308C;&#x3092;&#x53D7;&#x3051;&#x53D6;&#x308A;&#x307E;&#x3059;&#x3002;</p>
 
+<p><a href="actions.html">&#x8A73;&#x7D30;</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>getters</strong></p>
 
+<ul>
 
+<li><p>type: <code>{ [key: string]: Function }</code></p>
 
+<p>&#x30B9;&#x30C8;&#x30A2;&#x306B;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x3092;&#x767B;&#x9332;&#x3057;&#x307E;&#x3059;. &#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x95A2;&#x6570;&#x306F;&#x6B21;&#x306E;&#x5F15;&#x6570;&#x3092;&#x53D7;&#x3051;&#x53D6;&#x308A;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code>state,     // &#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x5185;&#x3067;&#x5B9A;&#x7FA9;&#x3055;&#x308C;&#x3066;&#x3044;&#x308C;&#x3070;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x30ED;&#x30FC;&#x30AB;&#x30EB;&#x30B9;&#x30C6;&#x30FC;&#x30C8;
 
+getters    // store.getters &#x3068;&#x540C;&#x3058;
 
+</code></pre><p>&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3067;&#x5B9A;&#x7FA9;&#x3055;&#x308C;&#x305F;&#x3068;&#x304D;&#x306E;&#x4ED5;&#x69D8;</p>
 
+<pre class="language-"><code>state,       // &#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3067;&#x5B9A;&#x7FA9;&#x3055;&#x308C;&#x305F;&#x5834;&#x5408;&#x3001;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x30ED;&#x30FC;&#x30AB;&#x30EB;&#x30B9;&#x30C6;&#x30FC;&#x30C8;
 
+getters,     // &#x73FE;&#x5728;&#x306E;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x30ED;&#x30FC;&#x30AB;&#x30EB;&#x30B2;&#x30C3;&#x30BF;&#x30FC;
 
+rootState,   // &#x30B0;&#x30ED;&#x30FC;&#x30D0;&#x30EB;&#x30B9;&#x30C6;&#x30FC;&#x30C8;
 
+rootGetters  // &#x5168;&#x3066;&#x306E;&#x30B2;&#x30C3;&#x30BF;&#x30FC;
 
+</code></pre><p>&#x767B;&#x9332;&#x3055;&#x308C;&#x305F;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x306F; <code>store.getters</code> &#x4E0A;&#x306B;&#x516C;&#x958B;&#x3055;&#x308C;&#x307E;&#x3059;&#x3002;</p>
 
+<p><a href="getters.html">&#x8A73;&#x7D30;</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>modules</strong></p>
 
+<ul>
 
+<li><p>&#x578B;: <code>Object</code></p>
 
+<p>&#x30B5;&#x30D6;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3092;&#x542B;&#x3080;&#x6B21;&#x306E;&#x3088;&#x3046;&#x306A;&#x5F62;&#x5F0F;&#x306E;&#x30AA;&#x30D6;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x306F;&#x30B9;&#x30C8;&#x30A2;&#x306B;&#x30DE;&#x30FC;&#x30B8;&#x3055;&#x308C;&#x307E;&#x3059;&#x3002;</p>
 
+<pre class="language-"><code class="lang-js"><span class="token punctuation">{</span>
 
+  key<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    state<span class="token punctuation">,</span>
 
+    mutations
 
+    actions<span class="token operator">?</span><span class="token punctuation">,</span>
 
+    getters<span class="token operator">?</span><span class="token punctuation">,</span>
 
+    modules<span class="token operator">?</span>
 
+
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  <span class="token operator">...</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>&#x5404;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306F;&#x3001;&#x30EB;&#x30FC;&#x30C8;&#x30AA;&#x30D7;&#x30B7;&#x30E7;&#x30F3;&#x306B;&#x4F3C;&#x305F; <code>state</code> &#x3068; <code>mutations</code> &#x3092;&#x542B;&#x3080;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x72B6;&#x614B;&#x306F;&#x3001;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x30AD;&#x30FC;&#x3092;&#x4F7F;&#x3063;&#x3066;&#x3001;&#x30B9;&#x30C8;&#x30A2;&#x306E;&#x30EB;&#x30FC;&#x30C8;&#x30B9;&#x30C6;&#x30FC;&#x30C8;&#x306B;&#x7D50;&#x5408;&#x3055;&#x308C;&#x307E;&#x3059;&#x3002;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3068;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x306F;&#x3001;&#x7B2C;&#x4E00;&#x5F15;&#x6570;&#x3068;&#x3057;&#x3066;&#x30EB;&#x30FC;&#x30C8;&#x30B9;&#x30C6;&#x30FC;&#x30C8;&#x306E;&#x4EE3;&#x308F;&#x308A;&#x306B;&#x3001;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x30ED;&#x30FC;&#x30AB;&#x30EB;&#x30B9;&#x30C6;&#x30FC;&#x30C8;&#x3060;&#x3051;&#x3092;&#x53D7;&#x3051;&#x53D6;&#x308A;&#x3001;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x306E; <code>context.state</code> &#x3082;&#x30ED;&#x30FC;&#x30AB;&#x30EB;&#x30B9;&#x30C6;&#x30FC;&#x30C8;&#x3092;&#x6307;&#x3059;&#x3088;&#x3046;&#x306B;&#x306A;&#x308A;&#x307E;&#x3059;&#x3002;</p>
 
+<p><a href="modules.html">&#x8A73;&#x7D30;</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>plugins</strong></p>
 
+<ul>
 
+<li><p>&#x578B;: <code>Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Function</span><span class="token punctuation">&gt;</span></span></code></p>
 
+<p>&#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;&#x95A2;&#x6570;&#x306E;&#x914D;&#x5217;&#x306F;&#x3001;&#x30B9;&#x30C8;&#x30A2;&#x306B;&#x9069;&#x7528;&#x3055;&#x308C;&#x307E;&#x3059;&#x3002;&#x3053;&#x306E;&#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;&#x306F;&#x3001;&#x30B9;&#x30C8;&#x30A2;&#x3060;&#x3051;&#x3092;&#x5F15;&#x6570;&#x3068;&#x3057;&#x3066;&#x53D7;&#x3051;&#x53D6;&#x308A;&#x3001;&#x5916;&#x90E8;&#x3078;&#x306E;&#x6C38;&#x7D9A;&#x5316;&#x3001;&#x30ED;&#x30AE;&#x30F3;&#x30B0;&#x3001;&#x30C7;&#x30D0;&#x30C3;&#x30AE;&#x30F3;&#x30B0;&#x306E;&#x305F;&#x3081;&#x306B;&#x3001;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x76E3;&#x8996;&#x3059;&#x308B;&#x304B;&#x3001;&#x307E;&#x305F;&#x306F;&#x3001; websocket &#x3084; observable &#x306E;&#x3088;&#x3046;&#x306A;&#x5916;&#x304B;&#x3089;&#x6E21;&#x3055;&#x308C;&#x308B;&#x30C7;&#x30FC;&#x30BF;&#x306E;&#x305F;&#x3081;&#x306B;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x30C7;&#x30A3;&#x30B9;&#x30D1;&#x30C3;&#x30C1;&#x3057;&#x307E;&#x3059;&#x3002;</p>
 
+<p><a href="plugins.html">&#x8A73;&#x7D30;</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>strict</strong></p>
 
+<ul>
 
+<li>&#x578B;: <code>Boolean</code></li>
 
+<li><p>&#x30C7;&#x30D5;&#x30A9;&#x30EB;&#x30C8;: <code>false</code></p>
 
+<p>Vuex &#x30B9;&#x30C8;&#x30A2;&#x3092;&#x53B3;&#x683C;&#x30E2;&#x30FC;&#x30C9;&#x306B;&#x3057;&#x307E;&#x3059;&#x3002;&#x53B3;&#x683C;&#x30E2;&#x30FC;&#x30C9;&#x3067;&#x306F;&#x3001;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x30CF;&#x30F3;&#x30C9;&#x30E9;&#x4EE5;&#x5916;&#x3067;&#x3001; Vuex &#x306E;&#x72B6;&#x614B;&#x306E;&#x5909;&#x66F4;&#x3092;&#x884C;&#x3046;&#x3068;&#x3001;&#x30A8;&#x30E9;&#x30FC;&#x304C;&#x6295;&#x3052;&#x3089;&#x308C;&#x307E;&#x3059;&#x3002;</p>
 
+<p><a href="strict.html">&#x8A73;&#x7D30;</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+</ul>
 
+<h3 id="vuexstore-&#x30A4;&#x30F3;&#x30B9;&#x30BF;&#x30F3;&#x30B9;&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;">Vuex.Store &#x30A4;&#x30F3;&#x30B9;&#x30BF;&#x30F3;&#x30B9;&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;</h3>
 
+<ul>
 
+<li><p><strong>state</strong></p>
 
+<ul>
 
+<li><p>type: <code>Object</code></p>
 
+<p>&#x30EB;&#x30FC;&#x30C8;&#x30B9;&#x30C6;&#x30FC;&#x30C8;&#x3001;&#x8AAD;&#x307F;&#x53D6;&#x308A;&#x5C02;&#x7528;&#x3067;&#x3059;&#x3002;</p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>getters</strong></p>
 
+<ul>
 
+<li><p>type: <code>Object</code></p>
 
+<p>&#x767B;&#x9332;&#x3055;&#x308C;&#x3066;&#x3044;&#x308B;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x3092;&#x516C;&#x958B;&#x3057;&#x307E;&#x3059;&#x3002;&#x8AAD;&#x307F;&#x53D6;&#x308A;&#x5C02;&#x7528;&#x3067;&#x3059;&#x3002;</p>
 
+</li>
 
+</ul>
 
+</li>
 
+</ul>
 
+<h3 id="vuexstore-&#x30A4;&#x30F3;&#x30B9;&#x30BF;&#x30F3;&#x30B9;&#x30E1;&#x30BD;&#x30C3;&#x30C9;">Vuex.Store &#x30A4;&#x30F3;&#x30B9;&#x30BF;&#x30F3;&#x30B9;&#x30E1;&#x30BD;&#x30C3;&#x30C9;</h3>
 
+<ul>
 
+<li><strong><code>commit(type: string, payload?: any, options?: Object)</code></strong></li>
 
+<li><p><strong><code>commit(mutation: Object, options?: Object)</code></strong></p>
 
+<p>&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x30B3;&#x30DF;&#x30C3;&#x30C8;&#x3057;&#x307E;&#x3059;&#x3002;<code>options</code> &#x306F;<a href="modules.html#&#x540D;&#x524D;&#x7A7A;&#x9593;">&#x540D;&#x524D;&#x7A7A;&#x9593;&#x4ED8;&#x304D;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;</a>&#x3067; root &#x306A;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306B;&#x30B3;&#x30DF;&#x30C3;&#x30C8;&#x3067;&#x304D;&#x308B; <code>root: true</code> &#x3092;&#x6301;&#x3064;&#x3053;&#x3068;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;<a href="mutations.html">&#x8A73;&#x7D30;</a></p>
 
+</li>
 
+<li><p><strong><code>dispatch(type: string, payload?: any, options?: Object)</code></strong></p>
 
+</li>
 
+<li><p><strong><code>dispatch(action: Object, options?: Object)</code></strong></p>
 
+<p>&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x30C7;&#x30A3;&#x30B9;&#x30D1;&#x30C3;&#x30C1;&#x3057;&#x307E;&#x3059;&#x3002;<code>options</code> &#x306F;<a href="modules.html#&#x540D;&#x524D;&#x7A7A;&#x9593;">&#x540D;&#x524D;&#x7A7A;&#x9593;&#x4ED8;&#x304D;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;</a>&#x3067; root &#x306A;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x306B;&#x30C7;&#x30A3;&#x30B9;&#x30D1;&#x30C3;&#x30C1;&#x3067;&#x304D;&#x308B; <code>root: true</code> &#x3092;&#x6301;&#x3064;&#x3053;&#x3068;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002; &#x3059;&#x3079;&#x3066;&#x306E;&#x30C8;&#x30EA;&#x30AC;&#x30FC;&#x3055;&#x308C;&#x305F;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x30CF;&#x30F3;&#x30C9;&#x30E9;&#x3092;&#x89E3;&#x6C7A;&#x3059;&#x308B;Promise&#x3092;&#x8FD4;&#x3057;&#x307E;&#x3059;&#x3002;<a href="actions.html">&#x8A73;&#x7D30;</a></p>
 
+</li>
 
+<li><p><strong><code>replaceState(state: Object)</code></strong></p>
 
+<p>&#x30B9;&#x30C8;&#x30A2;&#x306E;&#x30EB;&#x30FC;&#x30C8;&#x30B9;&#x30C6;&#x30FC;&#x30C8;&#x3092;&#x7F6E;&#x304D;&#x63DB;&#x3048;&#x307E;&#x3059;&#x3002;&#x3053;&#x308C;&#x306F;&#x3001;&#x30B9;&#x30C6;&#x30FC;&#x30C8;&#x306E;&#x30CF;&#x30A4;&#x30C9;&#x30EC;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3084;&#x30BF;&#x30A4;&#x30E0;&#x30C8;&#x30E9;&#x30D9;&#x30EB;&#x306E;&#x305F;&#x3081;&#x3060;&#x3051;&#x306B;&#x5229;&#x7528;&#x3059;&#x3079;&#x304D;&#x3067;&#x3059;&#x3002;</p>
 
+</li>
 
+<li><p><strong><code>watch(getter: Function, cb: Function, options?: Object)</code></strong></p>
 
+<p>&#x30EA;&#x30A2;&#x30AF;&#x30C6;&#x30A3;&#x30D6;&#x306B;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x95A2;&#x6570;&#x306E;&#x8FD4;&#x3059;&#x5024;&#x3092;&#x76E3;&#x8996;&#x3057;&#x307E;&#x3059;&#x3002;&#x5024;&#x304C;&#x5909;&#x308F;&#x3063;&#x305F;&#x5834;&#x5408;&#x306F;&#x3001;&#x30B3;&#x30FC;&#x30EB;&#x30D0;&#x30C3;&#x30AF;&#x3092;&#x547C;&#x3073;&#x307E;&#x3059;&#x3002;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x306F;&#x30B9;&#x30C8;&#x30A2;&#x306E; <code>state</code> &#x3092;&#x6700;&#x521D;&#x306E;&#x5F15;&#x6570;&#x3068;&#x3057;&#x3066;&#x3001; <code>getters</code> &#x3092;2&#x756A;&#x76EE;&#x306E;&#x5F15;&#x6570;&#x3068;&#x3057;&#x3066;&#x53D7;&#x3051;&#x53D6;&#x308A;&#x307E;&#x3059;&#x3002; Vue &#x306E;<code>vm.$watch</code>&#x30E1;&#x30BD;&#x30C3;&#x30C9;&#x3068;&#x540C;&#x3058;&#x30AA;&#x30D7;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x30AA;&#x30D7;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x30AA;&#x30D6;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x3068;&#x3057;&#x3066;&#x53D7;&#x3051;&#x4ED8;&#x3051;&#x307E;&#x3059;&#x3002;</p>
 
+<p>&#x76E3;&#x8996;&#x3092;&#x6B62;&#x3081;&#x308B;&#x5834;&#x5408;&#x306F;&#x3001;&#x30CF;&#x30F3;&#x30C9;&#x30E9;&#x95A2;&#x6570;&#x306E;&#x8FD4;&#x308A;&#x5024;&#x3092;&#x95A2;&#x6570;&#x3068;&#x3057;&#x3066;&#x547C;&#x3073;&#x51FA;&#x3057;&#x307E;&#x3059;&#x3002;</p>
 
+</li>
 
+<li><p><strong><code>subscribe(handler: Function)</code></strong></p>
 
+<p>&#x30B9;&#x30C8;&#x30A2;&#x3078;&#x306E;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x8CFC;&#x8AAD;&#x3057;&#x307E;&#x3059;&#x3002;<code>handler</code> &#x306F;&#x3001;&#x5168;&#x3066;&#x306E;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x5F8C;&#x306B;&#x547C;&#x3070;&#x308C;&#x3001;&#x5F15;&#x6570;&#x3068;&#x3057;&#x3066;&#x3001;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3; &#x30C7;&#x30A3;&#x30B9;&#x30AF;&#x30EA;&#x30D7;&#x30BF;&#x3068;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x5F8C;&#x306E;&#x72B6;&#x614B;&#x3092;&#x53D7;&#x3051;&#x53D6;&#x308A;&#x307E;&#x3059;&#x3002;</p>
 
+<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span>mutation<span class="token punctuation">,</span> state<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>mutation<span class="token punctuation">.</span>type<span class="token punctuation">)</span>
 
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>mutation<span class="token punctuation">.</span>payload<span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>&#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;&#x306E;&#x4E2D;&#x3067;&#x3082;&#x3063;&#x3068;&#x3082;&#x3088;&#x304F;&#x5229;&#x7528;&#x3055;&#x308C;&#x307E;&#x3059;&#x3002;<a href="plugins.html">&#x8A73;&#x7D30;</a></p>
 
+</li>
 
+<li><p><strong><code>subscribeAction(handler: Function)</code></strong></p>
 
+<blockquote>
 
+<p>2.5.0 &#x3067;&#x65B0;&#x898F;&#x8FFD;&#x52A0;</p>
 
+</blockquote>
 
+<p>&#x30B9;&#x30C8;&#x30A2;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x8CFC;&#x8AAD;&#x3057;&#x307E;&#x3059;&#x3002;<code>handler</code> &#x306F;&#x30C7;&#x30A3;&#x30B9;&#x30D1;&#x30C3;&#x30C1;&#x3055;&#x308C;&#x305F;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3054;&#x3068;&#x306B;&#x547C;&#x3073;&#x51FA;&#x3055;&#x308C;&#x3001;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x8A18;&#x8FF0;&#x5B50;&#x3068;&#x73FE;&#x5728;&#x306E;&#x30B9;&#x30C8;&#x30A2;&#x72B6;&#x614B;&#x3092;&#x5F15;&#x6570;&#x3068;&#x3057;&#x3066;&#x53D7;&#x3051;&#x53D6;&#x308A;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span><span class="token function">subscribeAction</span><span class="token punctuation">(</span><span class="token punctuation">(</span>action<span class="token punctuation">,</span> state<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>action<span class="token punctuation">.</span>type<span class="token punctuation">)</span>
 
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>action<span class="token punctuation">.</span>payload<span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+</li>
 
+</ul>
 
+<p>&#x3000;&#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;&#x3067;&#x6700;&#x3082;&#x4E00;&#x822C;&#x7684;&#x306B;&#x4F7F;&#x7528;&#x3055;&#x308C;&#x307E;&#x3059;&#x3002;<a href="plugins.html">Details</a></p>
 
+<ul>
 
+<li><p><strong><code>registerModule(path: string | Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span><span class="token punctuation">&gt;</span></span>, module: Module, options?: Object)</code></strong></p>
 
+<p>&#x52D5;&#x7684;&#x306A;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3092;&#x767B;&#x9332;&#x3057;&#x307E;&#x3059;&#x3002;<a href="modules.html#dynamic-module-registration">&#x8A73;&#x7D30;</a></p>
 
+<p><code>options</code> &#x306F;&#x524D;&#x306E;&#x72B6;&#x614B;&#x3092;&#x4FDD;&#x5B58;&#x3059;&#x308B; <code>preserveState: true</code> &#x3092;&#x6301;&#x3064;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;&#x30B5;&#x30FC;&#x30D0;&#x30B5;&#x30A4;&#x30C9;&#x30EC;&#x30F3;&#x30C0;&#x30EA;&#x30F3;&#x30B0;&#x306B;&#x5F79;&#x7ACB;&#x3061;&#x307E;&#x3059;&#x3002;</p>
 
+</li>
 
+<li><p><strong><code>unregisterModule(path: string | Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span><span class="token punctuation">&gt;</span></span>)</code></strong></p>
 
+<p>&#x52D5;&#x7684;&#x306A;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3092;&#x89E3;&#x9664;&#x3057;&#x307E;&#x3059;&#x3002;<a href="modules.html#dynamic-module-registration">&#x8A73;&#x7D30;</a></p>
 
+</li>
 
+<li><p><strong><code>hotUpdate(newOptions: Object)</code></strong></p>
 
+<p>&#x65B0;&#x3057;&#x3044;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3068;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x30DB;&#x30C3;&#x30C8;&#x30B9;&#x30EF;&#x30C3;&#x30D7;&#x3057;&#x307E;&#x3059;&#x3002;<a href="hot-reload.html">&#x8A73;&#x7D30;</a></p>
 
+</li>
 
+</ul>
 
+<h3 id="&#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x3092;&#x30D0;&#x30A4;&#x30F3;&#x30C9;&#x3059;&#x308B;&#x30D8;&#x30EB;&#x30D1;&#x30FC;">&#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x3092;&#x30D0;&#x30A4;&#x30F3;&#x30C9;&#x3059;&#x308B;&#x30D8;&#x30EB;&#x30D1;&#x30FC;</h3>
 
+<ul>
 
+<li><p><strong><code>mapState(namespace?: string, map: Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span><span class="token punctuation">&gt;</span></span> | Object): Object</code></strong></p>
 
+<p>&#x30B9;&#x30C8;&#x30A2;&#x306E;&#x30B5;&#x30D6;&#x30C4;&#x30EA;&#x30FC;&#x3092;&#x8FD4;&#x3059;&#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x306E; computed &#x30AA;&#x30D7;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x4F5C;&#x6210;&#x3057;&#x307E;&#x3059;&#x3002;<a href="state.html#the-mapstate-helper">&#x8A73;&#x7D30;</a></p>
 
+<p>&#x7B2C;1&#x5F15;&#x6570;&#x306F;&#x3001;&#x30AA;&#x30D7;&#x30B7;&#x30E7;&#x30F3;&#x3067;&#x540D;&#x524D;&#x7A7A;&#x9593;&#x6587;&#x5B57;&#x5217;&#x306B;&#x3059;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;<a href="modules.html#binding-helpers-with-namespace">&#x8A73;&#x7D30;</a></p>
 
+</li>
 
+<li><p><strong><code>mapGetters(namespace?: string, map: Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span><span class="token punctuation">&gt;</span></span> | Object): Object</code></strong></p>
 
+<p>&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x306E;&#x8A55;&#x4FA1;&#x5F8C;&#x306E;&#x5024;&#x3092;&#x8FD4;&#x3059;&#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x306E; computed &#x30AA;&#x30D7;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x4F5C;&#x6210;&#x3057;&#x307E;&#x3059;&#x3002;<a href="getters.html#the-mapgetters-helper">&#x8A73;&#x7D30;</a></p>
 
+<p>&#x7B2C;1&#x5F15;&#x6570;&#x306F;&#x3001;&#x30AA;&#x30D7;&#x30B7;&#x30E7;&#x30F3;&#x3067;&#x540D;&#x524D;&#x7A7A;&#x9593;&#x6587;&#x5B57;&#x5217;&#x306B;&#x3059;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;<a href="modules.html#binding-helpers-with-namespace">&#x8A73;&#x7D30;</a></p>
 
+</li>
 
+<li><p><strong><code>mapActions(namespace?: string, map: Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span><span class="token punctuation">&gt;</span></span> | Object): Object</code></strong></p>
 
+<p>&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x30C7;&#x30A3;&#x30B9;&#x30D1;&#x30C3;&#x30C1;&#x3059;&#x308B;&#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x306E; methods &#x30AA;&#x30D7;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x4F5C;&#x6210;&#x3057;&#x307E;&#x3059;&#x3002;<a href="actions.html#dispatching-actions-in-components">&#x8A73;&#x7D30;</a></p>
 
+<p>&#x7B2C;1&#x5F15;&#x6570;&#x306F;&#x3001;&#x30AA;&#x30D7;&#x30B7;&#x30E7;&#x30F3;&#x3067;&#x540D;&#x524D;&#x7A7A;&#x9593;&#x6587;&#x5B57;&#x5217;&#x306B;&#x3059;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;<a href="modules.html#binding-helpers-with-namespace">&#x8A73;&#x7D30;</a></p>
 
+</li>
 
+<li><p><strong><code>mapMutations(namespace?: string, map: Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span><span class="token punctuation">&gt;</span></span> | Object): Object</code></strong></p>
 
+<p>&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x30B3;&#x30DF;&#x30C3;&#x30C8;&#x3059;&#x308B;&#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x306E; methods &#x30AA;&#x30D7;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x4F5C;&#x6210;&#x3057;&#x307E;&#x3059;&#x3002;<a href="mutations.html#commiting-mutations-in-components">&#x8A73;&#x7D30;</a></p>
 
+<p>&#x7B2C;1&#x5F15;&#x6570;&#x306F;&#x3001;&#x30AA;&#x30D7;&#x30B7;&#x30E7;&#x30F3;&#x3067;&#x540D;&#x524D;&#x7A7A;&#x9593;&#x6587;&#x5B57;&#x5217;&#x306B;&#x3059;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;<a href="modules.html#binding-helpers-with-namespace">&#x8A73;&#x7D30;</a></p>
 
+</li>
 
+<li><p><strong><code>createNamespacedHelpers(namespace: string): Object</code></strong></p>
 
+<p>&#x540D;&#x524D;&#x7A7A;&#x9593;&#x4ED8;&#x3051;&#x3089;&#x308C;&#x305F;&#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x30D0;&#x30A4;&#x30F3;&#x30C7;&#x30A3;&#x30F3;&#x30B0;&#x306E;&#x30D8;&#x30EB;&#x30D1;&#x30FC;&#x3092;&#x4F5C;&#x6210;&#x3057;&#x307E;&#x3059;&#x3002;&#x8FD4;&#x3055;&#x308C;&#x308B;&#x30AA;&#x30D6;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x306F;&#x6307;&#x5B9A;&#x3055;&#x308C;&#x305F;&#x540D;&#x524D;&#x7A7A;&#x9593;&#x306B;&#x30D0;&#x30A4;&#x30F3;&#x30C9;&#x3055;&#x308C;&#x305F; <code>mapState</code>&#x3001;<code>mapGetters</code>&#x3001;<code>mapActions</code> &#x305D;&#x3057;&#x3066; <code>mapMutations</code> &#x304C;&#x542B;&#x307E;&#x308C;&#x307E;&#x3059;&#x3002;<a href="modules.html#binding-helpers-with-namespace">&#x8A73;&#x7D30;&#x306F;&#x3053;&#x3061;&#x3089;</a></p>
 
+</li>
 
+</ul>
 
+
 
+                                
+                                </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="hot-reload.html" class="navigation navigation-prev navigation-unique" aria-label="Previous page: ホットリローディング">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"API リファレンス","level":"1.13","depth":1,"previous":{"title":"ホットリローディング","level":"1.12","depth":1,"path":"hot-reload.md","ref":"hot-reload.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":"ja","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"api.md","mtime":"2018-04-20T00:44:03.863Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"ja"}});
 
+        });
 
+    </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>
 
+

+ 490 - 0
ja/core-concepts.html
View File 

@@ -0,0 +1,490 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="ja" >
 
+    <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.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="state.html" />
 
+    
+    
+    <link rel="prev" href="getting-started.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">
 
+            
+                    
+                    Vuex 入門
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter active" 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 " 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">
 
+            
+                    
+                    厳格モード
 
+            
+                </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">
 
+    
+
 
+    <!-- Title -->
 
+    <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="&#x30B3;&#x30A2;&#x30B3;&#x30F3;&#x30BB;&#x30D7;&#x30C8;">&#x30B3;&#x30A2;&#x30B3;&#x30F3;&#x30BB;&#x30D7;&#x30C8;</h1>
 
+<p>&#x3053;&#x306E;&#x7AE0;&#x3067;&#x306F;&#x3001;Vuex &#x306E;&#x30B3;&#x30A2;&#x30B3;&#x30F3;&#x30BB;&#x30D7;&#x30C8;&#x306B;&#x3064;&#x3044;&#x3066;&#x3001;&#x4EE5;&#x4E0B;&#x3092;&#x5B66;&#x7FD2;&#x3057;&#x307E;&#x3059;&#x3002;</p>
 
+<ul>
 
+<li><a href="state.html">&#x30B9;&#x30C6;&#x30FC;&#x30C8;</a></li>
 
+<li><a href="getters.html">&#x30B2;&#x30C3;&#x30BF;&#x30FC;</a></li>
 
+<li><a href="mutations.html">&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;</a></li>
 
+<li><a href="actions.html">&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;</a></li>
 
+<li><a href="modules.html">&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;</a></li>
 
+</ul>
 
+<p>&#x3053;&#x308C;&#x3089;&#x306E;&#x30B3;&#x30F3;&#x30BB;&#x30D7;&#x30C8;&#x3092;&#x6DF1;&#x304F;&#x7406;&#x89E3;&#x3059;&#x308B;&#x3053;&#x3068;&#x306F;&#x3001;Vuex &#x3092;&#x4F7F;&#x7528;&#x3059;&#x308B;&#x306B;&#x3042;&#x305F;&#x3063;&#x3066;&#x4E0D;&#x53EF;&#x6B20;&#x3067;&#x3059;&#x3002;</p>
 
+<p>&#x305D;&#x308C;&#x3067;&#x306F;&#x3001;&#x59CB;&#x3081;&#x307E;&#x3057;&#x3087;&#x3046;&#xFF01;</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="getting-started.html" class="navigation navigation-prev " aria-label="Previous page: Vuex 入門">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="state.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","depth":1,"next":{"title":"ステート","level":"1.6.1","depth":2,"path":"state.md","ref":"state.md","articles":[]},"previous":{"title":"Vuex 入門","level":"1.5","depth":1,"path":"getting-started.md","ref":"getting-started.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":"ja","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"core-concepts.md","mtime":"2018-04-20T00:44:03.863Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"ja"}});
 
+        });
 
+    </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>
 
+

+ 522 - 0
ja/forms.html
View File 

@@ -0,0 +1,522 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="ja" >
 
+    <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.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="testing.html" />
 
+    
+    
+    <link rel="prev" href="strict.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">
 
+            
+                    
+                    Vuex 入門
 
+            
+                </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 " 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">
 
+            
+                    
+                    厳格モード
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter active" 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">
 
+    
+
 
+    <!-- Title -->
 
+    <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="&#x30D5;&#x30A9;&#x30FC;&#x30E0;&#x306E;&#x6271;&#x3044;">&#x30D5;&#x30A9;&#x30FC;&#x30E0;&#x306E;&#x6271;&#x3044;</h1>
 
+<p>&#x53B3;&#x683C;&#x30E2;&#x30FC;&#x30C9;&#x3067; Vuex &#x3092;&#x4F7F;&#x7528;&#x3059;&#x308B;&#x3068;&#x304D;&#x3001;Vuex &#x306B;&#x5C5E;&#x3059;&#x308B;&#x72B6;&#x614B;&#x306E;&#x4E00;&#x90E8;&#x3067; <code>v-model</code> &#x3092;&#x4F7F;&#x7528;&#x3059;&#x308B;&#x306E;&#x306F;&#x5C11;&#x3057;&#x30C8;&#x30EA;&#x30C3;&#x30AD;&#x30FC;&#x3067;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>obj.message<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
 
+</code></pre>
 
+<p><code>obj</code> &#x304C;&#x30B9;&#x30C8;&#x30A2;&#x304B;&#x3089;&#x30AA;&#x30D6;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x3092;&#x8FD4;&#x3059;&#x7B97;&#x51FA;&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3; (computed property) &#x3068;&#x4EEE;&#x5B9A;&#x3059;&#x308B;&#x3068;&#x3001;<code>v-model</code> &#x306F; input &#x3067;&#x30E6;&#x30FC;&#x30B6;&#x30FC;&#x304C;&#x5165;&#x529B;&#x3059;&#x308B;&#x3068;&#x304D;&#x3001;&#x76F4;&#x63A5; <code>obj.message</code> &#x3092;&#x5909;&#x66F4;&#x3057;&#x307E;&#x3059;&#x3002;&#x53B3;&#x683C;&#x30E2;&#x30FC;&#x30C9;&#x3067;&#x306F;&#x3001;&#x3053;&#x306E;&#x5909;&#x66F4;&#x306F;&#x660E;&#x793A;&#x7684;&#x306B; Vuex &#x306E;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x30CF;&#x30F3;&#x30C9;&#x30E9;&#x5185;&#x90E8;&#x3067;&#x51E6;&#x7406;&#x3055;&#x308C;&#x3066;&#x3044;&#x306A;&#x3044;&#x305F;&#x3081;&#x3001;&#x30A8;&#x30E9;&#x30FC;&#x3092;&#x6295;&#x3052;&#x307E;&#x3059;&#x3002;</p>
 
+<p>&#x305D;&#x308C;&#x306B;&#x5BFE;&#x51E6;&#x3059;&#x308B;&#x305F;&#x3081;&#x306E; &quot;Vuex way&quot; &#x306F;&#x3001;<code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span><span class="token punctuation">&gt;</span></span></code> &#x306E;&#x5024;&#x3092;&#x30D0;&#x30A4;&#x30F3;&#x30C7;&#x30A3;&#x30F3;&#x30B0;&#x3057;&#x3001;<code>input</code> &#x307E;&#x305F;&#x306F; <code>change</code> &#x30A4;&#x30D9;&#x30F3;&#x30C8;&#x3067;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x547C;&#x3073;&#x51FA;&#x3059;&#x3053;&#x3068;&#x3067;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@input</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>updateMessage<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// ...</span>
 
+computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+    message<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> state<span class="token punctuation">.</span>obj<span class="token punctuation">.</span>message
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  updateMessage <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;updateMessage&apos;</span><span class="token punctuation">,</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x30CF;&#x30F3;&#x30C9;&#x30E9;&#x306F;&#x4EE5;&#x4E0B;&#x306E;&#x3088;&#x3046;&#x306B;&#x306A;&#x308A;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// ...</span>
 
+mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  updateMessage <span class="token punctuation">(</span>state<span class="token punctuation">,</span> message<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    state<span class="token punctuation">.</span>obj<span class="token punctuation">.</span>message <span class="token operator">=</span> message
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<h3 id="&#x53CC;&#x65B9;&#x5411;&#x7B97;&#x51FA;&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;">&#x53CC;&#x65B9;&#x5411;&#x7B97;&#x51FA;&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;</h3>
 
+<p>&#x78BA;&#x304B;&#x306B;&#x3001;&#x4E0A;&#x8A18;&#x306E;&#x4F8B;&#x306F;&#x5358;&#x7D14;&#x306A; <code>v-model</code> &#x3068; &#x30ED;&#x30FC;&#x30AB;&#x30EB;&#x30B9;&#x30C6;&#x30FC;&#x30C8;&#x3088;&#x308A;&#x3082;&#x304B;&#x306A;&#x308A;&#x5197;&#x9577;&#x3067;&#x3001;<code>v-model</code> &#x306E;&#x3044;&#x304F;&#x3064;&#x304B;&#x306E;&#x6709;&#x7528;&#x306A;&#x6A5F;&#x80FD;&#x304C;&#x4F7F;&#x3048;&#x307E;&#x305B;&#x3093;&#x3002;&#x4EE3;&#x308F;&#x308A;&#x306B;&#x3001;&#x30BB;&#x30C3;&#x30BF;&#x30FC;&#x3067;&#x53CC;&#x65B9;&#x5411;&#x7B97;&#x51FA;&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x3092;&#x4F7F;&#x3046;&#x30A2;&#x30D7;&#x30ED;&#x30FC;&#x30C1;&#x304C;&#x3042;&#x308A;&#x307E;&#x3059;&#x3002;</p>
 
+<pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js">computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  message<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">get</span> <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>obj<span class="token punctuation">.</span>message
 
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+    <span class="token keyword">set</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+      <span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;updateMessage&apos;</span><span class="token punctuation">,</span> value<span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+
 
+                                
+                                </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="strict.html" class="navigation navigation-prev " aria-label="Previous page: 厳格モード">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="testing.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.10","depth":1,"next":{"title":"テスト","level":"1.11","depth":1,"path":"testing.md","ref":"testing.md","articles":[]},"previous":{"title":"厳格モード","level":"1.9","depth":1,"path":"strict.md","ref":"strict.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":"ja","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"forms.md","mtime":"2018-04-20T00:44:03.863Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"ja"}});
 
+        });
 
+    </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>
 
+

+ 560 - 0
ja/getters.html
View File 

@@ -0,0 +1,560 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="ja" >
 
+    <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.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="mutations.html" />
 
+    
+    
+    <link rel="prev" href="state.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">
 
+            
+                    
+                    Vuex 入門
 
+            
+                </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 active" 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">
 
+            
+                    
+                    厳格モード
 
+            
+                </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">
 
+    
+
 
+    <!-- Title -->
 
+    <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="&#x30B2;&#x30C3;&#x30BF;&#x30FC;">&#x30B2;&#x30C3;&#x30BF;&#x30FC;</h1>
 
+<p>&#x4F8B;&#x3048;&#x3070;&#x9805;&#x76EE;&#x306E;&#x30EA;&#x30B9;&#x30C8;&#x3092;&#x30D5;&#x30A3;&#x30EB;&#x30BF;&#x30EA;&#x30F3;&#x30B0;&#x3057;&#x305F;&#x308A;&#x30AB;&#x30A6;&#x30F3;&#x30C8;&#x3059;&#x308B;&#x3068;&#x304D;&#x306E;&#x3088;&#x3046;&#x306B;&#x3001;&#x30B9;&#x30C8;&#x30A2;&#x306E;&#x72B6;&#x614B;&#x3092;&#x7B97;&#x51FA;&#x3057;&#x305F;&#x3044;&#x3068;&#x304D;&#x304C;&#x3042;&#x308A;&#x307E;&#x3059;&#x3002;</p>
 
+<pre class="language-"><code class="lang-js">computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  doneTodosCount <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>todos<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>todo <span class="token operator">=</span><span class="token operator">&gt;</span> todo<span class="token punctuation">.</span>done<span class="token punctuation">)</span><span class="token punctuation">.</span>length
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>&#x3082;&#x3057;&#x3053;&#x306E;&#x95A2;&#x6570;&#x3092;&#x8907;&#x6570;&#x306E;&#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x3067;&#x5229;&#x7528;&#x3057;&#x305F;&#x304F;&#x306A;&#x3063;&#x305F;&#x3089;&#x3001;&#x95A2;&#x6570;&#x3092;&#x30B3;&#x30D4;&#x30FC;&#x3059;&#x308B;&#x304B;&#x3001;&#x3042;&#x308B;&#x3044;&#x306F;&#x95A2;&#x6570;&#x3092;&#x5171;&#x7528;&#x306E;&#x30D8;&#x30EB;&#x30D1;&#x30FC;&#x306B;&#x5207;&#x308A;&#x51FA;&#x3057;&#x3066;&#x8907;&#x6570;&#x306E;&#x5834;&#x6240;&#x3067;&#x30A4;&#x30F3;&#x30DD;&#x30FC;&#x30C8;&#x3059;&#x308B;&#x5FC5;&#x8981;&#x304C;&#x3042;&#x308A;&#x307E;&#x3059;&#x3002;&#x3057;&#x304B;&#x3057;&#x3001;&#x3069;&#x3061;&#x3089;&#x3082;&#x7406;&#x60F3;&#x7684;&#x3068;&#x306F;&#x3044;&#x3048;&#x307E;&#x305B;&#x3093;&#x3002;</p>
 
+<p>Vuex &#x3092;&#x5229;&#x7528;&#x3059;&#x308B;&#x3068;&#x30B9;&#x30C8;&#x30A2;&#x5185;&#x306B; &quot;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&quot; &#x3092;&#x5B9A;&#x7FA9;&#x3059;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;&#x305D;&#x308C;&#x3089;&#x3092;&#x30B9;&#x30C8;&#x30A2;&#x306E;&#x7B97;&#x51FA;&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x3068;&#x8003;&#x3048;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;&#x7B97;&#x51FA;&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x3068;&#x540C;&#x69D8;&#x306B;&#x3001;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x306E;&#x7D50;&#x679C;&#x306F;&#x305D;&#x306E;&#x4F9D;&#x5B58;&#x95A2;&#x4FC2;&#x306B;&#x57FA;&#x3065;&#x3044;&#x3066;&#x8A08;&#x7B97;&#x3055;&#x308C;&#x3001;&#x4F9D;&#x5B58;&#x95A2;&#x4FC2;&#x306E;&#x4E00;&#x90E8;&#x304C;&#x5909;&#x66F4;&#x3055;&#x308C;&#x305F;&#x3068;&#x304D;&#x306B;&#x306E;&#x307F;&#x518D;&#x8A55;&#x4FA1;&#x3055;&#x308C;&#x307E;&#x3059;&#x3002;</p>
 
+<p>&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x306F;&#x7B2C;1&#x5F15;&#x6570;&#x3068;&#x3057;&#x3066;&#x3001;state &#x3092;&#x53D7;&#x3051;&#x53D6;&#x308A;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js"><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>
 
+    todos<span class="token punctuation">:</span> <span class="token punctuation">[</span>
 
+      <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">&apos;...&apos;</span><span class="token punctuation">,</span> done<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+      <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">&apos;...&apos;</span><span class="token punctuation">,</span> done<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span>
 
+    <span class="token punctuation">]</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    doneTodos<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+      <span class="token keyword">return</span> state<span class="token punctuation">.</span>todos<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>todo <span class="token operator">=</span><span class="token operator">&gt;</span> todo<span class="token punctuation">.</span>done<span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<h3 id="&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x30B9;&#x30BF;&#x30A4;&#x30EB;&#x30A2;&#x30AF;&#x30BB;&#x30B9;">&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x30B9;&#x30BF;&#x30A4;&#x30EB;&#x30A2;&#x30AF;&#x30BB;&#x30B9;</h3>
 
+<p>&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x306F; <code>store.getters</code> &#x30AA;&#x30D6;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x304B;&#x3089;&#x53D6;&#x308A;&#x51FA;&#x3055;&#x308C;&#x3001;&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x3068;&#x3057;&#x3066;&#x30A2;&#x30AF;&#x30BB;&#x30B9;&#x3059;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>doneTodos <span class="token comment" spellcheck="true">// -&gt; [{ id: 1, text: &apos;...&apos;, done: true }]</span>
 
+</code></pre>
 
+<p>&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x306F;&#x7B2C;2&#x5F15;&#x6570;&#x3068;&#x3057;&#x3066;&#x4ED6;&#x306E;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x3092;&#x53D7;&#x3051;&#x53D6;&#x308A;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js">getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  doneTodosCount<span class="token punctuation">:</span> <span class="token punctuation">(</span>state<span class="token punctuation">,</span> getters<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">return</span> getters<span class="token punctuation">.</span>doneTodos<span class="token punctuation">.</span>length
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>doneTodosCount <span class="token comment" spellcheck="true">// -&gt; 1</span>
 
+</code></pre>
 
+<p>&#x3069;&#x306E;&#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x306E;&#x5185;&#x90E8;&#x3067;&#x3082;&#x7C21;&#x5358;&#x306B;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x3092;&#x5229;&#x7528;&#x3059;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js">computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  doneTodosCount <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>getters<span class="token punctuation">.</span>doneTodosCount
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x3068;&#x3057;&#x3066;&#x30A2;&#x30AF;&#x30BB;&#x30B9;&#x3055;&#x308C;&#x308B;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x306F; Vue &#x306E;&#x30EA;&#x30A2;&#x30AF;&#x30C6;&#x30A3;&#x30D6;&#x30B7;&#x30B9;&#x30C6;&#x30E0;&#x306E;&#x4E00;&#x90E8;&#x3068;&#x3057;&#x3066;&#x30AD;&#x30E3;&#x30C3;&#x30B7;&#x30E5;&#x3055;&#x308C;&#x308B;&#x3068;&#x3044;&#x3046;&#x70B9;&#x306B;&#x7559;&#x610F;&#x3057;&#x3066;&#x304F;&#x3060;&#x3055;&#x3044;&#x3002;</p>
 
+<h3 id="&#x30E1;&#x30BD;&#x30C3;&#x30C9;&#x30B9;&#x30BF;&#x30A4;&#x30EB;&#x30A2;&#x30AF;&#x30BB;&#x30B9;">&#x30E1;&#x30BD;&#x30C3;&#x30C9;&#x30B9;&#x30BF;&#x30A4;&#x30EB;&#x30A2;&#x30AF;&#x30BB;&#x30B9;</h3>
 
+<p>&#x95A2;&#x6570;&#x3092;&#x8FD4;&#x308A;&#x5024;&#x306B;&#x3059;&#x308B;&#x3053;&#x3068;&#x3067;&#x3001;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x306B;&#x5F15;&#x6570;&#x3092;&#x6E21;&#x3059;&#x3053;&#x3068;&#x3082;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;&#x3053;&#x308C;&#x306F;&#x7279;&#x306B;&#x30B9;&#x30C8;&#x30A2;&#x306E;&#x4E2D;&#x306E;&#x914D;&#x5217;&#x3092;&#x691C;&#x7D22;&#x3059;&#x308B;&#x6642;&#x306B;&#x5F79;&#x7ACB;&#x3061;&#x307E;&#x3059;&#xFF1A;</p>
 
+<pre class="language-"><code class="lang-js">getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  getTodoById<span class="token punctuation">:</span> <span class="token punctuation">(</span>state<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span>id<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">return</span> state<span class="token punctuation">.</span>todos<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span>todo <span class="token operator">=</span><span class="token operator">&gt;</span> todo<span class="token punctuation">.</span>id <span class="token operator">===</span> id<span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span><span class="token function">getTodoById</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// -&gt; { id: 2, text: &apos;...&apos;, done: false }</span>
 
+</code></pre>
 
+<p>&#x30E1;&#x30BD;&#x30C3;&#x30C9;&#x306B;&#x3088;&#x3063;&#x3066;&#x30A2;&#x30AF;&#x30BB;&#x30B9;&#x3055;&#x308C;&#x308B;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x306F;&#x547C;&#x3073;&#x51FA;&#x3059;&#x5EA6;&#x306B;&#x5B9F;&#x884C;&#x3055;&#x308C;&#x3001;&#x305D;&#x306E;&#x7D50;&#x679C;&#x306F;&#x30AD;&#x30E3;&#x30C3;&#x30B7;&#x30E5;&#x3055;&#x308C;&#x306A;&#x3044;&#x70B9;&#x306B;&#x7559;&#x610F;&#x3057;&#x3066;&#x304F;&#x3060;&#x3055;&#x3044;&#x3002;</p>
 
+<h3 id="mapgetters-&#x30D8;&#x30EB;&#x30D1;&#x30FC;"><code>mapGetters</code> &#x30D8;&#x30EB;&#x30D1;&#x30FC;</h3>
 
+<p><code>mapGetters</code> &#x30D8;&#x30EB;&#x30D1;&#x30FC;&#x306F;&#x30B9;&#x30C8;&#x30A2;&#x306E;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x3092;&#x30ED;&#x30FC;&#x30AB;&#x30EB;&#x306E;&#x7B97;&#x51FA;&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x306B;&#x30DE;&#x30C3;&#x30D4;&#x30F3;&#x30B0;&#x3055;&#x305B;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> mapGetters <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 punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// &#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x3092;&#x3001;&#x30B9;&#x30D7;&#x30EC;&#x30C3;&#x30C9;&#x6F14;&#x7B97;&#x5B50;&#xFF08;object spread operator&#xFF09;&#x3092;&#x4F7F;&#x3063;&#x3066; computed &#x306B;&#x7D44;&#x307F;&#x8FBC;&#x3080;</span>
 
+    <span class="token operator">...</span><span class="token function">mapGetters</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
 
+      <span class="token string">&apos;doneTodosCount&apos;</span><span class="token punctuation">,</span>
 
+      <span class="token string">&apos;anotherGetter&apos;</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>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x3092;&#x7570;&#x306A;&#x308B;&#x540D;&#x524D;&#x3067;&#x30DE;&#x30C3;&#x30D4;&#x30F3;&#x30B0;&#x3055;&#x305B;&#x305F;&#x3044;&#x3068;&#x304D;&#x306F;&#x30AA;&#x30D6;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x3092;&#x4F7F;&#x3044;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token operator">...</span><span class="token function">mapGetters</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// `this.doneCount` &#x3092; `store.getters.doneTodosCount` &#x306B;&#x30DE;&#x30C3;&#x30D4;&#x30F3;&#x30B0;&#x3055;&#x305B;&#x308B;</span>
 
+  doneCount<span class="token punctuation">:</span> <span class="token string">&apos;doneTodosCount&apos;</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+
 
+                                
+                                </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="state.html" class="navigation navigation-prev " aria-label="Previous page: ステート">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="mutations.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.2","depth":2,"next":{"title":"ミューテーション","level":"1.6.3","depth":2,"path":"mutations.md","ref":"mutations.md","articles":[]},"previous":{"title":"ステート","level":"1.6.1","depth":2,"path":"state.md","ref":"state.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":"ja","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"getters.md","mtime":"2018-04-20T00:44:03.864Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"ja"}});
 
+        });
 
+    </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>
 
+

File diff suppressed because it is too large
+ 473 - 0
ja/getting-started.html


+ 518 - 0
ja/hot-reload.html
View File 

@@ -0,0 +1,518 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="ja" >
 
+    <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.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="api.html" />
 
+    
+    
+    <link rel="prev" href="testing.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">
 
+            
+                    
+                    Vuex 入門
 
+            
+                </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 " 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">
 
+            
+                    
+                    厳格モード
 
+            
+                </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 active" 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">
 
+    
+
 
+    <!-- Title -->
 
+    <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="&#x30DB;&#x30C3;&#x30C8;&#x30EA;&#x30ED;&#x30FC;&#x30C7;&#x30A3;&#x30F3;&#x30B0;">&#x30DB;&#x30C3;&#x30C8;&#x30EA;&#x30ED;&#x30FC;&#x30C7;&#x30A3;&#x30F3;&#x30B0;</h1>
 
+<p>Vuex &#x306F; webpack &#x306E; <a href="https://webpack.js.org/guides/hot-module-replacement/" target="_blank">Hot Module Replacement API</a> &#x3092;&#x4F7F;&#x7528;&#x3059;&#x308B;&#x3053;&#x3068;&#x3067;&#x3001;&#x30A2;&#x30D7;&#x30EA;&#x30B1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x958B;&#x767A;&#x3092;&#x884C;&#x3063;&#x3066;&#x3044;&#x308B;&#x9593;&#x306E;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3001;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3001;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3001;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x306E;&#x30DB;&#x30C3;&#x30C8;&#x30EA;&#x30ED;&#x30FC;&#x30C7;&#x30A3;&#x30F3;&#x30B0;&#x3092;&#x30B5;&#x30DD;&#x30FC;&#x30C8;&#x3057;&#x307E;&#x3059;&#x3002;Browserify &#x3067;&#x306F; <a href="https://github.com/AgentME/browserify-hmr/" target="_blank">browserify-hmr</a> &#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;&#x3092;&#x4F7F;&#x7528;&#x3059;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;</p>
 
+<p>&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3068;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x30DB;&#x30C3;&#x30C8;&#x30EA;&#x30ED;&#x30FC;&#x30C7;&#x30A3;&#x30F3;&#x30B0;&#x306E;&#x305F;&#x3081;&#x306B;&#x3001;<code>store.hotUpdate()</code>  API &#x30E1;&#x30BD;&#x30C3;&#x30C9;&#x3092;&#x5229;&#x7528;&#x3059;&#x308B;&#x5FC5;&#x8981;&#x304C;&#x3042;&#x308A;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// store.js</span>
 
+<span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">&apos;vue&apos;</span>
 
+<span class="token keyword">import</span> Vuex <span class="token keyword">from</span> <span class="token string">&apos;vuex&apos;</span>
 
+<span class="token keyword">import</span> mutations <span class="token keyword">from</span> <span class="token string">&apos;./mutations&apos;</span>
 
+<span class="token keyword">import</span> moduleA <span class="token keyword">from</span> <span class="token string">&apos;./modules/a&apos;</span>
 
+
 
+Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Vuex<span class="token punctuation">)</span>
 
+
 
+<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</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>
 
+  mutations<span class="token punctuation">,</span>
 
+  modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    a<span class="token punctuation">:</span> moduleA
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+
 
+<span class="token keyword">if</span> <span class="token punctuation">(</span>module<span class="token punctuation">.</span>hot<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// &#x30DB;&#x30C3;&#x30C8;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3068;&#x3057;&#x3066;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3068;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3092;&#x53D7;&#x3051;&#x4ED8;&#x3051;&#x307E;&#x3059;</span>
 
+  module<span class="token punctuation">.</span>hot<span class="token punctuation">.</span><span class="token function">accept</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&apos;./mutations&apos;</span><span class="token punctuation">,</span> <span class="token string">&apos;./modules/a&apos;</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// &#x66F4;&#x65B0;&#x3055;&#x308C;&#x305F;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3092;&#x30A4;&#x30F3;&#x30DD;&#x30FC;&#x30C8;&#x3059;&#x308B;</span>
 
+    <span class="token comment" spellcheck="true">// babel 6 &#x306E;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x51FA;&#x529B;&#x306E;&#x305F;&#x3081;&#x3001;&#x3053;&#x3053;&#x3067;&#x306F; .default &#x3092;&#x8FFD;&#x52A0;&#x3057;&#x306A;&#x3051;&#x308C;&#x3070;&#x306A;&#x3089;&#x306A;&#x3044;</span>
 
+    <span class="token keyword">const</span> newActions <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&apos;./actions&apos;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword">default</span>
 
+    <span class="token keyword">const</span> newMutations <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&apos;./mutations&apos;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword">default</span>
 
+    <span class="token comment" spellcheck="true">// &#x65B0;&#x3057;&#x3044;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3068;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306B;&#x30B9;&#x30EF;&#x30C3;&#x30D7;</span>
 
+    store<span class="token punctuation">.</span><span class="token function">hotUpdate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+      mutations<span class="token punctuation">:</span> newMutations<span class="token punctuation">,</span>
 
+      modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+        a<span class="token punctuation">:</span> newModuleA
 
+      <span class="token punctuation">}</span>
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>&#x30DB;&#x30C3;&#x30C8;&#x30EA;&#x30ED;&#x30FC;&#x30C7;&#x30A3;&#x30F3;&#x30B0;&#x3092;&#x8A66;&#x3057;&#x305F;&#x3044;&#x5834;&#x5408;&#x306F;&#x3001;<a href="https://github.com/vuejs/vuex/tree/dev/examples/counter-hot" target="_blank">counter-hot example</a>&#x3092;&#x30C1;&#x30A7;&#x30C3;&#x30AF;&#x30A2;&#x30A6;&#x30C8;&#x3057;&#x3066;&#x304F;&#x3060;&#x3055;&#x3044;&#x3002;</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="testing.html" class="navigation navigation-prev " aria-label="Previous page: テスト">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="api.html" class="navigation navigation-next " aria-label="Next page: API リファレンス">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"ホットリローディング","level":"1.12","depth":1,"next":{"title":"API リファレンス","level":"1.13","depth":1,"path":"api.md","ref":"api.md","articles":[]},"previous":{"title":"テスト","level":"1.11","depth":1,"path":"testing.md","ref":"testing.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":"ja","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"hot-reload.md","mtime":"2018-04-20T00:44:03.864Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"ja"}});
 
+        });
 
+    </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>
 
+

BIN
ja/images/flow.png
View File


BIN
ja/images/vuex.png
View File


+ 492 - 0
ja/index.html
View File 

@@ -0,0 +1,492 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="ja" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Introduction · 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">
 
+
 
+    
+    
+
 
+    </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 active" 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">
 
+            
+                    
+                    Vuex 入門
 
+            
+                </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 " 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">
 
+            
+                    
+                    厳格モード
 
+            
+                </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">
 
+    
+
 
+    <!-- Title -->
 
+    <h1>
 
+        <i class="fa fa-circle-o-notch fa-spin"></i>
 
+        <a href="." >Introduction</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="vuex">Vuex</h1>
 
+<blockquote>
 
+<p>&#x6CE8;&#x610F;: TypeScript &#x30E6;&#x30FC;&#x30B6;&#x5411;&#x3051;&#x306F;&#x3001;vuex@3.0+ &#x3068; vue@2.5+ &#x304C;&#x5FC5;&#x9808;&#x3001;&#x9006;&#x3082;&#x307E;&#x305F;&#x540C;&#x69D8;&#x3067;&#x3059;&#x3002;</p>
 
+</blockquote>
 
+<ul>
 
+<li><a href="https://github.com/vuejs/vuex/releases" target="_blank">&#x30EA;&#x30EA;&#x30FC;&#x30B9;&#x30CE;&#x30FC;&#x30C8;</a></li>
 
+<li><a href="installation.html">&#x30A4;&#x30F3;&#x30B9;&#x30C8;&#x30FC;&#x30EB;</a></li>
 
+<li><a href="intro.html">Vuex &#x3068;&#x306F;&#x4F55;&#x304B;?</a></li>
 
+<li><a href="getting-started.html">Vuex &#x5165;&#x9580;</a></li>
 
+<li><a href="core-concepts.html">&#x30B3;&#x30A2;&#x30B3;&#x30F3;&#x30BB;&#x30D7;&#x30C8;</a><ul>
 
+<li><a href="state.html">&#x30B9;&#x30C6;&#x30FC;&#x30C8;</a></li>
 
+<li><a href="getters.html">&#x30B2;&#x30C3;&#x30BF;&#x30FC;</a></li>
 
+<li><a href="mutations.html">&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;</a></li>
 
+<li><a href="actions.html">&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;</a></li>
 
+<li><a href="modules.html">&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;</a></li>
 
+</ul>
 
+</li>
 
+<li><a href="structure.html">&#x30A2;&#x30D7;&#x30EA;&#x30B1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x69CB;&#x9020;</a></li>
 
+<li><a href="plugins.html">&#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;</a></li>
 
+<li><a href="strict.html">&#x53B3;&#x683C;&#x30E2;&#x30FC;&#x30C9;</a></li>
 
+<li><a href="forms.html">&#x30D5;&#x30A9;&#x30FC;&#x30E0;&#x306E;&#x6271;&#x3044;</a></li>
 
+<li><a href="testing.html">&#x30C6;&#x30B9;&#x30C8;</a></li>
 
+<li><a href="hot-reload.html">&#x30DB;&#x30C3;&#x30C8;&#x30EA;&#x30ED;&#x30FC;&#x30C7;&#x30A3;&#x30F3;&#x30B0;</a></li>
 
+<li><a href="api.html">API &#x30EA;&#x30D5;&#x30A1;&#x30EC;&#x30F3;&#x30B9;</a></li>
 
+</ul>
 
+
 
+                                
+                                </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>
 
+
 
+            
+                
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Introduction","level":"1.1","depth":1,"next":{"title":"リリースノート","level":"1.2","depth":1,"url":"https://github.com/vuejs/vuex/releases","ref":"https://github.com/vuejs/vuex/releases","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":"ja","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"README.md","mtime":"2018-04-20T00:44:03.862Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"ja"}});
 
+        });
 
+    </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>
 
+

+ 503 - 0
ja/installation.html
View File 

@@ -0,0 +1,503 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="ja" >
 
+    <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.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="intro.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 active" 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">
 
+            
+                    
+                    Vuex 入門
 
+            
+                </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 " 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">
 
+            
+                    
+                    厳格モード
 
+            
+                </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">
 
+    
+
 
+    <!-- Title -->
 
+    <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="&#x30A4;&#x30F3;&#x30B9;&#x30C8;&#x30FC;&#x30EB;">&#x30A4;&#x30F3;&#x30B9;&#x30C8;&#x30FC;&#x30EB;</h1>
 
+<h3 id="&#x76F4;&#x63A5;&#x30C0;&#x30A6;&#x30F3;&#x30ED;&#x30FC;&#x30C9;&#x3059;&#x308B;--cdn">&#x76F4;&#x63A5;&#x30C0;&#x30A6;&#x30F3;&#x30ED;&#x30FC;&#x30C9;&#x3059;&#x308B; / CDN</h3>
 
+<p><a href="https://unpkg.com/vuex" target="_blank">https://unpkg.com/vuex</a></p>
 
+<!--email_off-->
 
+<p><a href="https://unpkg.com" target="_blank">Unpkg.com</a> &#x3067; NPM &#x30D9;&#x30FC;&#x30B9;&#x306E; CDN &#x30EA;&#x30F3;&#x30AF;&#x304C;&#x63D0;&#x4F9B;&#x3055;&#x308C;&#x3066;&#x3044;&#x307E;&#x3059;&#x3002;&#x4E0A;&#x8A18;&#x30EA;&#x30F3;&#x30AF;&#x306F;&#x5E38;&#x306B; NPM &#x306E;&#x6700;&#x65B0;&#x306E;&#x30EA;&#x30EA;&#x30FC;&#x30B9;&#x3092;&#x6307;&#x3057;&#x307E;&#x3059;&#x3002;<code>https://unpkg.com/vuex@2.0.0</code> &#x306E;&#x3088;&#x3046;&#x306A; URL &#x306B;&#x3088;&#x3063;&#x3066;&#x7279;&#x5B9A;&#x306E;&#x30D0;&#x30FC;&#x30B8;&#x30E7;&#x30F3;/&#x30BF;&#x30B0;&#x3092;&#x5229;&#x7528;&#x3059;&#x308B;&#x3053;&#x3068;&#x3082;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;
 
+<!--/email_off--></p>
 
+<p>Vue &#x306E;&#x3042;&#x3068;&#x3067; <code>vuex</code> &#x3092;&#x53D6;&#x308A;&#x8FBC;&#x3080;&#x3068;&#x81EA;&#x52D5;&#x7684;&#x306B; Vuex &#x304C;&#x5C0E;&#x5165;&#x3055;&#x308C;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>/path/to/vue.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
 
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>/path/to/vuex.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
 
+</code></pre>
 
+<h3 id="npm">NPM</h3>
 
+<pre class="language-"><code class="lang-bash"><span class="token function">npm</span> <span class="token function">install</span> vuex --save
 
+</code></pre>
 
+<h3 id="yarn">Yarn</h3>
 
+<pre class="language-"><code class="lang-bash">yarn add vuex
 
+</code></pre>
 
+<p>&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x30B7;&#x30B9;&#x30C6;&#x30E0;&#x3067;&#x5229;&#x7528;&#x3055;&#x308C;&#x308B;&#x5834;&#x5408;&#x3001; <code>Vue.use()</code> &#x306B;&#x3088;&#x3063;&#x3066; Vuex &#x3092;&#x660E;&#x793A;&#x7684;&#x306B;&#x5C0E;&#x5165;&#x3059;&#x308B;&#x5FC5;&#x8981;&#x304C;&#x3042;&#x308A;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">&apos;vue&apos;</span>
 
+<span class="token keyword">import</span> Vuex <span class="token keyword">from</span> <span class="token string">&apos;vuex&apos;</span>
 
+
 
+Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Vuex<span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>&#x30B0;&#x30ED;&#x30FC;&#x30D0;&#x30EB;&#x306A;&#x30B9;&#x30AF;&#x30EA;&#x30D7;&#x30C8;&#x30BF;&#x30B0;&#x3092;&#x5229;&#x7528;&#x3059;&#x308B;&#x5834;&#x5408;&#x306B;&#x306F;&#x3053;&#x306E;&#x3088;&#x3046;&#x306B;&#x3059;&#x308B;&#x5FC5;&#x8981;&#x306F;&#x3042;&#x308A;&#x307E;&#x305B;&#x3093;&#x3002;</p>
 
+<h3 id="&#x958B;&#x767A;&#x7248;&#x30D3;&#x30EB;&#x30C9;">&#x958B;&#x767A;&#x7248;&#x30D3;&#x30EB;&#x30C9;</h3>
 
+<p>&#x6700;&#x65B0;&#x306E;&#x958B;&#x767A;&#x7248;&#x30D3;&#x30EB;&#x30C9;&#x3092;&#x5229;&#x7528;&#x3057;&#x305F;&#x3044;&#x5834;&#x5408;&#x306B;&#x306F;&#x3001; Github &#x304B;&#x3089;&#x76F4;&#x63A5;&#x30AF;&#x30ED;&#x30FC;&#x30F3;&#x3057; <code>vuex</code> &#x3092;&#x81EA;&#x8EAB;&#x3067;&#x30D3;&#x30EB;&#x30C9;&#x3059;&#x308B;&#x5FC5;&#x8981;&#x304C;&#x3042;&#x308A;&#x307E;&#x3059;&#x3002;</p>
 
+<pre class="language-"><code class="lang-bash"><span class="token function">git</span> clone https://github.com/vuejs/vuex.git node_modules/vuex
 
+<span class="token function">cd</span> node_modules/vuex
 
+<span class="token function">npm</span> <span class="token function">install</span>
 
+<span class="token function">npm</span> run build
 
+</code></pre>
 
+
 
+                                
+                                </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-next navigation-unique" aria-label="Next page: Vuex とは何か?">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"インストール","level":"1.3","depth":1,"next":{"title":"Vuex とは何か?","level":"1.4","depth":1,"path":"intro.md","ref":"intro.md","articles":[]},"previous":{"title":"リリースノート","level":"1.2","depth":1,"url":"https://github.com/vuejs/vuex/releases","ref":"https://github.com/vuejs/vuex/releases","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":"ja","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"installation.md","mtime":"2018-04-20T00:44:03.865Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"ja"}});
 
+        });
 
+    </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>
 
+

+ 532 - 0
ja/intro.html
View File 

@@ -0,0 +1,532 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="ja" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Vuex とは何か? · 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="getting-started.html" />
 
+    
+    
+    <link rel="prev" href="installation.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 active" 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">
 
+            
+                    
+                    Vuex 入門
 
+            
+                </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 " 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">
 
+            
+                    
+                    厳格モード
 
+            
+                </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">
 
+    
+
 
+    <!-- Title -->
 
+    <h1>
 
+        <i class="fa fa-circle-o-notch fa-spin"></i>
 
+        <a href="." >Vuex とは何か?</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="vuex-&#x3068;&#x306F;&#x4F55;&#x304B;&#xFF1F;">Vuex &#x3068;&#x306F;&#x4F55;&#x304B;&#xFF1F;</h1>
 
+<p>Vuex &#x306F; Vue.js &#x30A2;&#x30D7;&#x30EA;&#x30B1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x305F;&#x3081;&#x306E; <strong>&#x72B6;&#x614B;&#x7BA1;&#x7406;&#x30D1;&#x30BF;&#x30FC;&#x30F3; + &#x30E9;&#x30A4;&#x30D6;&#x30E9;&#x30EA;</strong>&#x3067;&#x3059;&#x3002;
 
+&#x3053;&#x308C;&#x306F;&#x4E88;&#x6E2C;&#x53EF;&#x80FD;&#x306A;&#x65B9;&#x6CD5;&#x306B;&#x3088;&#x3063;&#x3066;&#x306E;&#x307F;&#x72B6;&#x614B;&#x306E;&#x5909;&#x7570;&#x3092;&#x884C;&#x3046;&#x3068;&#x3044;&#x3046;&#x30EB;&#x30FC;&#x30EB;&#x3092;&#x4FDD;&#x8A3C;&#x3057;&#x3001;&#x30A2;&#x30D7;&#x30EA;&#x30B1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x5185;&#x306E;&#x5168;&#x3066;&#x306E;&#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x306E;&#x305F;&#x3081;&#x306E;&#x96C6;&#x4E2D;&#x578B;&#x306E;&#x30B9;&#x30C8;&#x30A2;&#x3068;&#x3057;&#x3066;&#x6A5F;&#x80FD;&#x3057;&#x307E;&#x3059;&#x3002;
 
+&#x307E;&#x305F; Vue &#x516C;&#x5F0F;&#x306E;<a href="https://github.com/vuejs/vue-devtools" target="_blank">&#x958B;&#x767A;&#x30C4;&#x30FC;&#x30EB;&#x62E1;&#x5F35;</a>&#x3068;&#x9023;&#x643A;&#x3057;&#x3001;&#x8A2D;&#x5B9A;&#x306A;&#x3057;&#x3067;&#x30BF;&#x30A4;&#x30E0;&#x30C8;&#x30E9;&#x30D9;&#x30EB;&#x30C7;&#x30D0;&#x30C3;&#x30B0;&#x3084;&#x30B9;&#x30C6;&#x30FC;&#x30C8;&#x306E;&#x30B9;&#x30CA;&#x30C3;&#x30D7;&#x30B7;&#x30E7;&#x30C3;&#x30C8;&#x306E;&#x30A8;&#x30AF;&#x30B9;&#x30DD;&#x30FC;&#x30C8;&#x3084;&#x30A4;&#x30F3;&#x30DD;&#x30FC;&#x30C8;&#x306E;&#x3088;&#x3046;&#x306A;&#x9AD8;&#x5EA6;&#x306A;&#x6A5F;&#x80FD;&#x3092;&#x63D0;&#x4F9B;&#x3057;&#x307E;&#x3059;&#x3002;</p>
 
+<h3 id="&#x72B6;&#x614B;&#x7BA1;&#x7406;&#x30D1;&#x30BF;&#x30FC;&#x30F3;&#x3068;&#x306F;&#x306A;&#x3093;&#x3067;&#x3059;&#x304B;&#xFF1F;">&quot;&#x72B6;&#x614B;&#x7BA1;&#x7406;&#x30D1;&#x30BF;&#x30FC;&#x30F3;&quot;&#x3068;&#x306F;&#x306A;&#x3093;&#x3067;&#x3059;&#x304B;&#xFF1F;</h3>
 
+<p>&#x5358;&#x7D14;&#x306A; Vue &#x3067;&#x4F5C;&#x3089;&#x308C;&#x305F;&#x30AB;&#x30A6;&#x30F3;&#x30BF;&#x30FC;&#x30A2;&#x30D7;&#x30EA;&#x3092;&#x307F;&#x3066;&#x307F;&#x307E;&#x3057;&#x3087;&#x3046;:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// state</span>
 
+  data <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">return</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><span class="token punctuation">,</span>
 
+  <span class="token comment" spellcheck="true">// view</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>
 
+  <span class="token comment" spellcheck="true">// actions</span>
 
+  methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    increment <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+      <span class="token keyword">this</span><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>&#x3053;&#x308C;&#x306F;&#x3044;&#x304F;&#x3064;&#x304B;&#x306E;&#x8981;&#x7D20;&#x3092;&#x30A2;&#x30D7;&#x30EA;&#x81EA;&#x8EAB;&#x306B;&#x542B;&#x3093;&#x3067;&#x3044;&#x307E;&#x3059;:</p>
 
+<ul>
 
+<li><strong>&#x72B6;&#x614B;</strong>&#x3001;&#x3053;&#x308C;&#x306F;&#x79C1;&#x9054;&#x306E;&#x30A2;&#x30D7;&#x30EA;&#x3092;&#x52D5;&#x304B;&#x3059;&#x4FE1;&#x983C;&#x3067;&#x304D;&#x308B;&#x60C5;&#x5831;&#x6E90;(the source of truth)&#x3067;&#x3059;&#x3002;</li>
 
+<li><strong>&#x30D3;&#x30E5;&#x30FC;</strong>&#x3001;&#x3053;&#x308C;&#x306F;<strong>&#x72B6;&#x614B;</strong>&#x306E;&#x305F;&#x3060;&#x306E;&#x5BA3;&#x8A00;&#x7684;&#x306A;&#x30DE;&#x30C3;&#x30D4;&#x30F3;&#x30B0;&#x3067;&#x3059;&#x3002;</li>
 
+<li><strong>&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;</strong>&#x3001;&#x3053;&#x308C;&#x306F;<strong>&#x30D3;&#x30E5;&#x30FC;</strong>&#x304B;&#x3089;&#x306E;&#x30E6;&#x30FC;&#x30B6;&#x30FC;&#x5165;&#x529B;&#x306B;&#x53CD;&#x5FDC;&#x3057;&#x3066;&#x3001;&#x72B6;&#x614B;&#x306E;&#x5909;&#x66F4;&#x3092;&#x53EF;&#x80FD;&#x306B;&#x3059;&#x308B;&#x65B9;&#x6CD5;&#x3067;&#x3059;&#x3002;</li>
 
+</ul>
 
+<p>&#x3053;&#x308C;&#x3089;&#x306F;&quot;&#x5358;&#x65B9;&#x5411;&#x30C7;&#x30FC;&#x30BF;&#x30D5;&#x30ED;&#x30FC;&quot;&#x306E;&#x30B3;&#x30F3;&#x30BB;&#x30D7;&#x30C8;&#x306E;&#x6975;&#x3081;&#x3066;&#x30B7;&#x30F3;&#x30D7;&#x30EB;&#x306A;&#x8CAC;&#x52D9;&#x3067;&#x3059;:</p>
 
+<p style="text-align: center; margin: 2em">
 
+  <img style="width:100%;max-width:450px;" src="images/flow.png">
 
+</p>
 
+
 
+<p>&#x3057;&#x304B;&#x3057;&#x3001;&#x5358;&#x7D14;&#x3055;&#x306F;&#x3001;<strong>&#x5171;&#x901A;&#x306E;&#x72B6;&#x614B;&#x3092;&#x5171;&#x6709;&#x3059;&#x308B;&#x8907;&#x6570;&#x306E;&#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x3092;&#x6301;&#x3063;&#x305F;&#x3068;&#x304D;&#x306B;</strong>&#x3001;&#x3059;&#x3050;&#x306B;&#x7834;&#x7DBB;&#x3057;&#x307E;&#x3059;:</p>
 
+<ul>
 
+<li>&#x8907;&#x6570;&#x306E;&#x30D3;&#x30E5;&#x30FC;&#x304C;&#x540C;&#x3058;&#x72B6;&#x614B;&#x306B;&#x4F9D;&#x5B58;&#x3059;&#x308B;&#x3053;&#x3068;&#x304C;&#x3042;&#x308A;&#x307E;&#x3059;&#x3002;</li>
 
+<li>&#x7570;&#x306A;&#x308B;&#x30D3;&#x30E5;&#x30FC;&#x304B;&#x3089;&#x306E;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3067;&#x3001;&#x540C;&#x3058;&#x72B6;&#x614B;&#x3092;&#x5909;&#x66F4;&#x3059;&#x308B;&#x5FC5;&#x8981;&#x304C;&#x3042;&#x308A;&#x307E;&#x3059;&#x3002;</li>
 
+</ul>
 
+<p>&#x4E00;&#x3064;&#x76EE;&#x306F;&#x3001;&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3; (props) &#x3068;&#x3057;&#x3066;&#x6DF1;&#x304F;&#x5165;&#x308C;&#x5B50;&#x306B;&#x306A;&#x3063;&#x305F;&#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x306B;&#x6E21;&#x3059;&#x306E;&#x306F;&#x9762;&#x5012;&#x3067;&#x3001;&#x5144;&#x5F1F;&#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x3067;&#x306F;&#x5358;&#x7D14;&#x306B;&#x6A5F;&#x80FD;&#x3057;&#x307E;&#x305B;&#x3093;&#x3002;&#x4E8C;&#x3064;&#x76EE;&#x306F;&#x3001;&#x89AA;&#x5B50;&#x306E;&#x30A4;&#x30F3;&#x30B9;&#x30BF;&#x30F3;&#x30B9;&#x3092;&#x76F4;&#x63A5;&#x53C2;&#x7167;&#x3057;&#x305F;&#x308A;&#x3001;&#x30A4;&#x30D9;&#x30F3;&#x30C8;&#x3092;&#x4ECB;&#x3057;&#x3066;&#x8907;&#x6570;&#x306E;&#x72B6;&#x614B;&#x306E;&#x30B3;&#x30D4;&#x30FC;&#x3092;&#x5909;&#x66F4;&#x3001;&#x540C;&#x671F;&#x3059;&#x308B;&#x3053;&#x3068;&#x3092;&#x8A66;&#x307F;&#x308B;&#x30BD;&#x30EA;&#x30E5;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306B;&#x983C;&#x3063;&#x3066;&#x3044;&#x308B;&#x3053;&#x3068;&#x304C;&#x3088;&#x304F;&#x3042;&#x308A;&#x307E;&#x3059;&#x3002;&#x3053;&#x308C;&#x3089;&#x306E;&#x30D1;&#x30BF;&#x30FC;&#x30F3;&#x306F;&#x3001;&#x3044;&#x305A;&#x308C;&#x3082;&#x8106;&#x304F;&#x3001;&#x3059;&#x3050;&#x306B;&#x30E1;&#x30F3;&#x30C6;&#x30CA;&#x30F3;&#x30B9;&#x304C;&#x56F0;&#x96E3;&#x306A;&#x30B3;&#x30FC;&#x30C9;&#x306B;&#x7E4B;&#x304C;&#x308A;&#x307E;&#x3059;&#x3002;</p>
 
+<p>&#x3067;&#x306F;&#x3001;&#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x304B;&#x3089;&#x5171;&#x6709;&#x3057;&#x3066;&#x3044;&#x308B;&#x72B6;&#x614B;&#x3092;&#x62BD;&#x51FA;&#x3057;&#x3001;&#x305D;&#x308C;&#x3092;&#x30B0;&#x30ED;&#x30FC;&#x30D0;&#x30EB;&#x30B7;&#x30F3;&#x30B0;&#x30EB;&#x30C8;&#x30F3;&#x3067;&#x7BA1;&#x7406;&#x3059;&#x308B;&#x306E;&#x306F;&#x3069;&#x3046;&#x3067;&#x3057;&#x3087;&#x3046;&#x304B;&#xFF1F; &#x3053;&#x308C;&#x306B;&#x3088;&#x308A;&#x3001;&#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x30C4;&#x30EA;&#x30FC;&#x306F;&#x5927;&#x304D;&#x306A; &quot;&#x30D3;&#x30E5;&#x30FC;&quot; &#x3068;&#x306A;&#x308A;&#x3001;&#x3069;&#x306E;&#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x3082;&#x30C4;&#x30EA;&#x30FC;&#x5185;&#x306E;&#x3069;&#x3053;&#x306B;&#x3042;&#x3063;&#x3066;&#x3082;&#x72B6;&#x614B;&#x306B;&#x30A2;&#x30AF;&#x30BB;&#x30B9;&#x3057;&#x305F;&#x308A;&#x3001;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x30C8;&#x30EA;&#x30AC;&#x30FC;&#x3067;&#x304D;&#x307E;&#x3059;!</p>
 
+<p>&#x3055;&#x3089;&#x306B;&#x3001;&#x72B6;&#x614B;&#x7BA1;&#x7406;&#x306B;&#x95A2;&#x308F;&#x308B;&#x6982;&#x5FF5;&#x3092;&#x5B9A;&#x7FA9;&#x3001;&#x5206;&#x96E2;&#x3057;&#x3001;&#x7279;&#x5B9A;&#x306E;&#x30EB;&#x30FC;&#x30EB;&#x3092;&#x6577;&#x304F;&#x3053;&#x3068;&#x3067;&#x3001;&#x30B3;&#x30FC;&#x30C9;&#x306E;&#x69CB;&#x9020;&#x3068;&#x4FDD;&#x5B88;&#x6027;&#x3092;&#x5411;&#x4E0A;&#x3055;&#x305B;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;</p>
 
+<p>&#x3053;&#x308C;&#x304C; Vuex &#x306E;&#x80CC;&#x666F;&#x306B;&#x3042;&#x308B;&#x57FA;&#x672C;&#x7684;&#x306A;&#x30A2;&#x30A4;&#x30C7;&#x30A3;&#x30A2;&#x3067;&#x3042;&#x308A;&#x3001;<a href="https://facebook.github.io/flux/docs/overview.html" target="_blank">Flux</a>&#x3001; <a href="http://redux.js.org/" target="_blank">Redux</a> &#x305D;&#x3057;&#x3066; <a href="https://guide.elm-lang.org/architecture/" target="_blank">The Elm Architecture</a>&#x304B;&#x3089;&#x5F71;&#x97FF;&#x3092;&#x53D7;&#x3051;&#x3066;&#x3044;&#x307E;&#x3059;&#x3002;
 
+&#x4ED6;&#x306E;&#x30D1;&#x30BF;&#x30FC;&#x30F3;&#x3068;&#x7570;&#x306A;&#x308B;&#x306E;&#x306F;&#x3001;Vuex &#x306F;&#x52B9;&#x7387;&#x7684;&#x306A;&#x66F4;&#x65B0;&#x306E;&#x305F;&#x3081;&#x306B;&#x3001;Vue.js &#x306E;&#x7C92;&#x5EA6;&#x306E;&#x7D30;&#x304B;&#x3044;&#x30EA;&#x30A2;&#x30AF;&#x30C6;&#x30A3;&#x30D3;&#x30C6;&#x30A3;&#x30B7;&#x30B9;&#x30C6;&#x30E0;&#x3092;&#x5229;&#x7528;&#x3059;&#x308B;&#x3088;&#x3046;&#x7279;&#x5225;&#x306B;&#x8ABF;&#x6574;&#x3057;&#x3066;&#x5B9F;&#x88C5;&#x3055;&#x308C;&#x305F;&#x30E9;&#x30A4;&#x30D6;&#x30E9;&#x30EA;&#x3060;&#x3068;&#x3044;&#x3046;&#x3053;&#x3068;&#x3067;&#x3059;&#x3002;</p>
 
+<p><img src="images/vuex.png" alt="vuex"></p>
 
+<h3 id="&#x3044;&#x3064;&#x3001;vuex&#x3092;&#x4F7F;&#x3046;&#x3079;&#x304D;&#x3067;&#x3057;&#x3087;&#x3046;&#x304B;&#xFF1F;">&#x3044;&#x3064;&#x3001;Vuex&#x3092;&#x4F7F;&#x3046;&#x3079;&#x304D;&#x3067;&#x3057;&#x3087;&#x3046;&#x304B;&#xFF1F;</h3>
 
+<p>Vuex &#x306F;&#x3001;&#x5171;&#x6709;&#x72B6;&#x614B;&#x306E;&#x7BA1;&#x7406;&#x306B;&#x5F79;&#x7ACB;&#x3061;&#x307E;&#x3059;&#x304C;&#x3001;&#x3055;&#x3089;&#x306B;&#x6982;&#x5FF5;&#x3084;&#x30DC;&#x30A4;&#x30E9;&#x30FC;&#x30D7;&#x30EC;&#x30FC;&#x30C8;&#x306E;&#x30B3;&#x30B9;&#x30C8;&#x304C;&#x304B;&#x304B;&#x308A;&#x307E;&#x3059;&#x3002;&#x3053;&#x308C;&#x306F;&#x3001;&#x77ED;&#x671F;&#x7684;&#x751F;&#x7523;&#x6027;&#x3068;&#x9577;&#x671F;&#x7684;&#x751F;&#x7523;&#x6027;&#x306E;&#x30C8;&#x30EC;&#x30FC;&#x30C9;&#x30AA;&#x30D5;&#x3067;&#x3059;&#x3002;</p>
 
+<p>&#x3082;&#x3057;&#x3001;&#x3042;&#x306A;&#x305F;&#x304C;&#x5927;&#x898F;&#x6A21;&#x306A; SPA &#x3092;&#x69CB;&#x7BC9;&#x3059;&#x308B;&#x3053;&#x3068;&#x306A;&#x304F;&#x3001;Vuex &#x3092;&#x5C0E;&#x5165;&#x3057;&#x305F;&#x5834;&#x5408;&#x3001;&#x5197;&#x9577;&#x3067;&#x6050;&#x308D;&#x3057;&#x3044;&#x3068;&#x611F;&#x3058;&#x308B;&#x304B;&#x3082;&#x3057;&#x308C;&#x307E;&#x305B;&#x3093;&#x3002;&#x305D;&#x3046;&#x611F;&#x3058;&#x308B;&#x3053;&#x3068;&#x306F;&#x5168;&#x304F;&#x666E;&#x901A;&#x3067;&#x3059;&#x3002;&#x3042;&#x306A;&#x305F;&#x306E;&#x30A2;&#x30D7;&#x30EA;&#x304C;&#x30B7;&#x30F3;&#x30D7;&#x30EB;&#x3067;&#x3042;&#x308C;&#x3070;&#x3001;Vuex &#x306A;&#x3057;&#x3067;&#x554F;&#x984C;&#x306A;&#x3044;&#x3067;&#x3057;&#x3087;&#x3046;&#x3002;&#x5358;&#x7D14;&#x306A; <a href="http://jp.vuejs.org/v2/guide/components.html#%E8%A6%AA%E5%AD%90%E9%96%93%E4%BB%A5%E5%A4%96%E3%81%AE%E9%80%9A%E4%BF%A1" target="_blank">&#x30B0;&#x30ED;&#x30FC;&#x30D0;&#x30EB;&#x30A4;&#x30D9;&#x30F3;&#x30C8;&#x30D0;&#x30B9;</a> &#x304C;&#x5FC5;&#x8981;&#x306A;&#x3060;&#x3051;&#x304B;&#x3082;&#x3057;&#x308C;&#x307E;&#x305B;&#x3093;&#x3002;&#x3057;&#x304B;&#x3057;&#x3001;&#x4E2D;&#x898F;&#x6A21;&#x304B;&#x3089;&#x5927;&#x898F;&#x6A21;&#x306E; SPA &#x3092;&#x69CB;&#x7BC9;&#x3059;&#x308B;&#x5834;&#x5408;&#x306F;&#x3001;Vue &#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x306E;&#x5916;&#x306E;&#x72B6;&#x614B;&#x3092;&#x3069;&#x3046;&#x3084;&#x3063;&#x3066;&#x3046;&#x307E;&#x304F;&#x6271;&#x3046;&#x304B;&#x8003;&#x3048;&#x308B;&#x7D76;&#x597D;&#x306E;&#x6A5F;&#x4F1A;&#x3067;&#x3059;&#x3002;Vuex &#x306F;&#x81EA;&#x7136;&#x306A;&#x6B21;&#x306E;&#x30B9;&#x30C6;&#x30C3;&#x30D7;&#x3068;&#x306A;&#x308B;&#x3067;&#x3057;&#x3087;&#x3046;&#x3002;&#x3053;&#x308C;&#x306F; Redux &#x306E;&#x4F5C;&#x8005;&#x3001;Dan Abramov &#x304B;&#x3089;&#x306E;&#x826F;&#x3044;&#x5F15;&#x7528;&#x3067;&#x3059;:</p>
 
+<blockquote>
 
+<p>Flux &#x30E9;&#x30A4;&#x30D6;&#x30E9;&#x30EA;&#x306F;&#x773C;&#x93E1;&#x306E;&#x3088;&#x3046;&#x306A;&#x3082;&#x306E;&#x3067;&#x3059;: &#x305D;&#x308C;&#x3089;&#x304C;&#x5FC5;&#x8981;&#x306B;&#x306A;&#x3063;&#x305F;&#x3068;&#x304D;&#x306B;&#x77E5;&#x308B;&#x306E;&#x3067;&#x3059;&#x3002;</p>
 
+</blockquote>
 
+
 
+                                
+                                </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="installation.html" class="navigation navigation-prev " aria-label="Previous page: インストール">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="getting-started.html" class="navigation navigation-next " aria-label="Next page: Vuex 入門">
 
+                    <i class="fa fa-angle-right"></i>
 
+                </a>
 
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"Vuex とは何か?","level":"1.4","depth":1,"next":{"title":"Vuex 入門","level":"1.5","depth":1,"path":"getting-started.md","ref":"getting-started.md","articles":[]},"previous":{"title":"インストール","level":"1.3","depth":1,"path":"installation.md","ref":"installation.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":"ja","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"intro.md","mtime":"2018-04-20T00:44:03.866Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"ja"}});
 
+        });
 
+    </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>
 
+

+ 721 - 0
ja/modules.html
View File 

@@ -0,0 +1,721 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="ja" >
 
+    <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.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="structure.html" />
 
+    
+    
+    <link rel="prev" href="actions.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">
 
+            
+                    
+                    Vuex 入門
 
+            
+                </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 " data-level="1.6.4" data-path="actions.html">
 
+            
+                <a href="actions.html">
 
+            
+                    
+                    アクション
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter active" 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">
 
+            
+                    
+                    厳格モード
 
+            
+                </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">
 
+    
+
 
+    <!-- Title -->
 
+    <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="&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;">&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;</h1>
 
+<p>&#x5358;&#x4E00;&#x30B9;&#x30C6;&#x30FC;&#x30C8;&#x30C4;&#x30EA;&#x30FC;&#x3092;&#x4F7F;&#x3046;&#x305F;&#x3081;&#x3001;&#x30A2;&#x30D7;&#x30EA;&#x30B1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x5168;&#x3066;&#x306E;&#x72B6;&#x614B;&#x306F;&#x3001;&#x4E00;&#x3064;&#x306E;&#x5927;&#x304D;&#x306A;&#x30B9;&#x30C8;&#x30A2;&#x30AA;&#x30D6;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x306B;&#x5185;&#x5305;&#x3055;&#x308C;&#x307E;&#x3059;&#x3002;&#x3057;&#x304B;&#x3057;&#x306A;&#x304C;&#x3089;&#x3001;&#x30A2;&#x30D7;&#x30EA;&#x30B1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x304C;&#x5927;&#x304D;&#x304F;&#x306A;&#x308B;&#x306B;&#x3064;&#x308C;&#x3066;&#x3001;&#x30B9;&#x30C8;&#x30A2;&#x30AA;&#x30D6;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x306F;&#x81A8;&#x308C;&#x4E0A;&#x304C;&#x3063;&#x3066;&#x304D;&#x307E;&#x3059;&#x3002;</p>
 
+<p>&#x305D;&#x306E;&#x3088;&#x3046;&#x306A;&#x5834;&#x5408;&#x306B;&#x5F79;&#x7ACB;&#x3066;&#x308B;&#x305F;&#x3081; Vuex &#x3067;&#x306F;&#x30B9;&#x30C8;&#x30A2;&#x3092;<strong>&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;</strong>&#x306B;&#x5206;&#x5272;&#x3067;&#x304D;&#x308B;&#x3088;&#x3046;&#x306B;&#x306A;&#x3063;&#x3066;&#x3044;&#x307E;&#x3059;&#x3002;&#x305D;&#x308C;&#x305E;&#x308C;&#x306E;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306F;&#x3001;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x81EA;&#x8EAB;&#x306E;&#x72B6;&#x614B;&#xFF08;state&#xFF09;&#x3001;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3001;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3001;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x3001;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3055;&#x3048;&#x3082;&#x5185;&#x5305;&#x3067;&#x304D;&#x307E;&#x3059;&#xFF08;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3092;&#x30CD;&#x30B9;&#x30C8;&#x3067;&#x304D;&#x307E;&#x3059;&#xFF09;- &#x30C8;&#x30C3;&#x30D7;&#x304B;&#x3089;&#x30DC;&#x30C8;&#x30E0;&#x307E;&#x3067;&#x30D5;&#x30E9;&#x30AF;&#x30BF;&#x30EB;&#x69CB;&#x9020;&#x3067;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+  state<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  actions<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  getters<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+
 
+<span class="token keyword">const</span> moduleB <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+  state<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  actions<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</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>
 
+  modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    a<span class="token punctuation">:</span> moduleA<span class="token punctuation">,</span>
 
+    b<span class="token punctuation">:</span> moduleB
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+
 
+store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>a <span class="token comment" spellcheck="true">// -&gt; `moduleA` &#x306E;&#x30B9;&#x30C6;&#x30FC;&#x30C8;</span>
 
+store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>b <span class="token comment" spellcheck="true">// -&gt; `moduleB` &#x306E;&#x30B9;&#x30C6;&#x30FC;&#x30C8;</span>
 
+</code></pre>
 
+<h3 id="&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x30ED;&#x30FC;&#x30AB;&#x30EB;&#x30B9;&#x30C6;&#x30FC;&#x30C8;">&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x30ED;&#x30FC;&#x30AB;&#x30EB;&#x30B9;&#x30C6;&#x30FC;&#x30C8;</h3>
 
+<p>&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3084;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x306E;&#x4E2D;&#x3067;&#x306F;&#x3001;&#x6E21;&#x3055;&#x308C;&#x308B;&#x7B2C;1&#x5F15;&#x6570;&#x306F;<strong>&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x30ED;&#x30FC;&#x30AB;&#x30EB;&#x30B9;&#x30C6;&#x30FC;&#x30C8;</strong>&#x3067;&#x3059;&#x3002;</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> moduleA <span class="token operator">=</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>
 
+      <span class="token comment" spellcheck="true">// `state` &#x306F;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x30ED;&#x30FC;&#x30AB;&#x30EB;&#x30B9;&#x30C6;&#x30FC;&#x30C8;</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>
 
+
 
+  getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    doubleCount <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 number">2</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>&#x540C;&#x69D8;&#x306B;&#x3001;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x4E2D;&#x3067;&#x306F; <code>context.state</code> &#x306F;&#x30ED;&#x30FC;&#x30AB;&#x30EB;&#x30B9;&#x30C6;&#x30FC;&#x30C8;&#x306B;&#x30A2;&#x30AF;&#x30BB;&#x30B9;&#x3067;&#x304D;&#x3001;&#x30EB;&#x30FC;&#x30C8;&#x306E;&#x30B9;&#x30C6;&#x30FC;&#x30C8;&#x306F; <code>context.rootState</code> &#x3067;&#x30A2;&#x30AF;&#x30BB;&#x30B9;&#x3067;&#x304D;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    incrementIfOddOnRootSum <span class="token punctuation">(</span><span class="token punctuation">{</span> state<span class="token punctuation">,</span> commit<span class="token punctuation">,</span> rootState <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>count <span class="token operator">+</span> rootState<span class="token punctuation">.</span>count<span class="token punctuation">)</span> <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <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>
 
+      <span class="token punctuation">}</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>&#x307E;&#x305F;&#x3001;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x306E;&#x4E2D;&#x3067;&#x306F;&#x3001;&#x30EB;&#x30FC;&#x30C8;&#x306E;&#x30B9;&#x30C6;&#x30FC;&#x30C8;&#x306F;&#x7B2C;3&#x5F15;&#x6570;&#x3067;&#x30A2;&#x30AF;&#x30BB;&#x30B9;&#x3067;&#x304D;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    sumWithRootCount <span class="token punctuation">(</span>state<span class="token punctuation">,</span> getters<span class="token punctuation">,</span> rootState<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> rootState<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="&#x540D;&#x524D;&#x7A7A;&#x9593;">&#x540D;&#x524D;&#x7A7A;&#x9593;</h3>
 
+<p>&#x30C7;&#x30D5;&#x30A9;&#x30EB;&#x30C8;&#x3067;&#x306F;&#x3001;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3001;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3001;&#x305D;&#x3057;&#x3066;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x5185;&#x90E8;&#x306E;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306F;<strong>&#x30B0;&#x30ED;&#x30FC;&#x30D0;&#x30EB;&#x540D;&#x524D;&#x7A7A;&#x9593;</strong>&#x306E;&#x5143;&#x3067;&#x767B;&#x9332;&#x3055;&#x308C;&#x307E;&#x3059; - &#x3053;&#x308C;&#x306B;&#x3088;&#x308A;&#x3001;&#x8907;&#x6570;&#x306E;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x304C;&#x540C;&#x3058;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;/&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x30BF;&#x30A4;&#x30D7;&#x306B;&#x53CD;&#x5FDC;&#x3059;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;</p>
 
+<p>&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3092;&#x3088;&#x308A;&#x81EA;&#x5DF1;&#x5B8C;&#x7D50;&#x578B;&#x306B;&#x307E;&#x305F;&#x518D;&#x5229;&#x7528;&#x53EF;&#x80FD;&#x306A;&#x3082;&#x306E;&#x306B;&#x3057;&#x305F;&#x3044;&#x5834;&#x5408;&#x306F;&#x3001;&#x305D;&#x308C;&#x3092; <code>namespaced: true</code> &#x306B;&#x3088;&#x3063;&#x3066;&#x540D;&#x524D;&#x7A7A;&#x9593;&#x306B;&#x5206;&#x3051;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x304C;&#x767B;&#x9332;&#x3055;&#x308C;&#x308B;&#x3068;&#x3001;&#x305D;&#x306E;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x3001;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3001;&#x304A;&#x3088;&#x3073;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x3059;&#x3079;&#x3066;&#x304C;&#x3001;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x304C;&#x767B;&#x9332;&#x3055;&#x308C;&#x3066;&#x3044;&#x308B;&#x30D1;&#x30B9;&#x306B;&#x57FA;&#x3065;&#x3044;&#x3066;&#x81EA;&#x52D5;&#x7684;&#x306B;&#x540D;&#x524D;&#x7A7A;&#x9593;&#x306B;&#x5165;&#x308C;&#x3089;&#x308C;&#x307E;&#x3059;&#x3002;&#x4F8B;&#x3048;&#x3070;:</p>
 
+<pre class="language-"><code class="lang-js"><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>
 
+  modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    account<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+      namespaced<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
 
+
 
+      <span class="token comment" spellcheck="true">// &#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x30A2;&#x30BB;&#x30C3;&#x30C8;</span>
 
+      state<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// &#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x30B9;&#x30C6;&#x30FC;&#x30C8;&#x306F;&#x3059;&#x3067;&#x306B;&#x30CD;&#x30B9;&#x30C8;&#x3055;&#x308C;&#x3066;&#x304A;&#x308A;&#x3001;&#x540D;&#x524D;&#x7A7A;&#x9593;&#x306E;&#x30AA;&#x30D7;&#x30B7;&#x30E7;&#x30F3;&#x306B;&#x3088;&#x3063;&#x3066;&#x5F71;&#x97FF;&#x3092;&#x53D7;&#x3051;&#x307E;&#x305B;&#x3093;</span>
 
+      getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+        isAdmin <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">// -&gt; getters[&apos;account/isAdmin&apos;]</span>
 
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+      actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+        login <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">// -&gt; dispatch(&apos;account/login&apos;)</span>
 
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+      mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+        login <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">// -&gt; commit(&apos;account/login&apos;)</span>
 
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+
 
+      <span class="token comment" spellcheck="true">// &#x30CD;&#x30B9;&#x30C8;&#x3055;&#x308C;&#x305F;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;</span>
 
+      modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+        <span class="token comment" spellcheck="true">// &#x89AA;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x304B;&#x3089;&#x540D;&#x524D;&#x7A7A;&#x9593;&#x3092;&#x7D99;&#x627F;&#x3059;&#x308B;</span>
 
+        myPage<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+          state<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+          getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+            profile <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">// -&gt; getters[&apos;account/profile&apos;]</span>
 
+          <span class="token punctuation">}</span>
 
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+
 
+        <span class="token comment" spellcheck="true">// &#x3055;&#x3089;&#x306B;&#x540D;&#x524D;&#x7A7A;&#x9593;&#x3092;&#x30CD;&#x30B9;&#x30C8;&#x3059;&#x308B;</span>
 
+        posts<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+          namespaced<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
 
+
 
+          state<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+          getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+            popular <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">// -&gt; getters[&apos;account/posts/popular&apos;]</span>
 
+          <span class="token punctuation">}</span>
 
+        <span class="token punctuation">}</span>
 
+      <span class="token punctuation">}</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>&#x540D;&#x524D;&#x7A7A;&#x9593;&#x306E;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x3068;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x306F;&#x3001;&#x30ED;&#x30FC;&#x30AB;&#x30E9;&#x30A4;&#x30BA;&#x3055;&#x308C;&#x305F; <code>getters</code>&#x3001;<code>dispatch</code>&#x3001;<code>commit</code> &#x3092;&#x53D7;&#x3051;&#x53D6;&#x308A;&#x307E;&#x3059;&#x3002;&#x8A00;&#x3044;&#x63DB;&#x3048;&#x308C;&#x3070;&#x3001;&#x540C;&#x3058;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306B;&#x63A5;&#x982D;&#x8F9E; (prefix) &#x3092;&#x66F8;&#x304D;&#x8FBC;&#x307E;&#x305A;&#x306B;&#x3001;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x30A2;&#x30BB;&#x30C3;&#x30C8;&#x3092;&#x4F7F;&#x7528;&#x3059;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;&#x540D;&#x524D;&#x7A7A;&#x9593;&#x30AA;&#x30D7;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x5207;&#x308A;&#x66FF;&#x3048;&#x306F;&#x3001;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x5185;&#x306E;&#x30B3;&#x30FC;&#x30C9;&#x306B;&#x306F;&#x5F71;&#x97FF;&#x3057;&#x307E;&#x305B;&#x3093;&#x3002;</p>
 
+<h4 id="&#x540D;&#x524D;&#x7A7A;&#x9593;&#x4ED8;&#x304D;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3067;&#x306E;&#x30B0;&#x30ED;&#x30FC;&#x30D0;&#x30EB;&#x30A2;&#x30BB;&#x30C3;&#x30C8;&#x3078;&#x306E;&#x30A2;&#x30AF;&#x30BB;&#x30B9;">&#x540D;&#x524D;&#x7A7A;&#x9593;&#x4ED8;&#x304D;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3067;&#x306E;&#x30B0;&#x30ED;&#x30FC;&#x30D0;&#x30EB;&#x30A2;&#x30BB;&#x30C3;&#x30C8;&#x3078;&#x306E;&#x30A2;&#x30AF;&#x30BB;&#x30B9;</h4>
 
+<p>&#x30B0;&#x30ED;&#x30FC;&#x30D0;&#x30EB;&#x30B9;&#x30C6;&#x30FC;&#x30C8;&#x3068;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x3092;&#x4F7F;&#x3044;&#x305F;&#x3044;&#x5834;&#x5408;&#x3001;<code>rootState</code> &#x3068; <code>rootGetters</code> &#x306F;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x95A2;&#x6570;&#x306E;&#x7B2C;3&#x5F15;&#x6570;&#x3068;&#x7B2C;4&#x5F15;&#x6570;&#x3068;&#x3057;&#x3066;&#x6E21;&#x3055;&#x308C;&#x3001;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x95A2;&#x6570;&#x306B;&#x6E21;&#x3055;&#x308C;&#x308B; <code>context</code> &#x30AA;&#x30D6;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x306E;&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x3068;&#x3057;&#x3066;&#x3082;&#x516C;&#x958B;&#x3055;&#x308C;&#x307E;&#x3059;&#x3002;</p>
 
+<p>&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x30C7;&#x30A3;&#x30B9;&#x30D1;&#x30C3;&#x30C1;&#x3059;&#x308B;&#x304B;&#x3001;&#x30B0;&#x30ED;&#x30FC;&#x30D0;&#x30EB;&#x540D;&#x524D;&#x7A7A;&#x9593;&#x306B;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x30B3;&#x30DF;&#x30C3;&#x30C8;&#x3059;&#x308B;&#x306B;&#x306F;&#x3001;<code>dispatch</code> &#x3068; <code>commit</code> &#x306E;3&#x756A;&#x76EE;&#x306E;&#x5F15;&#x6570;&#x3068;&#x3057;&#x3066; <code>{root: true}</code> &#x3092;&#x6E21;&#x3057;&#x307E;&#x3059;&#x3002;</p>
 
+<pre class="language-"><code class="lang-js">modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  foo<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    namespaced<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
 
+
 
+    getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+      <span class="token comment" spellcheck="true">// `getters` &#x306F;&#x3053;&#x306E;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x306B;&#x30ED;&#x30FC;&#x30AB;&#x30E9;&#x30A4;&#x30BA;&#x3055;&#x308C;&#x3066;&#x3044;&#x307E;&#x3059;</span>
 
+      <span class="token comment" spellcheck="true">// &#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x306E;&#x7B2C;4&#x5F15;&#x6570;&#x7D4C;&#x7531;&#x3067; rootGetters &#x3092;&#x4F7F;&#x3046;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;</span>
 
+      someGetter <span class="token punctuation">(</span>state<span class="token punctuation">,</span> getters<span class="token punctuation">,</span> rootState<span class="token punctuation">,</span> rootGetters<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+        getters<span class="token punctuation">.</span>someOtherGetter <span class="token comment" spellcheck="true">// -&gt; &apos;foo/someOtherGetter&apos;</span>
 
+        rootGetters<span class="token punctuation">.</span>someOtherGetter <span class="token comment" spellcheck="true">// -&gt; &apos;someOtherGetter&apos;</span>
 
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+      someOtherGetter<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
 
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+
 
+    actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+      <span class="token comment" spellcheck="true">// &#x30C7;&#x30A3;&#x30B9;&#x30D1;&#x30C3;&#x30C1;&#x3068;&#x30B3;&#x30DF;&#x30C3;&#x30C8;&#x3082;&#x3053;&#x306E;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x7528;&#x306B;&#x30ED;&#x30FC;&#x30AB;&#x30E9;&#x30A4;&#x30BA;&#x3055;&#x308C;&#x3066;&#x3044;&#x307E;&#x3059;</span>
 
+      <span class="token comment" spellcheck="true">// &#x30EB;&#x30FC;&#x30C8;&#x30C7;&#x30A3;&#x30B9;&#x30D1;&#x30C3;&#x30C1;/&#x30B3;&#x30DF;&#x30C3;&#x30C8;&#x306E; `root` &#x30AA;&#x30D7;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x53D7;&#x3051;&#x5165;&#x308C;&#x307E;&#x3059;</span>
 
+      someAction <span class="token punctuation">(</span><span class="token punctuation">{</span> dispatch<span class="token punctuation">,</span> commit<span class="token punctuation">,</span> getters<span class="token punctuation">,</span> rootGetters <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+        getters<span class="token punctuation">.</span>someGetter <span class="token comment" spellcheck="true">// -&gt; &apos;foo/someGetter&apos;</span>
 
+        rootGetters<span class="token punctuation">.</span>someGetter <span class="token comment" spellcheck="true">// -&gt; &apos;someGetter&apos;</span>
 
+
 
+        <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;someOtherAction&apos;</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// -&gt; &apos;foo/someOtherAction&apos;</span>
 
+        <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;someOtherAction&apos;</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> root<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// -&gt; &apos;someOtherAction&apos;</span>
 
+
 
+        <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;someMutation&apos;</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// -&gt; &apos;foo/someMutation&apos;</span>
 
+        <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;someMutation&apos;</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> root<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// -&gt; &apos;someMutation&apos;</span>
 
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+      someOtherAction <span class="token punctuation">(</span>ctx<span class="token punctuation">,</span> payload<span class="token punctuation">)</span> <span class="token punctuation">{</span> <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>
 
+<h4 id="&#x540D;&#x524D;&#x7A7A;&#x9593;&#x306B;&#x3088;&#x308B;&#x30D0;&#x30A4;&#x30F3;&#x30C7;&#x30A3;&#x30F3;&#x30B0;&#x30D8;&#x30EB;&#x30D1;&#x30FC;">&#x540D;&#x524D;&#x7A7A;&#x9593;&#x306B;&#x3088;&#x308B;&#x30D0;&#x30A4;&#x30F3;&#x30C7;&#x30A3;&#x30F3;&#x30B0;&#x30D8;&#x30EB;&#x30D1;&#x30FC;</h4>
 
+<p><code>mapState</code>&#x3001;<code>mapGetters</code>&#x3001;<code>mapActions</code>&#x3001;&#x305D;&#x3057;&#x3066; <code>mapMutations</code> &#x30D8;&#x30EB;&#x30D1;&#x30FC;&#x3092;&#x4F7F;&#x3063;&#x3066;&#x540D;&#x524D;&#x7A7A;&#x9593;&#x4ED8;&#x304D;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3092;&#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x306B;&#x30D0;&#x30A4;&#x30F3;&#x30C7;&#x30A3;&#x30F3;&#x30B0;&#x3059;&#x308B;&#x3068;&#x304D;&#x3001;&#x5C11;&#x3057;&#x5197;&#x9577;&#x306B;&#x306A;&#x308A;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js">computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+    a<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> state<span class="token punctuation">.</span>some<span class="token punctuation">.</span>nested<span class="token punctuation">.</span>module<span class="token punctuation">.</span>a<span class="token punctuation">,</span>
 
+    b<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> state<span class="token punctuation">.</span>some<span class="token punctuation">.</span>nested<span class="token punctuation">.</span>module<span class="token punctuation">.</span>b
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
 
+    <span class="token string">&apos;some/nested/module/foo&apos;</span><span class="token punctuation">,</span>
 
+    <span class="token string">&apos;some/nested/module/bar&apos;</span>
 
+  <span class="token punctuation">]</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>&#x3053;&#x306E;&#x3088;&#x3046;&#x306A;&#x5834;&#x5408;&#x306F;&#x3001;&#x7B2C;1&#x5F15;&#x6570;&#x3068;&#x3057;&#x3066;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x540D;&#x524D;&#x7A7A;&#x9593;&#x6587;&#x5B57;&#x5217;&#x3092;&#x30D8;&#x30EB;&#x30D1;&#x30FC;&#x306B;&#x6E21;&#x3059;&#x3053;&#x3068;&#x3067;&#x3001;&#x305D;&#x306E;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3092;&#x30B3;&#x30F3;&#x30C6;&#x30AD;&#x30B9;&#x30C8;&#x3068;&#x3057;&#x3066;&#x4F7F;&#x7528;&#x3057;&#x3066;&#x3059;&#x3079;&#x3066;&#x306E;&#x30D0;&#x30A4;&#x30F3;&#x30C7;&#x30A3;&#x30F3;&#x30B0;&#x3092;&#x884C;&#x3046;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;&#x4E0A;&#x8A18;&#x306F;&#x6B21;&#x306E;&#x3088;&#x3046;&#x306B;&#x5358;&#x7D14;&#x5316;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;</p>
 
+<pre class="language-"><code class="lang-js">computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token string">&apos;some/nested/module&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
 
+    a<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> state<span class="token punctuation">.</span>a<span class="token punctuation">,</span>
 
+    b<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> state<span class="token punctuation">.</span>b
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token string">&apos;some/nested/module&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>
 
+    <span class="token string">&apos;foo&apos;</span><span class="token punctuation">,</span>
 
+    <span class="token string">&apos;bar&apos;</span>
 
+  <span class="token punctuation">]</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>&#x3055;&#x3089;&#x306B;&#x3001;<code>createNamespacedHelpers</code> &#x3092;&#x4F7F;&#x7528;&#x3059;&#x308B;&#x3053;&#x3068;&#x306B;&#x3088;&#x3063;&#x3066;&#x540D;&#x524D;&#x7A7A;&#x9593;&#x4ED8;&#x3051;&#x3055;&#x308C;&#x305F;&#x30D8;&#x30EB;&#x30D1;&#x30FC;&#x3092;&#x4F5C;&#x6210;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;&#x6307;&#x5B9A;&#x3055;&#x308C;&#x305F;&#x540D;&#x524D;&#x7A7A;&#x9593;&#x306E;&#x5024;&#x306B;&#x30D0;&#x30A4;&#x30F3;&#x30C9;&#x3055;&#x308C;&#x305F;&#x65B0;&#x3057;&#x3044;&#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x30D0;&#x30A4;&#x30F3;&#x30C7;&#x30A3;&#x30F3;&#x30B0;&#x30D8;&#x30EB;&#x30D1;&#x30FC;&#x3092;&#x6301;&#x3064;&#x30AA;&#x30D6;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x3092;&#x8FD4;&#x3057;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> createNamespacedHelpers <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&apos;vuex&apos;</span>
 
+
 
+<span class="token keyword">const</span> <span class="token punctuation">{</span> mapState<span class="token punctuation">,</span> mapActions <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">createNamespacedHelpers</span><span class="token punctuation">(</span><span class="token string">&apos;some/nested/module&apos;</span><span class="token punctuation">)</span>
 
+
 
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
 
+  computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// `some/nested/module` &#x3092;&#x8ABF;&#x3079;&#x307E;&#x3059;</span>
 
+    <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+      a<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> state<span class="token punctuation">.</span>a<span class="token punctuation">,</span>
 
+      b<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> state<span class="token punctuation">.</span>b
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// `some/nested/module` &#x3092;&#x8ABF;&#x3079;&#x307E;&#x3059;</span>
 
+    <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
 
+      <span class="token string">&apos;foo&apos;</span><span class="token punctuation">,</span>
 
+      <span class="token string">&apos;bar&apos;</span>
 
+    <span class="token punctuation">]</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<h4 id="&#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;&#x958B;&#x767A;&#x8005;&#x5411;&#x3051;&#x306E;&#x6CE8;&#x610F;&#x4E8B;&#x9805;">&#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;&#x958B;&#x767A;&#x8005;&#x5411;&#x3051;&#x306E;&#x6CE8;&#x610F;&#x4E8B;&#x9805;</h4>
 
+<p>&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3092;&#x63D0;&#x4F9B;&#x3059;&#x308B;<a href="plugins.html">&#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;</a>&#x3092;&#x4F5C;&#x6210;&#x3057;&#x3001;&#x30E6;&#x30FC;&#x30B6;&#x30FC;&#x304C;&#x305D;&#x308C;&#x3089;&#x3092; Vuex &#x30B9;&#x30C8;&#x30A2;&#x306B;&#x8FFD;&#x52A0;&#x3067;&#x304D;&#x308B;&#x3088;&#x3046;&#x306B;&#x3059;&#x308B;&#x3068;&#x3001;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x4E88;&#x6E2C;&#x3067;&#x304D;&#x306A;&#x3044;&#x540D;&#x524D;&#x7A7A;&#x9593;&#x304C;&#x6C17;&#x306B;&#x306A;&#x308B;&#x304B;&#x3082;&#x3057;&#x308C;&#x307E;&#x305B;&#x3093;&#x3002;&#x3042;&#x306A;&#x305F;&#x306E;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306F;&#x3001;&#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;&#x30E6;&#x30FC;&#x30B6;&#x30FC;&#x304C;&#x540D;&#x524D;&#x7A7A;&#x9593;&#x4ED8;&#x304D;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x5143;&#x306B;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3092;&#x8FFD;&#x52A0;&#x3059;&#x308B;&#x3068;&#x3001;&#x305D;&#x306E;&#x540D;&#x524D;&#x7A7A;&#x9593;&#x306B;&#x5C5E;&#x3059;&#x308B;&#x3088;&#x3046;&#x306B;&#x306A;&#x308A;&#x307E;&#x3059;&#x3002;&#x3053;&#x306E;&#x72B6;&#x6CC1;&#x306B;&#x9069;&#x5FDC;&#x3059;&#x308B;&#x306B;&#x306F;&#x3001;&#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;&#x30AA;&#x30D7;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x4F7F;&#x7528;&#x3057;&#x3066;&#x540D;&#x524D;&#x7A7A;&#x9593;&#x306E;&#x5024;&#x3092;&#x53D7;&#x3051;&#x53D6;&#x308B;&#x5FC5;&#x8981;&#x304C;&#x3042;&#x308A;&#x307E;&#x3059;&#x3002;</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// &#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;&#x30AA;&#x30D7;&#x30B7;&#x30E7;&#x30F3;&#x3067;&#x540D;&#x524D;&#x7A7A;&#x9593;&#x5024;&#x3092;&#x53D6;&#x5F97;&#x3057;&#x3001;</span>
 
+<span class="token comment" spellcheck="true">// &#x305D;&#x3057;&#x3066;&#x3001;Vuex &#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;&#x95A2;&#x6570;&#x3092;&#x8FD4;&#x3059;</span>
 
+<span class="token keyword">export</span> <span class="token keyword">function</span> createPlugin <span class="token punctuation">(</span>options <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>
 
+  <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>store<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">/// &#x540D;&#x524D;&#x7A7A;&#x9593;&#x3092;&#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x578B;&#x306B;&#x8FFD;&#x52A0;&#x3059;&#x308B;</span>
 
+    <span class="token keyword">const</span> namespace <span class="token operator">=</span> options<span class="token punctuation">.</span>namespace <span class="token operator">||</span> <span class="token string">&apos;&apos;</span>
 
+    store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span>namespace <span class="token operator">+</span> <span class="token string">&apos;pluginAction&apos;</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<h3 id="&#x52D5;&#x7684;&#x306B;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3092;&#x767B;&#x9332;&#x3059;&#x308B;">&#x52D5;&#x7684;&#x306B;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3092;&#x767B;&#x9332;&#x3059;&#x308B;</h3>
 
+<p>&#x30B9;&#x30C8;&#x30A2;&#x304C;&#x4F5C;&#x3089;&#x308C;&#x305F;<strong>&#x5F8C;</strong>&#x306B; <code>store.registerModule</code> &#x30E1;&#x30BD;&#x30C3;&#x30C9;&#x3092;&#x4F7F;&#x3063;&#x3066;&#x3001;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3092;&#x767B;&#x9332;&#x3067;&#x304D;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// `myModule` &#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3092;&#x767B;&#x9332;&#x3057;&#x307E;&#x3059;</span>
 
+store<span class="token punctuation">.</span><span class="token function">registerModule</span><span class="token punctuation">(</span><span class="token string">&apos;myModule&apos;</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">// &#x30CD;&#x30B9;&#x30C8;&#x3055;&#x308C;&#x305F; `nested/myModule` &#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3092;&#x767B;&#x9332;&#x3057;&#x307E;&#x3059;</span>
 
+store<span class="token punctuation">.</span><span class="token function">registerModule</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&apos;nested&apos;</span><span class="token punctuation">,</span> <span class="token string">&apos;myModule&apos;</span><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>
 
+</code></pre>
 
+<p>&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x30B9;&#x30C6;&#x30FC;&#x30C8;&#x306B;&#x306F; <code>store.state.myModule</code> &#x3068; <code>store.state.nested.myModule</code> &#x3067;&#x30A2;&#x30AF;&#x30BB;&#x30B9;&#x3057;&#x307E;&#x3059;&#x3002;</p>
 
+<p>&#x52D5;&#x7684;&#x306A;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x767B;&#x9332;&#x304C;&#x3042;&#x308B;&#x3053;&#x3068;&#x3067;&#x3001;&#x4ED6;&#x306E; Vue &#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;&#x304C;&#x3001;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3092;&#x30A2;&#x30D7;&#x30EA;&#x30B1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x30B9;&#x30C8;&#x30A2;&#x306B;&#x4ED8;&#x5C5E;&#x3055;&#x305B;&#x308B;&#x3053;&#x3068;&#x3067;&#x3001;&#x72B6;&#x614B;&#x306E;&#x7BA1;&#x7406;&#x306B; Vuex &#x3092;&#x6D3B;&#x7528;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;&#x4F8B;&#x3048;&#x3070; <a href="https://github.com/vuejs/vuex-router-sync" target="_blank"><code>vuex-router-sync</code></a> &#x30E9;&#x30A4;&#x30D6;&#x30E9;&#x30EA;&#x306F;&#x3001;&#x52D5;&#x7684;&#x306B;&#x4ED8;&#x5C5E;&#x3055;&#x305B;&#x305F;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x5185;&#x90E8;&#x3067;&#x30A2;&#x30D7;&#x30EA;&#x30B1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x30EB;&#x30FC;&#x30C6;&#x30A3;&#x30F3;&#x30B0;&#x306E;&#x30B9;&#x30C6;&#x30FC;&#x30C8;&#x3092;&#x7BA1;&#x7406;&#x3059;&#x308B;&#x3053;&#x3068;&#x3067; vue-router &#x3068; vuex &#x3092;&#x7D71;&#x5408;&#x3057;&#x3066;&#x3044;&#x307E;&#x3059;&#x3002;</p>
 
+<p><code>store.unregisterModule(moduleName)</code> &#x3092;&#x547C;&#x3073;&#x51FA;&#x305B;&#x3070;&#x3001;&#x52D5;&#x7684;&#x306B;&#x767B;&#x9332;&#x3057;&#x305F;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3092;&#x524A;&#x9664;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;&#x305F;&#x3060;&#x3057;&#x30B9;&#x30C8;&#x30A2;&#x4F5C;&#x6210;&#xFF08;store creation&#xFF09;&#x306E;&#x969B;&#x306B;&#x5BA3;&#x8A00;&#x3055;&#x308C;&#x305F;&#x3001;&#x9759;&#x7684;&#x306A;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306F;&#x3053;&#x306E;&#x30E1;&#x30BD;&#x30C3;&#x30C9;&#x3067;&#x524A;&#x9664;&#x3067;&#x304D;&#x306A;&#x3044;&#x3053;&#x3068;&#x306B;&#x6CE8;&#x610F;&#x3057;&#x3066;&#x304F;&#x3060;&#x3055;&#x3044;&#x3002;</p>
 
+<p>&#x30B5;&#x30FC;&#x30D0;&#x30B5;&#x30A4;&#x30C9;&#x30EC;&#x30F3;&#x30C0;&#x30EA;&#x30F3;&#x30B0;&#x3055;&#x308C;&#x305F;&#x30A2;&#x30D7;&#x30EA;&#x30B1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x304B;&#x3089;&#x72B6;&#x614B;&#x3092;&#x4FDD;&#x6301;&#x3059;&#x308B;&#x306A;&#x3069;&#x3001;&#x65B0;&#x3057;&#x3044;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3092;&#x767B;&#x9332;&#x3059;&#x308B;&#x3068;&#x304D;&#x306B;&#x3001;&#x4EE5;&#x524D;&#x306E;&#x72B6;&#x614B;&#x3092;&#x4FDD;&#x6301;&#x3057;&#x305F;&#x3044;&#x5834;&#x5408;&#x304C;&#x3042;&#x308A;&#x307E;&#x3059;&#x3002;<code>preserveState</code> &#x30AA;&#x30D7;&#x30B7;&#x30E7;&#x30F3;(<code>store.registerModule(&apos;a&apos;, module, { preserveState: true })</code>)&#x3067;&#x3053;&#x308C;&#x3092;&#x5B9F;&#x73FE;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;</p>
 
+<h3 id="&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x518D;&#x5229;&#x7528;">&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x518D;&#x5229;&#x7528;</h3>
 
+<p>&#x6642;&#x3069;&#x304D;&#x3001;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x8907;&#x6570;&#x30A4;&#x30F3;&#x30B9;&#x30BF;&#x30F3;&#x30B9;&#x3092;&#x4F5C;&#x6210;&#x3059;&#x308B;&#x5FC5;&#x8981;&#x304C;&#x3042;&#x308B;&#x304B;&#x3082;&#x3057;&#x308C;&#x307E;&#x305B;&#x3093;&#x3002;&#x4F8B;&#x3048;&#x3070;:</p>
 
+<ul>
 
+<li>&#x540C;&#x3058;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3092;&#x4F7F;&#x7528;&#x3059;&#x308B;&#x8907;&#x6570;&#x306E;&#x30B9;&#x30C8;&#x30A2;&#x3092;&#x4F5C;&#x6210;&#x3059;&#x308B;;</li>
 
+<li>&#x540C;&#x3058;&#x30B9;&#x30C8;&#x30A2;&#x306B;&#x540C;&#x3058;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3092;&#x8907;&#x6570;&#x56DE;&#x767B;&#x9332;&#x3059;&#x308B;</li>
 
+</ul>
 
+<p>&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x72B6;&#x614B;&#x3092;&#x5BA3;&#x8A00;&#x3059;&#x308B;&#x305F;&#x3081;&#x306B;&#x5358;&#x7D14;&#x306A;&#x30AA;&#x30D6;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x3092;&#x4F7F;&#x7528;&#x3059;&#x308B;&#x3068;&#x3001;&#x305D;&#x306E;&#x72B6;&#x614B;&#x30AA;&#x30D6;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x306F;&#x53C2;&#x7167;&#x306B;&#x3088;&#x3063;&#x3066;&#x5171;&#x6709;&#x3055;&#x308C;&#x3001;&#x5909;&#x66F4;&#x6642;&#x306B;&#x30AF;&#x30ED;&#x30B9;&#x30B9;&#x30C8;&#x30A2;/&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x72B6;&#x614B;&#x6C5A;&#x67D3;&#x3092;&#x5F15;&#x304D;&#x8D77;&#x3053;&#x3057;&#x307E;&#x3059;&#x3002;(&#x4F8B;: <code>runInNewContext</code> &#x30AA;&#x30D7;&#x30B7;&#x30E7;&#x30F3;&#x304C; <code>false</code> &#x307E;&#x305F;&#x306F; <code>&apos;once&apos;</code> &#x306E;&#x3068;&#x304D;&#x3001;<a href="https://ssr.vuejs.org/ja/structure.html#&#x30B9;&#x30C6;&#x30FC;&#x30C8;&#x30D5;&#x30EB;&#x306A;&#x30B7;&#x30F3;&#x30B0;&#x30EB;&#x30C8;&#x30F3;&#x306E;&#x56DE;&#x907F;" target="_blank">SSR &#x3067;&#x306F;&#x30B9;&#x30C6;&#x30FC;&#x30C8;&#x30D5;&#x30EB;&#x306A;&#x30B7;&#x30F3;&#x30B0;&#x30EB;&#x30C8;&#x30F3;&#x306F;&#x907F;&#x3051;&#x307E;&#x3059;</a>&#x3002;)</p>
 
+<p>&#x3053;&#x308C;&#x306F;&#x3001;&#x5B9F;&#x969B;&#x306B;&#x306F; Vue &#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x5185;&#x90E8;&#x306E; <code>data</code> &#x3068;&#x5168;&#x304F;&#x540C;&#x3058;&#x554F;&#x984C;&#x3067;&#x3059;&#x3002;&#x5F93;&#x3063;&#x3066;&#x89E3;&#x6C7A;&#x7B56;&#x3082;&#x540C;&#x3058;&#x3067;&#x3059;&#x3002;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x306E;&#x72B6;&#x614B;&#x3092;&#x5BA3;&#x8A00;&#x3059;&#x308B;&#x305F;&#x3081;&#x306B;&#x95A2;&#x6570;&#x3092;&#x4F7F;&#x7528;&#x3057;&#x3066;&#x304F;&#x3060;&#x3055;&#x3044; (2.3.0 &#x4EE5;&#x964D;&#x3067;&#x30B5;&#x30DD;&#x30FC;&#x30C8;&#x3055;&#x308C;&#x307E;&#x3059;):</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> MyReusableModule <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+  state <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
 
+      foo<span class="token punctuation">:</span> <span class="token string">&apos;bar&apos;</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  <span class="token comment" spellcheck="true">// &#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3001;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3001;&#x30B2;&#x30C3;&#x30BF;&#x30FC;...</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+
 
+                                
+                                </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="actions.html" class="navigation navigation-prev " aria-label="Previous page: アクション">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="structure.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.5","depth":2,"next":{"title":"アプリケーションの構造","level":"1.7","depth":1,"path":"structure.md","ref":"structure.md","articles":[]},"previous":{"title":"アクション","level":"1.6.4","depth":2,"path":"actions.md","ref":"actions.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":"ja","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"modules.md","mtime":"2018-04-20T00:44:03.866Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"ja"}});
 
+        });
 
+    </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>
 
+

File diff suppressed because it is too large
+ 481 - 0
ja/mutations.html


+ 576 - 0
ja/plugins.html
View File 

@@ -0,0 +1,576 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="ja" >
 
+    <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.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="strict.html" />
 
+    
+    
+    <link rel="prev" href="structure.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">
 
+            
+                    
+                    Vuex 入門
 
+            
+                </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 " 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 active" 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">
 
+            
+                    
+                    厳格モード
 
+            
+                </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">
 
+    
+
 
+    <!-- Title -->
 
+    <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="&#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;">&#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;</h1>
 
+<p>Vuex &#x30B9;&#x30C8;&#x30A2; &#x306F;&#x3001;&#x5404;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3078;&#x306E;&#x30D5;&#x30C3;&#x30AF;&#x3092;&#x516C;&#x958B;&#x3059;&#x308B; <code>plugins</code> &#x30AA;&#x30D7;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x53D7;&#x3051;&#x4ED8;&#x3051;&#x307E;&#x3059;&#x3002; Vuex &#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;&#x306F;&#x3001;&#x5358;&#x4E00;&#x306E;&#x5F15;&#x6570;&#x3068;&#x3057;&#x3066;&#x30B9;&#x30C8;&#x30A2;&#x3092;&#x53D7;&#x3051;&#x3064;&#x3051;&#x308B;&#x305F;&#x3060;&#x306E;&#x95A2;&#x6570;&#x3067;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> myPlugin <span class="token operator">=</span> store <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// &#x30B9;&#x30C8;&#x30A2;&#x304C;&#x521D;&#x671F;&#x5316;&#x3055;&#x308C;&#x305F;&#x3068;&#x304D;&#x306B;&#x547C;&#x3070;&#x308C;&#x307E;&#x3059;</span>
 
+  store<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span>mutation<span class="token punctuation">,</span> state<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// &#x305D;&#x308C;&#x305E;&#x308C;&#x306E;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x5F8C;&#x306B;&#x547C;&#x3070;&#x308C;&#x307E;&#x3059;</span>
 
+    <span class="token comment" spellcheck="true">// &#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306F; `{ type, payload }` &#x306E;&#x5F62;&#x5F0F;&#x3067;&#x63D0;&#x4F9B;&#x3055;&#x308C;&#x307E;&#x3059;</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>&#x305D;&#x3057;&#x3066;&#x3001;&#x3053;&#x306E;&#x3088;&#x3046;&#x306B;&#x5229;&#x7528;&#x3059;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js"><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>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>myPlugin<span class="token punctuation">]</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<h3 id="&#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;&#x5185;&#x3067;&#x306E;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x30B3;&#x30DF;&#x30C3;&#x30C8;">&#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;&#x5185;&#x3067;&#x306E;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x30B3;&#x30DF;&#x30C3;&#x30C8;</h3>
 
+<p>&#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;&#x306F;&#x76F4;&#x63A5;&#x3001;&#x72B6;&#x614B;&#x3092;&#x5909;&#x66F4;&#x3067;&#x304D;&#x307E;&#x305B;&#x3093;&#x3002;&#x3053;&#x308C;&#x306F;&#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x306B;&#x4F3C;&#x3066;&#x3044;&#x307E;&#x3059;&#x3002;&#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;&#x306F;&#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x540C;&#x69D8;&#x306B;&#x3001;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x30B3;&#x30DF;&#x30C3;&#x30C8;&#x306B;&#x3088;&#x308B;&#x5909;&#x66F4;&#x306E;&#x30C8;&#x30EA;&#x30AC;&#x30FC;&#x3060;&#x3051;&#x3067;&#x72B6;&#x614B;&#x3092;&#x5909;&#x66F4;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;</p>
 
+<p>&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x30B3;&#x30DF;&#x30C3;&#x30C8;&#x306B;&#x3088;&#x308B;&#x30B9;&#x30C8;&#x30A2;&#x3068;&#x30C7;&#x30FC;&#x30BF;&#x30BD;&#x30FC;&#x30B9;&#x306E;&#x540C;&#x671F;&#x3092;&#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;&#x3067;&#x5B9F;&#x73FE;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002; websocket &#x30C7;&#x30FC;&#x30BF;&#x30BD;&#x30FC;&#x30B9;&#x3068;&#x30B9;&#x30C8;&#x30A2;&#x3092;&#x4F8B;&#x306B;&#x3057;&#x307E;&#x3059; (&#x3053;&#x308C;&#x306F;&#x4E0D;&#x81EA;&#x7136;&#x306A;&#x4F8B;&#x3067;&#x3059;&#x3002;&#x5B9F;&#x969B;&#x306B;&#x306F;&#x3001;&#x3055;&#x3089;&#x306B;&#x8907;&#x96D1;&#x306A;&#x30BF;&#x30B9;&#x30AF;&#x306E;&#x305F;&#x3081;&#x306B; <code>createPlugin</code> &#x95A2;&#x6570;&#x306F;&#x3001;&#x8FFD;&#x52A0;&#x3067;&#x3044;&#x304F;&#x3064;&#x304B;&#x306E;&#x30AA;&#x30D7;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x53D7;&#x3051;&#x53D6;&#x308C;&#x307E;&#x3059;):</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> createWebSocketPlugin <span class="token punctuation">(</span>socket<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+  <span class="token keyword">return</span> store <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    socket<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&apos;data&apos;</span><span class="token punctuation">,</span> data <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+      store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;RECEIVE_DATA&apos;</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+    store<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span>mutation<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+      <span class="token keyword">if</span> <span class="token punctuation">(</span>mutation<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&apos;UPDATE_DATA&apos;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+        socket<span class="token punctuation">.</span><span class="token function">emit</span><span class="token punctuation">(</span><span class="token string">&apos;update&apos;</span><span class="token punctuation">,</span> mutation<span class="token punctuation">.</span>payload<span class="token punctuation">)</span>
 
+      <span class="token punctuation">}</span>
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> plugin <span class="token operator">=</span> <span class="token function">createWebSocketPlugin</span><span class="token punctuation">(</span>socket<span class="token punctuation">)</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>
 
+  mutations<span class="token punctuation">,</span>
 
+  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>plugin<span class="token punctuation">]</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<h3 id="&#x72B6;&#x614B;&#x306E;&#x30B9;&#x30CA;&#x30C3;&#x30D7;&#x30B7;&#x30E7;&#x30C3;&#x30C8;&#x3092;&#x64AE;&#x308B;">&#x72B6;&#x614B;&#x306E;&#x30B9;&#x30CA;&#x30C3;&#x30D7;&#x30B7;&#x30E7;&#x30C3;&#x30C8;&#x3092;&#x64AE;&#x308B;</h3>
 
+<p>&#x6642;&#x3005;&#x3001;&#x72B6;&#x614B;&#x306E;&quot;&#x30B9;&#x30CA;&#x30C3;&#x30D7;&#x30B7;&#x30E7;&#x30C3;&#x30C8;&quot;&#x3092;&#x64AE;&#x3063;&#x3066;&#x3001;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x524D;&#x5F8C;&#x306E;&#x72B6;&#x614B;&#x3092;&#x6BD4;&#x8F03;&#x3057;&#x305F;&#x304F;&#x306A;&#x308B;&#x3053;&#x3068;&#x304C;&#x3042;&#x308B;&#x3067;&#x3057;&#x3087;&#x3046;&#x3002;&#x305D;&#x308C;&#x3092;&#x5B9F;&#x73FE;&#x3059;&#x308B;&#x305F;&#x3081;&#x306B;&#x3001;&#x72B6;&#x614B;&#x30AA;&#x30D6;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x306E;&#x30C7;&#x30A3;&#x30FC;&#x30D7;&#x30B3;&#x30D4;&#x30FC;&#x3092;&#x884C;&#x3046;&#x5FC5;&#x8981;&#x304C;&#x3042;&#x308A;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> myPluginWithSnapshot <span class="token operator">=</span> store <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  <span class="token keyword">let</span> prevState <span class="token operator">=</span> _<span class="token punctuation">.</span><span class="token function">cloneDeep</span><span class="token punctuation">(</span>store<span class="token punctuation">.</span>state<span class="token punctuation">)</span>
 
+  store<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span>mutation<span class="token punctuation">,</span> state<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">let</span> nextState <span class="token operator">=</span> _<span class="token punctuation">.</span><span class="token function">cloneDeep</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span>
 
+
 
+    <span class="token comment" spellcheck="true">// `prevState` &#x3068; `nextState` &#x3092;&#x6BD4;&#x8F03;...</span>
 
+
 
+    <span class="token comment" spellcheck="true">// &#x6B21;&#x306E;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x305F;&#x3081;&#x306B;&#x72B6;&#x614B;&#x3092;&#x4FDD;&#x5B58;</span>
 
+    prevState <span class="token operator">=</span> nextState
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p><strong>&#x72B6;&#x614B;&#x306E;&#x30B9;&#x30CA;&#x30C3;&#x30D7;&#x30B7;&#x30E7;&#x30C3;&#x30C8;&#x3092;&#x64AE;&#x308B;&#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;&#x306F;&#x30A2;&#x30D7;&#x30EA;&#x30B1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x958B;&#x767A;&#x306E;&#x9593;&#x3060;&#x3051;&#x4F7F;&#x308F;&#x308C;&#x308B;&#x3079;&#x304D;&#x3067;&#x3059;&#x3002;</strong>  webpack &#x3084; Browserify &#x3092;&#x4F7F;&#x3063;&#x3066;&#x3044;&#x308C;&#x3070;&#x3001;&#x30D3;&#x30EB;&#x30C9;&#x30C4;&#x30FC;&#x30EB;&#x306B;&#x305D;&#x308C;&#x3092;&#x51E6;&#x7406;&#x3055;&#x305B;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js"><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>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  plugins<span class="token punctuation">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span>NODE_ENV <span class="token operator">!==</span> <span class="token string">&apos;production&apos;</span>
 
+    <span class="token operator">?</span> <span class="token punctuation">[</span>myPluginWithSnapshot<span class="token punctuation">]</span>
 
+    <span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>&#x4E0A;&#x306E;&#x3088;&#x3046;&#x306B;&#x8A18;&#x8FF0;&#x3059;&#x308C;&#x3070;&#x3001;&#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;&#x306F;&#x30C7;&#x30D5;&#x30A9;&#x30EB;&#x30C8;&#x3067;&#x5229;&#x7528;&#x3055;&#x308C;&#x308B;&#x3053;&#x3068;&#x306B;&#x306A;&#x308A;&#x307E;&#x3059;&#x3002;&#x672C;&#x756A;&#x74B0;&#x5883;( production ) &#x3067;&#x306F;&#x3001; <code>process.env.NODE_ENV !== &apos;production&apos;</code> &#x3092; <code>false</code> &#x306B;&#x7F6E;&#x304D;&#x63DB;&#x3048;&#x308B;&#x305F;&#x3081;&#x306B;&#x3001; webpack &#x3067;&#x306F;<a href="https://webpack.js.org/plugins/define-plugin/" target="_blank">DefinePlugin</a> &#x3001; Browserify &#x3067;&#x306F;<a href="https://github.com/hughsk/envify" target="_blank">envify</a> &#x304C;&#x5FC5;&#x8981;&#x306B;&#x306A;&#x308A;&#x307E;&#x3059;&#x3002;</p>
 
+<h3 id="&#x30D3;&#x30EB;&#x30C8;&#x30A4;&#x30F3;&#x30ED;&#x30AC;&#x30FC;&#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;">&#x30D3;&#x30EB;&#x30C8;&#x30A4;&#x30F3;&#x30ED;&#x30AC;&#x30FC;&#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;</h3>
 
+<blockquote>
 
+<p>&#x3082;&#x3057;&#x3001;&#x3042;&#x306A;&#x305F;&#x304C; <a href="https://github.com/vuejs/vue-devtools" target="_blank">vue-devtools</a> &#x3092;&#x4F7F;&#x3063;&#x3066;&#x3044;&#x308B;&#x5834;&#x5408;&#x306F;&#x3001;&#x3053;&#x308C;&#x306F;&#x4E0D;&#x8981;&#x3067;&#x3057;&#x3087;&#x3046;&#x3002;</p>
 
+</blockquote>
 
+<p>Vuex &#x306B;&#x306F;&#x3001;&#x4E00;&#x822C;&#x7684;&#x306A;&#x30C7;&#x30D0;&#x30C3;&#x30B0;&#x306B;&#x5229;&#x7528;&#x3059;&#x308B;&#x7528;&#x9014;&#x306E;&#x5099;&#x3048;&#x4ED8;&#x3051;&#x306E;&#x30ED;&#x30AC;&#x30FC;&#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;&#x304C;&#x3042;&#x308A;&#x307E;&#x3059;&#x3002;</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">import</span> createLogger <span class="token keyword">from</span> <span class="token string">&apos;vuex/dist/logger&apos;</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>
 
+  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token function">createLogger</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p><code>createLogger</code> &#x95A2;&#x6570;&#x306F;&#x3044;&#x304F;&#x3064;&#x304B;&#x306E;&#x30AA;&#x30D7;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x53D7;&#x3051;&#x53D6;&#x308A;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> logger <span class="token operator">=</span> <span class="token function">createLogger</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+  collapsed<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// &#x30ED;&#x30B0;&#x51FA;&#x529B;&#x3055;&#x308C;&#x305F;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x81EA;&#x52D5;&#x3067;&#x5C55;&#x958B;&#x3057;&#x307E;&#x3059;</span>
 
+  filter <span class="token punctuation">(</span>mutation<span class="token punctuation">,</span> stateBefore<span class="token punctuation">,</span> stateAfter<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// &#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x8A18;&#x9332;&#x3059;&#x308B;&#x5FC5;&#x8981;&#x304C;&#x3042;&#x308B;&#x5834;&#x5408;&#x306F;&#x3001;`true` &#x3092;&#x8FD4;&#x3057;&#x307E;&#x3059;</span>
 
+    <span class="token comment" spellcheck="true">// `mutation` &#x306F; `{ type, payload }` &#x3067;&#x3059;</span>
 
+    <span class="token keyword">return</span> mutation<span class="token punctuation">.</span>type <span class="token operator">!==</span> <span class="token string">&quot;aBlacklistedMutation&quot;</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  transformer <span class="token punctuation">(</span>state<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// &#x30ED;&#x30AE;&#x30F3;&#x30B0;&#x306E;&#x524D;&#x306B;&#x3001;&#x72B6;&#x614B;&#x3092;&#x5909;&#x63DB;&#x3057;&#x307E;&#x3059;</span>
 
+    <span class="token comment" spellcheck="true">// &#x4F8B;&#x3048;&#x3070;&#x3001;&#x7279;&#x5B9A;&#x306E;&#x30B5;&#x30D6;&#x30C4;&#x30EA;&#x30FC;&#x306E;&#x307F;&#x3092;&#x8FD4;&#x3057;&#x307E;&#x3059;</span>
 
+    <span class="token keyword">return</span> state<span class="token punctuation">.</span>subTree
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  mutationTransformer <span class="token punctuation">(</span>mutation<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// &#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306F;&#x3001;`{ type, payload }` &#x306E;&#x5F62;&#x5F0F;&#x3067;&#x30ED;&#x30B0;&#x51FA;&#x529B;&#x3055;&#x308C;&#x307E;&#x3059;</span>
 
+    <span class="token comment" spellcheck="true">// &#x4EFB;&#x610F;&#x306E;&#x65B9;&#x6CD5;&#x3067;&#x305D;&#x308C;&#x3092;&#x30D5;&#x30A9;&#x30FC;&#x30DE;&#x30C3;&#x30C8;&#x3067;&#x304D;&#x307E;&#x3059;</span>
 
+    <span class="token keyword">return</span> mutation<span class="token punctuation">.</span>type
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  logger<span class="token punctuation">:</span> console<span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// `console` API &#x306E;&#x5B9F;&#x88C5;, &#x30C7;&#x30D5;&#x30A9;&#x30EB;&#x30C8;&#x306F; `console`</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>&#x30ED;&#x30AC;&#x30FC;&#x30D5;&#x30A1;&#x30A4;&#x30EB;&#x306F;&#x3001;&#x4ED6;&#x306B;&#x3082; <code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span></code> &#x30BF;&#x30B0;&#x3067;&#x76F4;&#x63A5;&#x8AAD;&#x307F;&#x8FBC;&#x3080;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x3001;<code>createVuexLogger</code> &#x95A2;&#x6570;&#x304C;&#x30B0;&#x30ED;&#x30FC;&#x30D0;&#x30EB;&#x306B;&#x516C;&#x958B;&#x3055;&#x308C;&#x307E;&#x3059;&#x3002;</p>
 
+<p>&#x30ED;&#x30AC;&#x30FC;&#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;&#x306F;&#x3001;&#x72B6;&#x614B;&#x306E;&#x30B9;&#x30CA;&#x30C3;&#x30D7;&#x30B7;&#x30E7;&#x30C3;&#x30C8;&#x3092;&#x64AE;&#x308B;&#x3053;&#x3068;&#x306B;&#x6CE8;&#x610F;&#x3057;&#x307E;&#x3057;&#x3087;&#x3046;&#x3002;&#x30B9;&#x30CA;&#x30C3;&#x30D7;&#x30B7;&#x30E7;&#x30C3;&#x30C8;&#x3092;&#x64AE;&#x308B;&#x3053;&#x3068;&#x306F;&#x30B3;&#x30B9;&#x30C8;&#x304C;&#x304B;&#x304B;&#x308B;&#x305F;&#x3081;&#x3001;&#x958B;&#x767A;&#x4E2D;&#x3060;&#x3051;&#x5229;&#x7528;&#x3057;&#x3066;&#x304F;&#x3060;&#x3055;&#x3044;&#x3002;</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="structure.html" class="navigation navigation-prev " aria-label="Previous page: アプリケーションの構造">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="strict.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.8","depth":1,"next":{"title":"厳格モード","level":"1.9","depth":1,"path":"strict.md","ref":"strict.md","articles":[]},"previous":{"title":"アプリケーションの構造","level":"1.7","depth":1,"path":"structure.md","ref":"structure.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":"ja","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"plugins.md","mtime":"2018-04-20T00:44:03.867Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"ja"}});
 
+        });
 
+    </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>
 
+

File diff suppressed because it is too large
+ 0 - 0
ja/search_index.json


File diff suppressed because it is too large
+ 516 - 0
ja/state.html


+ 495 - 0
ja/strict.html
View File 

@@ -0,0 +1,495 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="ja" >
 
+    <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.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="forms.html" />
 
+    
+    
+    <link rel="prev" href="plugins.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">
 
+            
+                    
+                    Vuex 入門
 
+            
+                </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 " 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 active" data-level="1.9" data-path="strict.html">
 
+            
+                <a href="strict.html">
 
+            
+                    
+                    厳格モード
 
+            
+                </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">
 
+    
+
 
+    <!-- Title -->
 
+    <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="&#x53B3;&#x683C;&#x30E2;&#x30FC;&#x30C9;">&#x53B3;&#x683C;&#x30E2;&#x30FC;&#x30C9;</h1>
 
+<p>&#x53B3;&#x683C;&#xFF08;strict&#xFF09;&#x30E2;&#x30FC;&#x30C9;&#x3092;&#x6709;&#x52B9;&#x306B;&#x3059;&#x308B;&#x306B;&#x306F; Vuex store &#x3092;&#x4F5C;&#x6210;&#x3059;&#x308B;&#x3068;&#x304D;&#x306B;&#x3001;&#x305F;&#x3060; <code>strict: true</code> &#x3092;&#x6307;&#x5B9A;&#x3059;&#x308B;&#x3060;&#x3051;&#x3067;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js"><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>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  strict<span class="token punctuation">:</span> <span class="token boolean">true</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>&#x53B3;&#x683C;&#x30E2;&#x30FC;&#x30C9;&#x3067;&#x306F; Vuex &#x306E;&#x72B6;&#x614B;&#x304C;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x30CF;&#x30F3;&#x30C9;&#x30E9;&#x306E;&#x5916;&#x90E8;&#x3067;&#x5909;&#x66F4;&#x3055;&#x308C;&#x305F;&#x3089;&#x3001;&#x30A8;&#x30E9;&#x30FC;&#x3092;&#x6295;&#x3052;&#x308B;&#x3088;&#x3046;&#x306B;&#x306A;&#x308A;&#x307E;&#x3059;&#x3002;&#x3053;&#x308C;&#x3067;&#x5168;&#x3066;&#x306E;&#x72B6;&#x614B;&#x5909;&#x66F4;&#x304C;&#x30C7;&#x30D0;&#x30C3;&#x30AE;&#x30F3;&#x30B0;&#x30C4;&#x30FC;&#x30EB;&#x3067;&#x660E;&#x793A;&#x7684;&#x306B;&#x8FFD;&#x8DE1;&#x3067;&#x304D;&#x308B;&#x3053;&#x3068;&#x304C;&#x4FDD;&#x8A3C;&#x3055;&#x308C;&#x307E;&#x3059;&#x3002;</p>
 
+<h3 id="&#x958B;&#x767A;&#x74B0;&#x5883;-vs-&#x672C;&#x756A;&#x74B0;&#x5883;">&#x958B;&#x767A;&#x74B0;&#x5883; vs &#x672C;&#x756A;&#x74B0;&#x5883;</h3>
 
+<p><strong>&#x672C;&#x756A;&#x74B0;&#x5883;&#x3067;&#x53B3;&#x683C;&#x30E2;&#x30FC;&#x30C9;&#x3092;&#x6709;&#x52B9;&#x306B;&#x3057;&#x3066;&#x30C7;&#x30D7;&#x30ED;&#x30A4;&#x3057;&#x3066;&#x306F;&#x3044;&#x3051;&#x307E;&#x305B;&#x3093;&#xFF01;</strong>&#x53B3;&#x683C;&#x30E2;&#x30FC;&#x30C9;&#x3067;&#x306F;&#x4E0D;&#x9069;&#x5207;&#x306A;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x691C;&#x51FA;&#x3059;&#x308B;&#x305F;&#x3081;&#x306B;&#x30B9;&#x30C6;&#x30FC;&#x30C8;&#x30C4;&#x30EA;&#x30FC;&#x306B;&#x5BFE;&#x3057;&#x3066;&#x6DF1;&#x3044;&#x76E3;&#x8996;&#x3092;&#x5B9F;&#x884C;&#x3057;&#x307E;&#x3059;&#x3002;&#x30D1;&#x30D5;&#x30A9;&#x30FC;&#x30DE;&#x30F3;&#x30B9;&#x30B3;&#x30B9;&#x30C8;&#x3092;&#x56DE;&#x907F;&#x3059;&#x308B;&#x305F;&#x3081;&#x306B;&#x672C;&#x756A;&#x74B0;&#x5883;&#x3067;&#x306F;&#x7121;&#x52B9;&#x306B;&#x3057;&#x3066;&#x304F;&#x3060;&#x3055;&#x3044;&#x3002;</p>
 
+<p>&#x30D7;&#x30E9;&#x30B0;&#x30A4;&#x30F3;&#x3068;&#x540C;&#x69D8;&#x306B;&#x3001;&#x30D3;&#x30EB;&#x30C9;&#x30C4;&#x30FC;&#x30EB;&#x306B;&#x51E6;&#x7406;&#x3055;&#x305B;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-js"><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>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  strict<span class="token punctuation">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span>NODE_ENV <span class="token operator">!==</span> <span class="token string">&apos;production&apos;</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+
 
+                                
+                                </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="plugins.html" class="navigation navigation-prev " aria-label="Previous page: プラグイン">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="forms.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.9","depth":1,"next":{"title":"フォームの扱い","level":"1.10","depth":1,"path":"forms.md","ref":"forms.md","articles":[]},"previous":{"title":"プラグイン","level":"1.8","depth":1,"path":"plugins.md","ref":"plugins.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":"ja","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"strict.md","mtime":"2018-04-20T00:44:03.868Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"ja"}});
 
+        });
 
+    </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>
 
+

+ 507 - 0
ja/structure.html
View File 

@@ -0,0 +1,507 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="ja" >
 
+    <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.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="plugins.html" />
 
+    
+    
+    <link rel="prev" href="modules.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">
 
+            
+                    
+                    Vuex 入門
 
+            
+                </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 " 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 active" 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">
 
+            
+                    
+                    厳格モード
 
+            
+                </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">
 
+    
+
 
+    <!-- Title -->
 
+    <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="&#x30A2;&#x30D7;&#x30EA;&#x30B1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x69CB;&#x9020;">&#x30A2;&#x30D7;&#x30EA;&#x30B1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x69CB;&#x9020;</h1>
 
+<p>Vuex &#x306F;&#x5B9F;&#x969B;&#x306E;&#x3068;&#x3053;&#x308D;&#x3001;&#x3042;&#x306A;&#x305F;&#x304C;&#x30B3;&#x30FC;&#x30C9;&#x3092;&#x69CB;&#x9020;&#x5316;&#x3059;&#x308B;&#x65B9;&#x6CD5;&#x3092;&#x5236;&#x9650;&#x3057;&#x307E;&#x305B;&#x3093;&#x3002;&#x3082;&#x3063;&#x3068;&#x6B63;&#x78BA;&#x306B;&#x8A00;&#x3046;&#x3068;&#x3001;&#x305D;&#x308C;&#x3088;&#x308A;&#x9AD8;&#x3044;&#x30EC;&#x30D9;&#x30EB;&#x306E;&#x539F;&#x7406;&#x539F;&#x5247;&#x3092;&#x9069;&#x7528;&#x3055;&#x305B;&#x307E;&#x3059;:</p>
 
+<ol>
 
+<li><p>&#x30A2;&#x30D7;&#x30EA;&#x30B1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x30EC;&#x30D9;&#x30EB;&#x306E;&#x72B6;&#x614B;&#x306F;&#x30B9;&#x30C8;&#x30A2;&#x306B;&#x96C6;&#x7D04;&#x3055;&#x308C;&#x307E;&#x3059;&#x3002;</p>
 
+</li>
 
+<li><p>&#x72B6;&#x614B;&#x3092;&#x5909;&#x66F4;&#x3059;&#x308B;&#x552F;&#x4E00;&#x306E;&#x65B9;&#x6CD5;&#x306F;&#x3001;&#x540C;&#x671F;&#x7684;&#x306B;&#x51E6;&#x7406;&#x3092;&#x884C;&#x3046;<strong>&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;</strong>&#x3092;&#x30B3;&#x30DF;&#x30C3;&#x30C8;&#x3059;&#x308B;&#x3053;&#x3068;&#x306E;&#x307F;&#x3067;&#x3059;&#x3002;</p>
 
+</li>
 
+<li><p>&#x975E;&#x540C;&#x671F;&#x7684;&#x306A;&#x30ED;&#x30B8;&#x30C3;&#x30AF;&#x306F;&#x30AB;&#x30D7;&#x30BB;&#x30EB;&#x5316;&#x3055;&#x308C;&#x308B;&#x3079;&#x304D;&#x3067;&#x3042;&#x308A;&#x3001;&#x305D;&#x308C;&#x306F;<strong>&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;</strong>&#x306B;&#x3088;&#x3063;&#x3066;&#x69CB;&#x6210;&#x3055;&#x308C;&#x307E;&#x3059;&#x3002;</p>
 
+</li>
 
+</ol>
 
+<p>&#x3053;&#x308C;&#x3089;&#x306E;&#x30EB;&#x30FC;&#x30EB;&#x306B;&#x5F93;&#x3063;&#x3066;&#x3044;&#x308B;&#x9650;&#x308A;&#x3001;&#x30D7;&#x30ED;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x3092;&#x3069;&#x306E;&#x3088;&#x3046;&#x306B;&#x69CB;&#x9020;&#x5316;&#x3059;&#x308B;&#x304B;&#x306F;&#x3042;&#x306A;&#x305F;&#x6B21;&#x7B2C;&#x3067;&#x3059;&#x3002;&#x3082;&#x3057;&#x30B9;&#x30C8;&#x30A2;&#x30D5;&#x30A1;&#x30A4;&#x30EB;&#x304C;&#x5927;&#x304D;&#x304F;&#x306A;&#x308A;&#x904E;&#x304E;&#x305F;&#x3089;&#x3001;&#x5358;&#x7D14;&#x306B;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3084;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3001;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x3092;&#x305D;&#x308C;&#x305E;&#x308C;&#x5225;&#x306E;&#x30D5;&#x30A1;&#x30A4;&#x30EB;&#x306B;&#x5207;&#x308A;&#x51FA;&#x3059;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;</p>
 
+<p>&#x305D;&#x308C;&#x306A;&#x308A;&#x306B;&#x624B;&#x306E;&#x8FBC;&#x3093;&#x3060;&#x30A2;&#x30D7;&#x30EA;&#x30B1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3067;&#x3042;&#x308C;&#x3070;&#x3001;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3092;&#x6D3B;&#x7528;&#x3059;&#x308B;&#x5FC5;&#x8981;&#x304C;&#x51FA;&#x3066;&#x304D;&#x305D;&#x3046;&#x3067;&#x3059;&#x3002;&#x30D7;&#x30ED;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x306E;&#x69CB;&#x9020;&#x306E;&#x4F8B;&#x306F;&#x4EE5;&#x4E0B;&#x306E;&#x3088;&#x3046;&#x306B;&#x306A;&#x308A;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-bash">&#x251C;&#x2500;&#x2500; index.html
 
+&#x251C;&#x2500;&#x2500; main.js
 
+&#x251C;&#x2500;&#x2500; api
 
+&#x2502;   &#x2514;&#x2500;&#x2500; <span class="token punctuation">..</span>. <span class="token comment" spellcheck="true"># API &#x547C;&#x3073;&#x51FA;&#x3057;&#x3092;&#x62BD;&#x8C61;&#x5316;&#x3059;&#x308B;</span>
 
+&#x251C;&#x2500;&#x2500; components
 
+&#x2502;   &#x251C;&#x2500;&#x2500; App.vue
 
+&#x2502;   &#x2514;&#x2500;&#x2500; <span class="token punctuation">..</span>.
 
+&#x2514;&#x2500;&#x2500; store
 
+    &#x251C;&#x2500;&#x2500; index.js          <span class="token comment" spellcheck="true"># &#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3092;&#x96C6;&#x3081;&#x3066;&#x30B9;&#x30C8;&#x30A2;&#x3092;&#x30A8;&#x30AF;&#x30B9;&#x30DD;&#x30FC;&#x30C8;&#x3059;&#x308B;</span>
 
+    &#x251C;&#x2500;&#x2500; actions.js        <span class="token comment" spellcheck="true"># &#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x30EB;&#x30FC;&#x30C8;&#x30D5;&#x30A1;&#x30A4;&#x30EB;</span>
 
+    &#x251C;&#x2500;&#x2500; mutations.js      <span class="token comment" spellcheck="true"># &#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x30EB;&#x30FC;&#x30C8;&#x30D5;&#x30A1;&#x30A4;&#x30EB;</span>
 
+    &#x2514;&#x2500;&#x2500; modules
 
+        &#x251C;&#x2500;&#x2500; cart.js       <span class="token comment" spellcheck="true"># cart &#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;</span>
 
+        &#x2514;&#x2500;&#x2500; products.js   <span class="token comment" spellcheck="true"># products &#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;</span>
 
+</code></pre>
 
+<p>&#x53C2;&#x8003;&#x3068;&#x3057;&#x3066; <a href="https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart" target="_blank">Shopping Cart Example</a> &#x3092;&#x307F;&#x3066;&#x307F;&#x308B;&#x306E;&#x3082;&#x3088;&#x3044;&#x3067;&#x3057;&#x3087;&#x3046;&#x3002;</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="modules.html" class="navigation navigation-prev " aria-label="Previous page: モジュール">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="plugins.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.7","depth":1,"next":{"title":"プラグイン","level":"1.8","depth":1,"path":"plugins.md","ref":"plugins.md","articles":[]},"previous":{"title":"モジュール","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":"ja","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"structure.md","mtime":"2018-04-20T00:44:03.868Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"ja"}});
 
+        });
 
+    </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>
 
+

+ 665 - 0
ja/testing.html
View File 

@@ -0,0 +1,665 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="ja" >
 
+    <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.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="hot-reload.html" />
 
+    
+    
+    <link rel="prev" href="forms.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">
 
+            
+                    
+                    Vuex 入門
 
+            
+                </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 " 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">
 
+            
+                    
+                    厳格モード
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.10" data-path="forms.html">
 
+            
+                <a href="forms.html">
 
+            
+                    
+                    フォームの扱い
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter active" 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">
 
+    
+
 
+    <!-- Title -->
 
+    <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="&#x30C6;&#x30B9;&#x30C8;">&#x30C6;&#x30B9;&#x30C8;</h1>
 
+<p>&#x79C1;&#x305F;&#x3061;&#x304C; Vuex &#x3067;&#x30E6;&#x30CB;&#x30C3;&#x30C8;&#x30C6;&#x30B9;&#x30C8;&#x3057;&#x305F;&#x3044;&#x4E3B;&#x306A;&#x90E8;&#x5206;&#x306F;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3068;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3067;&#x3059;&#x3002;</p>
 
+<h3 id="&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x30C6;&#x30B9;&#x30C8;">&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x30C6;&#x30B9;&#x30C8;</h3>
 
+<p>&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306F;&#x5B8C;&#x5168;&#x306B;&#x5F15;&#x6570;&#x306B;&#x4F9D;&#x5B58;&#x3057;&#x3066;&#x3044;&#x308B;&#x3060;&#x3051;&#x306E;&#x95A2;&#x6570;&#x3067;&#x3042;&#x308B;&#x305F;&#x3081;&#x3001;&#x30C6;&#x30B9;&#x30C8;&#x3059;&#x308B;&#x306E;&#x304C;&#x3068;&#x3066;&#x3082;&#x7C21;&#x5358;&#x3067;&#x3059;&#x3002;&#x52B9;&#x679C;&#x7684;&#x306A;&#x3084;&#x308A;&#x65B9;&#x3068;&#x3057;&#x3066;&#x3001;&#x3082;&#x3057; ES2015 &#x306E;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3092;&#x4F7F;&#x3063;&#x3066;&#x3044;&#x3066; <code>store.js</code> &#x30D5;&#x30A1;&#x30A4;&#x30EB;&#x306E;&#x4E2D;&#x306B;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x304C;&#x3042;&#x308B;&#x306A;&#x3089;&#x3001;&#x30C7;&#x30D5;&#x30A9;&#x30EB;&#x30C8;&#x30A8;&#x30AF;&#x30B9;&#x30DD;&#x30FC;&#x30C8;&#x306B;&#x52A0;&#x3048;&#x3066;&#x3001;&#x540D;&#x524D;&#x4ED8;&#x304D;&#x30A8;&#x30AF;&#x30B9;&#x30DD;&#x30FC;&#x30C8;&#x3067;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x30A8;&#x30AF;&#x30B9;&#x30DD;&#x30FC;&#x30C8;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
 
+
 
+<span class="token comment" spellcheck="true">// &#x540D;&#x524D;&#x4ED8;&#x304D;&#x30A8;&#x30AF;&#x30B9;&#x30DD;&#x30FC;&#x30C8;&#x3067;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x30A8;&#x30AF;&#x30B9;&#x30DD;&#x30FC;&#x30C8;&#x3059;&#x308B;</span>
 
+<span class="token keyword">export</span> <span class="token keyword">const</span> mutations <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
 
+
 
+<span class="token keyword">export</span> <span class="token keyword">default</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>
 
+  mutations
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>Mocha + Chai &#x3092;&#x4F7F;&#x7528;&#x3057;&#x3066;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x30C6;&#x30B9;&#x30C8;&#x3059;&#x308B;&#x4F8B;&#x3067;&#x3059;&#xFF08;&#x3042;&#x306A;&#x305F;&#x306E;&#x597D;&#x304D;&#x306A;&#x4EFB;&#x610F;&#x306E;&#x30D5;&#x30EC;&#x30FC;&#x30E0;&#x30EF;&#x30FC;&#x30AF;/&#x30A2;&#x30B5;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x30E9;&#x30A4;&#x30D6;&#x30E9;&#x30EA;&#x3092;&#x4F7F;&#x7528;&#x3067;&#x304D;&#x307E;&#x3059;&#xFF09;:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// mutations.js</span>
 
+<span class="token keyword">export</span> <span class="token keyword">const</span> mutations <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+  increment<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 operator">++</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// mutations.spec.js</span>
 
+<span class="token keyword">import</span> <span class="token punctuation">{</span> expect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&apos;chai&apos;</span>
 
+<span class="token keyword">import</span> <span class="token punctuation">{</span> mutations <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&apos;./store&apos;</span>
 
+
 
+<span class="token comment" spellcheck="true">// &#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x5206;&#x5272;&#x675F;&#x7E1B;</span>
 
+<span class="token keyword">const</span> <span class="token punctuation">{</span> increment <span class="token punctuation">}</span> <span class="token operator">=</span> mutations
 
+
 
+<span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">&apos;mutations&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">&apos;INCREMENT&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// &#x30B9;&#x30C6;&#x30FC;&#x30C8;&#x306E;&#x30E2;&#x30C3;&#x30AF;</span>
 
+    <span class="token keyword">const</span> state <span class="token operator">=</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 comment" spellcheck="true">// &#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x9069;&#x7528;&#x3059;&#x308B;</span>
 
+    <span class="token function">increment</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span>
 
+    <span class="token comment" spellcheck="true">// &#x7D50;&#x679C;&#x3092;&#x691C;&#x8A3C;&#x3059;&#x308B;</span>
 
+    <span class="token function">expect</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>count<span class="token punctuation">)</span><span class="token punctuation">.</span>to<span class="token punctuation">.</span><span class="token function">equal</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<h3 id="&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x30C6;&#x30B9;&#x30C8;">&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x30C6;&#x30B9;&#x30C8;</h3>
 
+<p>&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x306F;&#x5916;&#x90E8;&#x306E; API &#x3092;&#x547C;&#x3073;&#x51FA;&#x3059;&#x53EF;&#x80FD;&#x6027;&#x304C;&#x3042;&#x308B;&#x305F;&#x3081;&#x3001;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x30C6;&#x30B9;&#x30C8;&#x3088;&#x308A;&#x3082;&#x5C11;&#x3057;&#x6CE8;&#x610F;&#x304C;&#x5FC5;&#x8981;&#x3067;&#x3059;&#x3002;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x30C6;&#x30B9;&#x30C8;&#x3059;&#x308B;&#x3068;&#x304D;&#x3001;&#x901A;&#x5E38;&#x3001;&#x3044;&#x304F;&#x3064;&#x304B;&#x306E;&#x6BB5;&#x968E;&#x3067;&#x30E2;&#x30C3;&#x30AF;&#x3092;&#x4F5C;&#x308B;&#x5FC5;&#x8981;&#x304C;&#x3042;&#x308A;&#x307E;&#x3059;&#x3002;&#x4F8B;&#x3048;&#x3070; API &#x547C;&#x3073;&#x51FA;&#x3057;&#x3092;&#x30B5;&#x30FC;&#x30D3;&#x30B9;&#x3068;&#x3057;&#x3066;&#x62BD;&#x8C61;&#x5316;&#x3057;&#x3001;&#x305D;&#x3057;&#x3066;&#x30C6;&#x30B9;&#x30C8;&#x306E;&#x5185;&#x90E8;&#x3067;&#x306F;&#x305D;&#x306E;&#x30B5;&#x30FC;&#x30D3;&#x30B9;&#x3092;&#x30E2;&#x30C3;&#x30AF;&#x306B;&#x3059;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;&#x7C21;&#x5358;&#x306B;&#x4F9D;&#x5B58;&#x95A2;&#x4FC2;&#x3092;&#x30E2;&#x30C3;&#x30AF;&#x5316;&#x3059;&#x308B;&#x305F;&#x3081;&#x306B;&#x3001;webpack &#x3068; <a href="https://github.com/plasticine/inject-loader" target="_blank">inject-loader</a> &#x3092;&#x4F7F;&#x3063;&#x3066;&#x30C6;&#x30B9;&#x30C8;&#x30D5;&#x30A1;&#x30A4;&#x30EB;&#x3092;&#x30D0;&#x30F3;&#x30C9;&#x30EB;&#x3059;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;</p>
 
+<p>&#x975E;&#x540C;&#x671F;&#x306A;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x30C6;&#x30B9;&#x30C8;&#x306E;&#x4F8B;:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// actions.js</span>
 
+<span class="token keyword">import</span> shop <span class="token keyword">from</span> <span class="token string">&apos;../api/shop&apos;</span>
 
+
 
+<span class="token keyword">export</span> <span class="token keyword">const</span> getAllProducts <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> commit <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;REQUEST_PRODUCTS&apos;</span><span class="token punctuation">)</span>
 
+  shop<span class="token punctuation">.</span><span class="token function">getProducts</span><span class="token punctuation">(</span>products <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;RECEIVE_PRODUCTS&apos;</span><span class="token punctuation">,</span> products<span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// actions.spec.js</span>
 
+
 
+<span class="token comment" spellcheck="true">// inline loader &#x306E;&#x305F;&#x3081;&#x306B; require &#x69CB;&#x6587;&#x3092;&#x4F7F;&#x7528;&#x3059;&#x308B;</span>
 
+<span class="token comment" spellcheck="true">// &#x3053;&#x3053;&#x3067;&#x306F; inject-loader &#x3092;&#x4F7F;&#x3063;&#x3066;&#x3001;&#x30E2;&#x30C3;&#x30AF;&#x5316;&#x3055;&#x308C;&#x305F;&#x4F9D;&#x5B58;&#x95A2;&#x4FC2;&#x3092;&#x6CE8;&#x5165;&#x3067;&#x304D;&#x308B;&#x3088;&#x3046;&#x306B;&#x3059;&#x308B;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x30D5;&#x30A1;&#x30AF;&#x30C8;&#x30EA;&#x30FC;&#x3092;&#x8FD4;&#x3059;</span>
 
+<span class="token keyword">import</span> <span class="token punctuation">{</span> expect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&apos;chai&apos;</span>
 
+<span class="token keyword">const</span> actionsInjector <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&apos;inject-loader!./actions&apos;</span><span class="token punctuation">)</span>
 
+
 
+<span class="token comment" spellcheck="true">// &#x30E2;&#x30C3;&#x30AF;&#x306B;&#x3088;&#x3063;&#x3066;&#x30E2;&#x30B8;&#x30E5;&#x30FC;&#x30EB;&#x3092;&#x4F5C;&#x6210;&#x3059;&#x308B;</span>
 
+<span class="token keyword">const</span> actions <span class="token operator">=</span> <span class="token function">actionsInjector</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+  <span class="token string">&apos;../api/shop&apos;</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    getProducts <span class="token punctuation">(</span>cb<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+        <span class="token function">cb</span><span class="token punctuation">(</span><span class="token punctuation">[</span> <span class="token comment" spellcheck="true">/* &#x30EC;&#x30B9;&#x30DD;&#x30F3;&#x30B9;&#x306E;&#x30E2;&#x30C3;&#x30AF; */</span> <span class="token punctuation">]</span><span class="token punctuation">)</span>
 
+      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+
 
+<span class="token comment" spellcheck="true">// &#x671F;&#x5F85;&#x3055;&#x308C;&#x308B;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x304C;&#x547C;&#x3073;&#x51FA;&#x3059;&#x304B;&#x3092;&#x30C6;&#x30B9;&#x30C8;&#x3059;&#x308B;&#x305F;&#x3081;&#x306E;&#x30D8;&#x30EB;&#x30D1;&#x30FC;</span>
 
+<span class="token keyword">const</span> testAction <span class="token operator">=</span> <span class="token punctuation">(</span>action<span class="token punctuation">,</span> payload<span class="token punctuation">,</span> state<span class="token punctuation">,</span> expectedMutations<span class="token punctuation">,</span> done<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  <span class="token keyword">let</span> count <span class="token operator">=</span> <span class="token number">0</span>
 
+
 
+  <span class="token comment" spellcheck="true">// &#x30B3;&#x30DF;&#x30C3;&#x30C8;&#x3092;&#x30E2;&#x30C3;&#x30AF;&#x3059;&#x308B;</span>
 
+  <span class="token keyword">const</span> commit <span class="token operator">=</span> <span class="token punctuation">(</span>type<span class="token punctuation">,</span> payload<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">const</span> mutation <span class="token operator">=</span> expectedMutations<span class="token punctuation">[</span>count<span class="token punctuation">]</span>
 
+
 
+    <span class="token keyword">try</span> <span class="token punctuation">{</span>
 
+      <span class="token function">expect</span><span class="token punctuation">(</span>type<span class="token punctuation">)</span><span class="token punctuation">.</span>to<span class="token punctuation">.</span><span class="token function">equal</span><span class="token punctuation">(</span>mutation<span class="token punctuation">.</span>type<span class="token punctuation">)</span>
 
+      <span class="token keyword">if</span> <span class="token punctuation">(</span>payload<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+        <span class="token function">expect</span><span class="token punctuation">(</span>payload<span class="token punctuation">)</span><span class="token punctuation">.</span>to<span class="token punctuation">.</span>deep<span class="token punctuation">.</span><span class="token function">equal</span><span class="token punctuation">(</span>mutation<span class="token punctuation">.</span>payload<span class="token punctuation">)</span>
 
+      <span class="token punctuation">}</span>
 
+    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+      <span class="token function">done</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span>
 
+
 
+    count<span class="token operator">++</span>
 
+    <span class="token keyword">if</span> <span class="token punctuation">(</span>count <span class="token operator">&gt;=</span> expectedMutations<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+      <span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+
 
+  <span class="token comment" spellcheck="true">// &#x30E2;&#x30C3;&#x30AF;&#x5316;&#x3057;&#x305F;&#x30B9;&#x30C8;&#x30A2;&#x3068;&#x5F15;&#x6570;&#x3067;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x547C;&#x3073;&#x51FA;&#x3059;</span>
 
+  <span class="token function">action</span><span class="token punctuation">(</span><span class="token punctuation">{</span> commit<span class="token punctuation">,</span> state <span class="token punctuation">}</span><span class="token punctuation">,</span> payload<span class="token punctuation">)</span>
 
+
 
+  <span class="token comment" spellcheck="true">// &#x547C;&#x3073;&#x51FA;&#x3055;&#x308C;&#x308B;&#x3079;&#x304D;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x304C;&#x6B8B;&#x3063;&#x3066;&#x3044;&#x306A;&#x3044;&#x304B;&#x78BA;&#x8A8D;&#x3059;&#x308B;</span>
 
+  <span class="token keyword">if</span> <span class="token punctuation">(</span>expectedMutations<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token function">expect</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span><span class="token punctuation">.</span>to<span class="token punctuation">.</span><span class="token function">equal</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
 
+    <span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+
 
+<span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">&apos;actions&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">&apos;getAllProducts&apos;</span><span class="token punctuation">,</span> done <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token function">testAction</span><span class="token punctuation">(</span>actions<span class="token punctuation">.</span>getAllProducts<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>
 
+      <span class="token punctuation">{</span> type<span class="token punctuation">:</span> <span class="token string">&apos;REQUEST_PRODUCTS&apos;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+      <span class="token punctuation">{</span> type<span class="token punctuation">:</span> <span class="token string">&apos;RECEIVE_PRODUCTS&apos;</span><span class="token punctuation">,</span> payload<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* &#x30EC;&#x30B9;&#x30DD;&#x30F3;&#x30B9;&#x306E;&#x30E2;&#x30C3;&#x30AF; */</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
 
+    <span class="token punctuation">]</span><span class="token punctuation">,</span> done<span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<h3 id="&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x306E;&#x30C6;&#x30B9;&#x30C8;">&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x306E;&#x30C6;&#x30B9;&#x30C8;</h3>
 
+<p>&#x3082;&#x3057;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x304C;&#x8907;&#x96D1;&#x306A;&#x8A08;&#x7B97;&#x3092;&#x884C;&#x3063;&#x3066;&#x3044;&#x308B;&#x306A;&#x3089;&#x3070;&#x3001;&#x30C6;&#x30B9;&#x30C8;&#x30B3;&#x30FC;&#x30C9;&#x3092;&#x66F8;&#x304F;&#x4FA1;&#x5024;&#x304C;&#x3042;&#x308A;&#x307E;&#x3059;&#x3002;&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x306F;&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3068;&#x540C;&#x69D8;&#x306E;&#x7406;&#x7531;&#x3067;&#x30C6;&#x30B9;&#x30C8;&#x3057;&#x3084;&#x3059;&#x3044;&#x3067;&#x3059;&#x3002;</p>
 
+<p>&#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x306E;&#x30C6;&#x30B9;&#x30C8;&#x306E;&#x4F8B;:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// getters.js</span>
 
+<span class="token keyword">export</span> <span class="token keyword">const</span> getters <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+  filteredProducts <span class="token punctuation">(</span>state<span class="token punctuation">,</span> <span class="token punctuation">{</span> filterCategory <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">return</span> state<span class="token punctuation">.</span>products<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>product <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+      <span class="token keyword">return</span> product<span class="token punctuation">.</span>category <span class="token operator">===</span> filterCategory
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// getters.spec.js</span>
 
+<span class="token keyword">import</span> <span class="token punctuation">{</span> expect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&apos;chai&apos;</span>
 
+<span class="token keyword">import</span> <span class="token punctuation">{</span> getters <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&apos;./getters&apos;</span>
 
+
 
+<span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">&apos;getters&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">&apos;filteredProducts&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// &#x30B9;&#x30C6;&#x30FC;&#x30C8;&#x3092;&#x30E2;&#x30C3;&#x30AF;&#x3059;&#x308B;</span>
 
+    <span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+      products<span class="token punctuation">:</span> <span class="token punctuation">[</span>
 
+        <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token string">&apos;Apple&apos;</span><span class="token punctuation">,</span> category<span class="token punctuation">:</span> <span class="token string">&apos;fruit&apos;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+        <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token string">&apos;Orange&apos;</span><span class="token punctuation">,</span> category<span class="token punctuation">:</span> <span class="token string">&apos;fruit&apos;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+        <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token string">&apos;Carrot&apos;</span><span class="token punctuation">,</span> category<span class="token punctuation">:</span> <span class="token string">&apos;vegetable&apos;</span> <span class="token punctuation">}</span>
 
+      <span class="token punctuation">]</span>
 
+    <span class="token punctuation">}</span>
 
+    <span class="token comment" spellcheck="true">// &#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x3092;&#x30E2;&#x30C3;&#x30AF;&#x3059;&#x308B;</span>
 
+    <span class="token keyword">const</span> filterCategory <span class="token operator">=</span> <span class="token string">&apos;fruit&apos;</span>
 
+
 
+    <span class="token comment" spellcheck="true">// &#x30B2;&#x30C3;&#x30BF;&#x30FC;&#x304B;&#x3089;&#x7D50;&#x679C;&#x3092;&#x53D7;&#x3051;&#x53D6;&#x308B;</span>
 
+    <span class="token keyword">const</span> result <span class="token operator">=</span> getters<span class="token punctuation">.</span><span class="token function">filteredProducts</span><span class="token punctuation">(</span>state<span class="token punctuation">,</span> <span class="token punctuation">{</span> filterCategory <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+
 
+    <span class="token comment" spellcheck="true">// &#x7D50;&#x679C;&#x3092;&#x691C;&#x8A3C;&#x3059;&#x308B;</span>
 
+    <span class="token function">expect</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">.</span>to<span class="token punctuation">.</span>deep<span class="token punctuation">.</span><span class="token function">equal</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
 
+      <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token string">&apos;Apple&apos;</span><span class="token punctuation">,</span> category<span class="token punctuation">:</span> <span class="token string">&apos;fruit&apos;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+      <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token string">&apos;Orange&apos;</span><span class="token punctuation">,</span> category<span class="token punctuation">:</span> <span class="token string">&apos;fruit&apos;</span> <span class="token punctuation">}</span>
 
+    <span class="token punctuation">]</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<h3 id="&#x30C6;&#x30B9;&#x30C8;&#x306E;&#x5B9F;&#x884C;">&#x30C6;&#x30B9;&#x30C8;&#x306E;&#x5B9F;&#x884C;</h3>
 
+<p>&#x30DF;&#x30E5;&#x30FC;&#x30C6;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3084;&#x30A2;&#x30AF;&#x30B7;&#x30E7;&#x30F3;&#x304C;&#x9069;&#x5207;&#x306B;&#x66F8;&#x304B;&#x308C;&#x3066;&#x3044;&#x308B;&#x5834;&#x5408;&#x306F;&#x3001;&#x9069;&#x5207;&#x306B;&#x30E2;&#x30C3;&#x30AF;&#x5316;&#x3055;&#x308C;&#x305F;&#x5F8C;&#x3001;&#x30C6;&#x30B9;&#x30C8;&#x30B3;&#x30FC;&#x30C9;&#x306F;&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x306E; API &#x306B;&#x76F4;&#x63A5;&#x4F9D;&#x5B58;&#x95A2;&#x4FC2;&#x3092;&#x6301;&#x3064;&#x3053;&#x3068;&#x306F;&#x306A;&#x3044;&#x3067;&#x3057;&#x3087;&#x3046;&#x3002;&#x3057;&#x305F;&#x304C;&#x3063;&#x3066;&#x3001;&#x5358;&#x7D14;&#x306B; webpack &#x3067;&#x30C6;&#x30B9;&#x30C8;&#x3092;&#x30D0;&#x30F3;&#x30C9;&#x30EB;&#x3067;&#x304D;&#x3001;&#x305D;&#x308C;&#x3092;&#x76F4;&#x63A5; Node &#x3067;&#x5B9F;&#x884C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;&#x5225;&#x306E;&#x65B9;&#x6CD5;&#x3068;&#x3057;&#x3066;&#x3001;&#x672C;&#x5F53;&#x306E;&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x3067;&#x30C6;&#x30B9;&#x30C8;&#x3092;&#x5B9F;&#x884C;&#x3059;&#x308B;&#x305F;&#x3081;&#x306B;&#x306F; <code>mocha-loader</code> &#x307E;&#x305F;&#x306F; Karma + <code>karma-webpack</code> &#x3092;&#x4F7F;&#x7528;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;</p>
 
+<h4 id="node-&#x3067;&#x306E;&#x5B9F;&#x884C;">Node &#x3067;&#x306E;&#x5B9F;&#x884C;</h4>
 
+<p>&#x4EE5;&#x4E0B;&#x306E;&#x3088;&#x3046;&#x306A; webpack &#x306E;&#x8A2D;&#x5B9A;&#x3092;&#x4F5C;&#x6210;&#x3057;&#x307E;&#x3059;&#xFF08;<a href="https://babeljs.io/docs/usage/babelrc/" target="_blank"><code>.babelrc</code></a> &#x3082;&#x3042;&#x308F;&#x305B;&#x3066;&#x4F7F;&#x3044;&#x307E;&#x3059;&#xFF09;:</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// webpack.config.js</span>
 
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
 
+  entry<span class="token punctuation">:</span> <span class="token string">&apos;./test.js&apos;</span><span class="token punctuation">,</span>
 
+  output<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    path<span class="token punctuation">:</span> __dirname<span class="token punctuation">,</span>
 
+    filename<span class="token punctuation">:</span> <span class="token string">&apos;test-bundle.js&apos;</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    loaders<span class="token punctuation">:</span> <span class="token punctuation">[</span>
 
+      <span class="token punctuation">{</span>
 
+        test<span class="token punctuation">:</span> <span class="token regex">/\.js$/</span><span class="token punctuation">,</span>
 
+        loader<span class="token punctuation">:</span> <span class="token string">&apos;babel-loader&apos;</span><span class="token punctuation">,</span>
 
+        exclude<span class="token punctuation">:</span> <span class="token regex">/node_modules/</span>
 
+      <span class="token punctuation">}</span>
 
+    <span class="token punctuation">]</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>&#x305D;&#x308C;&#x304B;&#x3089;&#x4E0B;&#x8A18;&#x30B3;&#x30DE;&#x30F3;&#x30C9;&#x3092;&#x5B9F;&#x884C;&#x3057;&#x307E;&#x3059;:</p>
 
+<pre class="language-"><code class="lang-bash">webpack
 
+mocha test-bundle.js
 
+</code></pre>
 
+<h4 id="&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x3067;&#x306E;&#x5B9F;&#x884C;">&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x3067;&#x306E;&#x5B9F;&#x884C;</h4>
 
+<ol>
 
+<li><code>mocha-loader</code> &#x3092;&#x30A4;&#x30F3;&#x30B9;&#x30C8;&#x30FC;&#x30EB;&#x3059;&#x308B;</li>
 
+<li>&#x4E0A;&#x8A18; webpack &#x8A2D;&#x5B9A;&#x304B;&#x3089; <code>entry</code> &#x3092; <code>&apos;mocha-loader!babel-loader!./test.js&apos;</code> &#x306B;&#x5909;&#x66F4;&#x3059;&#x308B;</li>
 
+<li>&#x8A2D;&#x5B9A;&#x3092;&#x4F7F;&#x7528;&#x3057;&#x3066; <code>webpack-dev-server</code> &#x3092;&#x958B;&#x59CB;&#x3059;&#x308B;</li>
 
+<li>&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x3067; <code>localhost:8080/webpack-dev-server/test-bundle</code> &#x3092;&#x958B;&#x304F; </li>
 
+</ol>
 
+<h4 id="karma--karma-webpack-&#x3092;&#x4F7F;&#x3063;&#x305F;&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x3067;&#x306E;&#x5B9F;&#x884C;">Karma + karma-webpack &#x3092;&#x4F7F;&#x3063;&#x305F;&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x3067;&#x306E;&#x5B9F;&#x884C;</h4>
 
+<p><a href="https://vue-loader.vuejs.org/ja/workflow/testing.html" target="_blank">vue-loader &#x30C9;&#x30AD;&#x30E5;&#x30E1;&#x30F3;&#x30C8;</a> &#x5185;&#x306E;&#x30BB;&#x30C3;&#x30C8;&#x30A2;&#x30C3;&#x30D7;&#x65B9;&#x6CD5;&#x3092;&#x53C2;&#x8003;&#x306B;&#x3057;&#x3066;&#x304F;&#x3060;&#x3055;&#x3044;&#x3002;</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="forms.html" class="navigation navigation-prev " aria-label="Previous page: フォームの扱い">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="hot-reload.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.11","depth":1,"next":{"title":"ホットリローディング","level":"1.12","depth":1,"path":"hot-reload.md","ref":"hot-reload.md","articles":[]},"previous":{"title":"フォームの扱い","level":"1.10","depth":1,"path":"forms.md","ref":"forms.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":"ja","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"testing.md","mtime":"2018-04-20T00:44:03.868Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"ja"}});
 
+        });
 
+    </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>
 
+

+ 629 - 0
kr/actions.html
View File 

@@ -0,0 +1,629 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="kr" >
 
+    <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.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="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/tree/1.0/docs">
 
+            
+                    
+                    1.0 버전 문서를 보려면?
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.3" >
 
+            
+                <a target="_blank" href="https://github.com/vuejs/vuex/releases">
 
+            
+                    
+                    릴리즈 노트
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.4" data-path="installation.html">
 
+            
+                <a href="installation.html">
 
+            
+                    
+                    설치
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.5" data-path="intro.html">
 
+            
+                <a href="intro.html">
 
+            
+                    
+                    Vuex가 무엇인가요?
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6" data-path="getting-started.html">
 
+            
+                <a href="getting-started.html">
 
+            
+                    
+                    시작하기
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.7" >
 
+            
+                <span>
 
+            
+                    
+                    핵심 컨셉
 
+            
+                </span>
 
+            
+
 
+            
+            <ul class="articles">
 
+                
+    
+        <li class="chapter " data-level="1.7.1" data-path="state.html">
 
+            
+                <a href="state.html">
 
+            
+                    
+                    상태
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.7.2" data-path="getters.html">
 
+            
+                <a href="getters.html">
 
+            
+                    
+                    Getters
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.7.3" data-path="mutations.html">
 
+            
+                <a href="mutations.html">
 
+            
+                    
+                    변이
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter active" data-level="1.7.4" data-path="actions.html">
 
+            
+                <a href="actions.html">
 
+            
+                    
+                    액션
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.7.5" data-path="modules.html">
 
+            
+                <a href="modules.html">
 
+            
+                    
+                    모듈
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+
 
+            </ul>
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.8" data-path="structure.html">
 
+            
+                <a href="structure.html">
 
+            
+                    
+                    애플리케이션 구조
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.9" data-path="plugins.html">
 
+            
+                <a href="plugins.html">
 
+            
+                    
+                    플러그인
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.10" data-path="strict.html">
 
+            
+                <a href="strict.html">
 
+            
+                    
+                    Strict 모드
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.11" data-path="forms.html">
 
+            
+                <a href="forms.html">
 
+            
+                    
+                    폼 핸들링
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.12" data-path="testing.html">
 
+            
+                <a href="testing.html">
 
+            
+                    
+                    테스팅
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.13" data-path="hot-reload.html">
 
+            
+                <a href="hot-reload.html">
 
+            
+                    
+                    핫 리로딩
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.14" 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">
 
+            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="." >액션</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="&#xC561;&#xC158;">&#xC561;&#xC158;</h1>
 
+<p>&#xC561;&#xC158;&#xC740; &#xBCC0;&#xC774;&#xC640; &#xC720;&#xC0AC;&#xD569;&#xB2C8;&#xB2E4;. &#xBA87;&#xAC00;&#xC9C0; &#xB2E4;&#xB978; &#xC810;&#xC740;,</p>
 
+<ul>
 
+<li>&#xC0C1;&#xD0DC;&#xB97C; &#xBCC0;&#xC774;&#xC2DC;&#xD0A4;&#xB294; &#xB300;&#xC2E0; &#xC561;&#xC158;&#xC73C;&#xB85C; &#xBCC0;&#xC774;&#xC5D0; &#xB300;&#xD55C; &#xCEE4;&#xBC0B;&#xC744; &#xD569;&#xB2C8;&#xB2E4;.</li>
 
+<li>&#xC791;&#xC5C5;&#xC5D0;&#xB294; &#xC784;&#xC758;&#xC758; &#xBE44;&#xB3D9;&#xAE30; &#xC791;&#xC5C5;&#xC774; &#xD3EC;&#xD568;&#xB420; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</li>
 
+</ul>
 
+<p>&#xAC04;&#xB2E8;&#xD55C; &#xC561;&#xC158;&#xC744; &#xB4F1;&#xB85D;&#xD569;&#xC2DC;&#xB2E4;.</p>
 
+<pre class="language-"><code class="lang-js"><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>
 
+  actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    increment <span class="token punctuation">(</span>context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+      context<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>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>&#xC561;&#xC158; &#xD578;&#xB4E4;&#xB7EC;&#xB294; &#xC800;&#xC7A5;&#xC18C; &#xC778;&#xC2A4;&#xD134;&#xC2A4;&#xC758; &#xAC19;&#xC740; &#xBA54;&#xC18C;&#xB4DC;&#xB4E4;/&#xD504;&#xB85C;&#xD37C;&#xD2F0; &#xC138;&#xD2B8;&#xB97C; &#xB4DC;&#xB7EC;&#xB0B4;&#xB294; &#xCEE8;&#xD14D;&#xC2A4;&#xD2B8; &#xAC1D;&#xCCB4;&#xB97C; &#xBC1B;&#xC2B5;&#xB2C8;&#xB2E4;. &#xADF8;&#xB798;&#xC11C; <code>context.commit</code>&#xC744; &#xD638;&#xCD9C;&#xD558;&#xC5EC; &#xBCC0;&#xC774;&#xB97C; &#xCEE4;&#xBC0B;&#xD558;&#xAC70;&#xB098; <code>context.state</code>&#xC640; <code>context.getters</code>&#xB97C; &#xD1B5;&#xD574; &#xC0C1;&#xD0DC;&#xC640; getters&#xC5D0; &#xC811;&#xADFC; &#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;. &#xB098;&#xC911;&#xC5D0; <a href="modules.html">&#xBAA8;&#xB4C8;</a>&#xC5D0;&#xC11C; &#xC774; &#xCEE8;&#xD14D;&#xC2A4;&#xD2B8; &#xAC1D;&#xCCB4;&#xAC00; &#xC800;&#xC7A5;&#xC18C; &#xC778;&#xC2A4;&#xD134;&#xC2A4; &#xC790;&#xCCB4;&#xAC00; &#xC544;&#xB2CC; &#xC774;&#xC720;&#xB97C; &#xC54C; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
 
+<p>&#xC2E4;&#xC81C;&#xB85C; (&#xD2B9;&#xD788; <code>commit</code>&#xB97C; &#xC5EC;&#xB7EC; &#xBC88; &#xD638;&#xCD9C;&#xD574;&#xC57C;&#xD558;&#xB294; &#xACBD;&#xC6B0;)&#xCF54;&#xB4DC;&#xB97C; &#xB2E8;&#xC21C;&#xD654;&#xD558;&#xAE30; &#xC704;&#xD574; ES2015 <a href="https://github.com/lukehoban/es6features#destructuring" target="_blank">&#xC804;&#xB2EC;&#xC778;&#xC790; &#xBD84;&#xD574;</a>&#xB97C; &#xC0AC;&#xC6A9;&#xD569;&#xB2C8;&#xB2E4;.</p>
 
+<pre class="language-"><code class="lang-js">actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  increment <span class="token punctuation">(</span><span class="token punctuation">{</span> commit <span class="token punctuation">}</span><span class="token punctuation">)</span> <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>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<h3 id="&#xB514;&#xC2A4;&#xD328;&#xCE58;-&#xC561;&#xC158;">&#xB514;&#xC2A4;&#xD328;&#xCE58; &#xC561;&#xC158;</h3>
 
+<p>&#xC561;&#xC158;&#xC740; <code>store.dispatch</code> &#xBA54;&#xC18C;&#xB4DC;&#xB85C; &#xC2DC;&#xC791;&#xB429;&#xB2C8;&#xB2E4;.</p>
 
+<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;increment&apos;</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>&#xCC98;&#xC74C; &#xBCFC; &#xB54C;&#xB294; &#xC774;&#xC0C1;&#xD574; &#xBCF4;&#xC77C; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;. &#xCE74;&#xC6B4;&#xD2B8;&#xB97C; &#xC99D;&#xAC00; &#xC2DC;&#xD0A4;&#xB824;&#xBA74; <code>store.commit(&apos;increment&apos;)</code>&#xB97C; &#xC9C1;&#xC811; &#xD638;&#xCD9C;&#xD558;&#xBA74; &#xC5B4;&#xB5BB;&#xC2B5;&#xB2C8;&#xAE4C;? &#xC74C;, <strong>&#xB3CC;&#xC5F0;&#xBCC0;&#xC774;&#xB294; &#xB3D9;&#xAE30;&#xC801;</strong> &#xC774;&#xC5B4;&#xC57C; &#xD55C;&#xB2E4;&#xB294; &#xAC83;&#xC744; &#xAE30;&#xC5B5;&#xD558;&#xC2ED;&#xB2C8;&#xAE4C;? &#xC561;&#xC158;&#xC740; &#xADF8;&#xB807;&#xC9C0; &#xC54A;&#xC2B5;&#xB2C8;&#xB2E4;. &#xC561;&#xC158; &#xB0B4;&#xC5D0;&#xC11C; <strong>&#xBE44;&#xB3D9;&#xAE30;</strong> &#xC791;&#xC5C5;&#xC744; &#xC218;&#xD589; &#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
 
+<pre class="language-"><code class="lang-js">actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  incrementAsync <span class="token punctuation">(</span><span class="token punctuation">{</span> commit <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <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>
 
+    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>&#xC561;&#xC158;&#xC740; &#xB3D9;&#xC77C;&#xD55C; &#xD398;&#xC774;&#xB85C;&#xB4DC; &#xD0C0;&#xC785;&#xACFC; &#xAC1D;&#xCCB4; &#xC2A4;&#xD0C0;&#xC77C;&#xC758; &#xB514;&#xC2A4;&#xD328;&#xCE58;&#xB97C; &#xC9C0;&#xC6D0;&#xD569;&#xB2C8;&#xB2E4;.</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// &#xD398;&#xC774;&#xB85C;&#xB4DC;&#xC640; &#xD568;&#xAED8; &#xB514;&#xC2A4;&#xD328;&#xCE58;</span>
 
+store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;incrementAsync&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
 
+  amount<span class="token punctuation">:</span> <span class="token number">10</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+
 
+<span class="token comment" spellcheck="true">// &#xAC1D;&#xCCB4;&#xC640; &#xD568;&#xAED8; &#xB514;&#xC2A4;&#xD328;&#xCE58;</span>
 
+store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+  type<span class="token punctuation">:</span> <span class="token string">&apos;incrementAsync&apos;</span><span class="token punctuation">,</span>
 
+  amount<span class="token punctuation">:</span> <span class="token number">10</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>&#xC561;&#xC158;&#xC758; &#xC880; &#xB354; &#xC2E4;&#xC6A9;&#xC801;&#xC778; &#xC608;&#xB294; <strong>&#xBE44;&#xB3D9;&#xAE30; API &#xD638;&#xCD9C;</strong> &#xACFC; <strong>&#xC5EC;&#xB7EC; &#xAC1C;&#xC758; &#xBCC0;&#xC774;&#xB97C; &#xCEE4;&#xBC0B;</strong> &#xD558;&#xB294; &#xC7A5;&#xBC14;&#xAD6C;&#xB2C8; &#xACB0;&#xC81C;&#xC785;&#xB2C8;&#xB2E4;.</p>
 
+<pre class="language-"><code class="lang-js">actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  checkout <span class="token punctuation">(</span><span class="token punctuation">{</span> commit<span class="token punctuation">,</span> state <span class="token punctuation">}</span><span class="token punctuation">,</span> products<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// &#xC7A5;&#xBC14;&#xAD6C;&#xB2C8;&#xC5D0; &#xD604;&#xC7AC;&#xC788;&#xB294; &#xD56D;&#xBAA9;&#xC744; &#xC800;&#xC7A5;&#xD558;&#xC2ED;&#xC2DC;&#xC624;.</span>
 
+    <span class="token keyword">const</span> savedCartItems <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>state<span class="token punctuation">.</span>cart<span class="token punctuation">.</span>added<span class="token punctuation">]</span>
 
+
 
+    <span class="token comment" spellcheck="true">// &#xACB0;&#xC81C; &#xC694;&#xCCAD;&#xC744; &#xBCF4;&#xB0B8; &#xD6C4; &#xC7A5;&#xBC14;&#xAD6C;&#xB2C8;&#xB97C; &#xBE44;&#xC6C1;&#xB2C8;&#xB2E4;.</span>
 
+    <span class="token function">commit</span><span class="token punctuation">(</span>types<span class="token punctuation">.</span>CHECKOUT_REQUEST<span class="token punctuation">)</span>
 
+
 
+    <span class="token comment" spellcheck="true">// &#xC0C1;&#xC810; API&#xB294; &#xC131;&#xACF5; &#xCF5C;&#xBC31; &#xBC0F; &#xC2E4;&#xD328; &#xCF5C;&#xBC31;&#xC744; &#xBC1B;&#xC2B5;&#xB2C8;&#xB2E4;.</span>
 
+    shop<span class="token punctuation">.</span><span class="token function">buyProducts</span><span class="token punctuation">(</span>
 
+      products<span class="token punctuation">,</span>
 
+      <span class="token comment" spellcheck="true">// &#xC694;&#xCCAD; &#xC131;&#xACF5; &#xD578;&#xB4E4;&#xB7EC;</span>
 
+      <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token function">commit</span><span class="token punctuation">(</span>types<span class="token punctuation">.</span>CHECKOUT_SUCCESS<span class="token punctuation">)</span><span class="token punctuation">,</span>
 
+      <span class="token comment" spellcheck="true">// &#xC694;&#xCCAD; &#xC2E4;&#xD328; &#xD578;&#xB4E4;&#xB7EC;</span>
 
+      <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token function">commit</span><span class="token punctuation">(</span>types<span class="token punctuation">.</span>CHECKOUT_FAILURE<span class="token punctuation">,</span> savedCartItems<span class="token punctuation">)</span>
 
+    <span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>&#xBE44;&#xB3D9;&#xAE30; &#xC791;&#xC5C5;&#xC758; &#xD750;&#xB984;&#xC744; &#xC218;&#xD589;&#xD558;&#xACE0; &#xCEE4;&#xBC0B;&#xD558;&#xC5EC; &#xC791;&#xC5C5;&#xC758; &#xC0AC;&#xC774;&#xB4DC;&#xC774;&#xD399;&#xD2B8;(&#xC0C1;&#xD0DC; &#xBCC0;&#xC774;)&#xC744; &#xAE30;&#xB85D;&#xD569;&#xB2C8;&#xB2E4;.</p>
 
+<h3 id="&#xCEF4;&#xD3EC;&#xB10C;&#xD2B8;-&#xB0B4;&#xBD80;&#xC5D0;&#xC11C;-&#xB514;&#xC2A4;&#xD328;&#xCE58;-&#xC561;&#xC158;-&#xC0AC;&#xC6A9;&#xD558;&#xAE30;">&#xCEF4;&#xD3EC;&#xB10C;&#xD2B8; &#xB0B4;&#xBD80;&#xC5D0;&#xC11C; &#xB514;&#xC2A4;&#xD328;&#xCE58; &#xC561;&#xC158; &#xC0AC;&#xC6A9;&#xD558;&#xAE30;</h3>
 
+<p><code>this.$store.dispatch(&apos;xxx&apos;)</code>&#xB97C; &#xC0AC;&#xC6A9;&#xD558;&#xC5EC; &#xCEF4;&#xD3EC;&#xB10C;&#xD2B8;&#xC5D0;&#xC11C; &#xC561;&#xC158;&#xC744; &#xB514;&#xC2A4;&#xD328;&#xCE58;&#xD558;&#xAC70;&#xB098; &#xCEF4;&#xD3EC;&#xB10C;&#xD2B8; &#xBA54;&#xC18C;&#xB4DC;&#xB97C; <code>store.dispatch</code> &#xD638;&#xCD9C;&#xC5D0; &#xB9E4;&#xD551;&#xD558;&#xB294; <code>mapActions</code> &#xD5EC;&#xD37C;&#xB97C; &#xC0AC;&#xC6A9;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4; (&#xB8E8;&#xD2B8; <code>store</code> &#xC8FC;&#xC785; &#xD544;&#xC694;) :</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> mapActions <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>
 
+  methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
 
+      <span class="token string">&apos;increment&apos;</span> <span class="token comment" spellcheck="true">// this.increment()&#xC744; this.$store.dispatch(&apos;increment&apos;)&#xC5D0; &#xB9E4;&#xD551;</span>
 
+    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
 
+    <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+      add<span class="token punctuation">:</span> <span class="token string">&apos;increment&apos;</span> <span class="token comment" spellcheck="true">// this.add()&#xC744; this.$store.dispatch(&apos;increment&apos;)&#xC5D0; &#xB9E4;&#xD551;</span>
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<h3 id="&#xC561;&#xC158;-&#xAD6C;&#xC131;&#xD558;&#xAE30;">&#xC561;&#xC158; &#xAD6C;&#xC131;&#xD558;&#xAE30;</h3>
 
+<p>&#xC561;&#xC158;&#xC740; &#xC885;&#xC885; &#xBE44;&#xB3D9;&#xAE30;&#xC801; &#xC785;&#xB2C8;&#xB2E4;. &#xADF8;&#xB7EC;&#xBA74; &#xC561;&#xC158;&#xC774; &#xC5B8;&#xC81C; &#xC644;&#xB8CC;&#xB418;&#xB294;&#xC9C0; &#xC5B4;&#xB5BB;&#xAC8C; &#xC54C; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xAE4C;? &#xB354; &#xC911;&#xC694;&#xD55C; &#xAC83;&#xC740;, &#xBCF5;&#xC7A1;&#xD55C; &#xBE44;&#xB3D9;&#xAE30; &#xD750;&#xB984;&#xC744; &#xCC98;&#xB9AC;&#xD558;&#xAE30; &#xC704;&#xD574; &#xC5B4;&#xB5BB;&#xAC8C; &#xC5EC;&#xB7EC; &#xC791;&#xC5C5;&#xC744; &#xD568;&#xAED8; &#xAD6C;&#xC131; &#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xAE4C;?</p>
 
+<p>&#xAC00;&#xC7A5; &#xBA3C;&#xC800; &#xC54C;&#xC544;&#xC57C; &#xD560; &#xC810;&#xC740; <code>store.dispatch</code>&#xAC00; &#xD2B8;&#xB9AC;&#xAC70; &#xB41C; &#xC561;&#xC158; &#xD578;&#xB4E4;&#xB7EC;&#xC5D0; &#xC758;&#xD574; &#xBC18;&#xD658;&#xB41C; Promise&#xB97C; &#xCC98;&#xB9AC; &#xD560; &#xC218; &#xC788;&#xC73C;&#xBA70; Promise&#xB97C; &#xBC18;&#xD658;&#xD55C;&#xB2E4;&#xB294; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;.</p>
 
+<pre class="language-"><code class="lang-js">actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  actionA <span class="token punctuation">(</span><span class="token punctuation">{</span> commit <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">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> reject<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+        <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;someMutation&apos;</span><span class="token punctuation">)</span>
 
+        <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
 
+      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>&#xC774;&#xB807;&#xAC8C; &#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
 
+<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;actionA&apos;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>&#xADF8;&#xB9AC;&#xACE0; &#xC548;&#xC5D0; &#xB610; &#xB2E4;&#xB978; &#xC561;&#xC158;&#xC744; &#xC0AC;&#xC6A9;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
 
+<pre class="language-"><code class="lang-js">actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  actionB <span class="token punctuation">(</span><span class="token punctuation">{</span> dispatch<span class="token punctuation">,</span> commit <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">return</span> <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;actionA&apos;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+      <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;someOtherMutation&apos;</span><span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>&#xB9C8;&#xC9C0;&#xB9C9;&#xC73C;&#xB85C;, JavaScript &#xAE30;&#xB2A5;&#xC778; <a href="https://tc39.github.io/ecmascript-asyncawait/" target="_blank">async/await</a>&#xB97C; &#xC0AC;&#xC6A9;&#xD558;&#xBA74; &#xB2E4;&#xC74C;&#xACFC; &#xAC19;&#xC740; &#xC791;&#xC5C5;&#xC744; &#xAD6C;&#xC131; &#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// getData() &#xBC0F; getOtherData()&#xAC00; Promise&#xB97C; &#xBC18;&#xD658;&#xD55C;&#xB2E4;&#xACE0; &#xAC00;&#xC815;&#xD569;&#xB2C8;&#xB2E4;.</span>
 
+actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token keyword">async</span> actionA <span class="token punctuation">(</span><span class="token punctuation">{</span> commit <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;gotData&apos;</span><span class="token punctuation">,</span> <span class="token keyword">await</span> <span class="token function">getData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  <span class="token keyword">async</span> actionB <span class="token punctuation">(</span><span class="token punctuation">{</span> dispatch<span class="token punctuation">,</span> commit <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">await</span> <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&apos;actionA&apos;</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// actionA&#xAC00; &#xB05D;&#xB098;&#xAE30;&#xB97C; &#xAE30;&#xB2E4;&#xB9BD;&#xB2C8;&#xB2E4;.</span>
 
+    <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;gotOtherData&apos;</span><span class="token punctuation">,</span> <span class="token keyword">await</span> <span class="token function">getOtherData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<blockquote>
 
+<p><code>store.dispatch</code>&#xAC00; &#xB2E4;&#xB978; &#xBAA8;&#xB4C8;&#xC5D0;&#xC11C; &#xC5EC;&#xB7EC; &#xC561;&#xC158; &#xD578;&#xB4E4;&#xB7EC;&#xB97C; &#xD2B8;&#xB9AC;&#xAC70;&#xD558;&#xB294; &#xAC83;&#xC774; &#xAC00;&#xB2A5;&#xD569;&#xB2C8;&#xB2E4;. &#xC774; &#xACBD;&#xC6B0; &#xBC18;&#xD658; &#xB41C; &#xAC12;&#xC740; &#xBAA8;&#xB4E0; &#xD2B8;&#xB9AC;&#xAC70; &#xB41C; &#xCC98;&#xB9AC;&#xAE30;&#xAC00; &#xC644;&#xB8CC; &#xB418;&#xC5C8;&#xC744; &#xB54C; &#xCC98;&#xB9AC;&#xB418;&#xB294; Promise&#xC785;&#xB2C8;&#xB2E4;.</p>
 
+</blockquote>
 
+
 
+                                
+                                </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="mutations.html" class="navigation navigation-prev " aria-label="Previous page: 변이">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="modules.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.7.4","depth":2,"next":{"title":"모듈","level":"1.7.5","depth":2,"path":"modules.md","ref":"modules.md","articles":[]},"previous":{"title":"변이","level":"1.7.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":{"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":"kr","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"actions.md","mtime":"2018-04-20T00:44:03.869Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"kr"}});
 
+        });
 
+    </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>
 
+

+ 650 - 0
kr/api.html
View File 

@@ -0,0 +1,650 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="kr" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>API 레퍼런스 · 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="prev" href="hot-reload.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/tree/1.0/docs">
 
+            
+                    
+                    1.0 버전 문서를 보려면?
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.3" >
 
+            
+                <a target="_blank" href="https://github.com/vuejs/vuex/releases">
 
+            
+                    
+                    릴리즈 노트
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.4" data-path="installation.html">
 
+            
+                <a href="installation.html">
 
+            
+                    
+                    설치
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.5" data-path="intro.html">
 
+            
+                <a href="intro.html">
 
+            
+                    
+                    Vuex가 무엇인가요?
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6" data-path="getting-started.html">
 
+            
+                <a href="getting-started.html">
 
+            
+                    
+                    시작하기
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.7" >
 
+            
+                <span>
 
+            
+                    
+                    핵심 컨셉
 
+            
+                </span>
 
+            
+
 
+            
+            <ul class="articles">
 
+                
+    
+        <li class="chapter " data-level="1.7.1" data-path="state.html">
 
+            
+                <a href="state.html">
 
+            
+                    
+                    상태
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.7.2" data-path="getters.html">
 
+            
+                <a href="getters.html">
 
+            
+                    
+                    Getters
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.7.3" data-path="mutations.html">
 
+            
+                <a href="mutations.html">
 
+            
+                    
+                    변이
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.7.4" data-path="actions.html">
 
+            
+                <a href="actions.html">
 
+            
+                    
+                    액션
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.7.5" data-path="modules.html">
 
+            
+                <a href="modules.html">
 
+            
+                    
+                    모듈
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+
 
+            </ul>
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.8" data-path="structure.html">
 
+            
+                <a href="structure.html">
 
+            
+                    
+                    애플리케이션 구조
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.9" data-path="plugins.html">
 
+            
+                <a href="plugins.html">
 
+            
+                    
+                    플러그인
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.10" data-path="strict.html">
 
+            
+                <a href="strict.html">
 
+            
+                    
+                    Strict 모드
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.11" data-path="forms.html">
 
+            
+                <a href="forms.html">
 
+            
+                    
+                    폼 핸들링
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.12" data-path="testing.html">
 
+            
+                <a href="testing.html">
 
+            
+                    
+                    테스팅
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.13" data-path="hot-reload.html">
 
+            
+                <a href="hot-reload.html">
 
+            
+                    
+                    핫 리로딩
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter active" data-level="1.14" 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">
 
+            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="." >API 레퍼런스</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="api-&#xB808;&#xD37C;&#xB7F0;&#xC2A4;">API &#xB808;&#xD37C;&#xB7F0;&#xC2A4;</h1>
 
+<h3 id="vuexstore">Vuex.Store</h3>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">import</span> Vuex <span class="token keyword">from</span> <span class="token string">&apos;vuex&apos;</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> <span class="token operator">...</span>options <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<h3 id="vuexstore-&#xC0DD;&#xC131;&#xC790;-&#xC635;&#xC158;">Vuex.Store &#xC0DD;&#xC131;&#xC790; &#xC635;&#xC158;</h3>
 
+<ul>
 
+<li><p><strong>state</strong></p>
 
+<ul>
 
+<li><p>&#xC790;&#xB8CC;&#xD615;: <code>Object</code></p>
 
+<p>Vuex &#xC800;&#xC7A5;&#xC18C;&#xC758; &#xB8E8;&#xD2B8; &#xC0C1;&#xD0DC; &#xAC1D;&#xCCB4; &#xC785;&#xB2C8;&#xB2E4;.</p>
 
+<p><a href="state.html">&#xC0C1;&#xC138;</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>mutations</strong></p>
 
+<ul>
 
+<li><p>&#xC790;&#xB8CC;&#xD615;: <code>{ [type: string]: Function }</code></p>
 
+<p>&#xC800;&#xC7A5;&#xC18C;&#xC5D0; &#xBCC0;&#xC774;&#xB97C; &#xB4F1;&#xB85D;&#xD558;&#xC2ED;&#xC2DC;&#xC624;. &#xD578;&#xB4E4;&#xB7EC; &#xD568;&#xC218;&#xB294; &#xD56D;&#xC0C1; &#xCCAB; &#xBC88;&#xC9F8; &#xC804;&#xB2EC;&#xC778;&#xC790;&#xB85C; <code>state</code>&#xB97C; &#xBC1B;&#xC2B5;&#xB2C8;&#xB2E4; (&#xBAA8;&#xB4C8;&#xC5D0; &#xC815;&#xC758; &#xB41C; &#xACBD;&#xC6B0; &#xBAA8;&#xB4C8; &#xB85C;&#xCEEC; &#xC0C1;&#xD0DC;&#xAC00;&#xB429;&#xB2C8;&#xB2E4;). &#xB450; &#xBC88;&#xC9F8; <code>payload</code> &#xC804;&#xB2EC;&#xC778;&#xC790;&#xAC00; &#xC788;&#xC73C;&#xBA74; &#xCC98;&#xB9AC;&#xD569;&#xB2C8;&#xB2E4;.</p>
 
+<p><a href="mutations.html">&#xC0C1;&#xC138;</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>actions</strong></p>
 
+<ul>
 
+<li><p>&#xC790;&#xB8CC;&#xD615;: <code>{ [type: string]: Function }</code></p>
 
+<p>&#xC800;&#xC7A5;&#xC18C;&#xC5D0; &#xC561;&#xC158;&#xC744; &#xB4F1;&#xB85D;&#xD558;&#xC2ED;&#xC2DC;&#xC624;. &#xD578;&#xB4E4;&#xB7EC; &#xD568;&#xC218;&#xB294; &#xB2E4;&#xC74C; &#xC18D;&#xC131;&#xC744; &#xB178;&#xCD9C;&#xD558;&#xB294; <code>context</code> &#xAC1D;&#xCCB4;&#xB97C;&#xBC1B;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
 
+<pre class="language-"><code class="lang-js"><span class="token punctuation">{</span>
 
+  state<span class="token punctuation">,</span>     <span class="token comment" spellcheck="true">// store.state&#xC640; &#xAC19;&#xC2B5;&#xB2C8;&#xB2E4;. &#xB610;&#xB294; &#xBAA8;&#xB4C8;&#xC5D0; &#xC788;&#xB294; &#xACBD;&#xC6B0; &#xB85C;&#xCEEC; &#xC0C1;&#xD0DC;</span>
 
+  rootState<span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// store.state&#xC640; &#xAC19;&#xC2B5;&#xB2C8;&#xB2E4;. &#xBAA8;&#xB4C8; &#xC548;&#xC5D0;&#xB9CC; &#xC874;&#xC7AC;&#xD569;&#xB2C8;&#xB2E4;</span>
 
+  commit<span class="token punctuation">,</span>    <span class="token comment" spellcheck="true">// store.commit&#xC640; &#xAC19;&#xC2B5;&#xB2C8;&#xB2E4;.</span>
 
+  dispatch<span class="token punctuation">,</span>  <span class="token comment" spellcheck="true">// store.dispatch&#xC640; &#xAC19;&#xC2B5;&#xB2C8;&#xB2E4;.</span>
 
+  getters    <span class="token comment" spellcheck="true">// store.getters&#xC640; &#xAC19;&#xC2B5;&#xB2C8;&#xB2E4;.</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p><a href="actions.html">&#xC0C1;&#xC138;</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>getters</strong></p>
 
+<ul>
 
+<li><p>&#xC790;&#xB8CC;&#xD615;: <code>{ [key: string]: Function }</code></p>
 
+<p>&#xC800;&#xC7A5;&#xC18C;&#xC5D0; getter&#xB97C; &#xB4F1;&#xB85D;&#xD558;&#xC2ED;&#xC2DC;&#xC624;. getter &#xD568;&#xC218;&#xB294; &#xB2E4;&#xC74C; &#xC804;&#xB2EC;&#xC778;&#xC790;&#xB97C; &#xBC1B;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
 
+<pre class="language-"><code>state,     // &#xBAA8;&#xB4C8;&#xC5D0; &#xC815;&#xC758; &#xB41C; &#xACBD;&#xC6B0; &#xBAA8;&#xB4C8; &#xB85C;&#xCEEC; &#xC0C1;&#xD0DC;&#xAC00;&#xB429;&#xB2C8;&#xB2E4;.
 
+getters,   // store.getters&#xC640; &#xAC19;&#xC2B5;&#xB2C8;&#xB2E4;.
 
+rootState  // store.state&#xC640; &#xAC19;&#xC2B5;&#xB2C8;&#xB2E4;.
 
+</code></pre><p>&#xB4F1;&#xB85D;&#xB41C; getter&#xB294; <code>store.getters</code>&#xC5D0; &#xB178;&#xCD9C;&#xB429;&#xB2C8;&#xB2E4;.</p>
 
+<p><a href="getters.html">&#xC0C1;&#xC138;</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>modules</strong></p>
 
+<ul>
 
+<li><p>&#xC790;&#xB8CC;&#xD615;: <code>Object</code></p>
 
+<p>&#xC800;&#xC7A5;&#xC18C;&#xC5D0; &#xBCD1;&#xD569;&#xB420; &#xD558;&#xC704; &#xBAA8;&#xB4C8;&#xC744; &#xD3EC;&#xD568;&#xD558;&#xB294; &#xAC1D;&#xCCB4; &#xC785;&#xB2C8;&#xB2E4;.</p>
 
+<pre class="language-"><code class="lang-js"><span class="token punctuation">{</span>
 
+  key<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    state<span class="token punctuation">,</span>
 
+    mutations<span class="token punctuation">,</span>
 
+    actions<span class="token operator">?</span><span class="token punctuation">,</span>
 
+    getters<span class="token operator">?</span><span class="token punctuation">,</span>
 
+    modules<span class="token operator">?</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  <span class="token operator">...</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>&#xAC01; &#xBAA8;&#xB4C8;&#xC740; &#xB8E8;&#xD2B8; &#xC635;&#xC158;&#xACFC; &#xBE44;&#xC2B7;&#xD55C; <code>state</code> &#xC640; <code>mutations</code> &#xB97C; &#xD3EC;&#xD568; &#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;. &#xBAA8;&#xB4C8;&#xC758; &#xC0C1;&#xD0DC;&#xB294; &#xBAA8;&#xB4C8;&#xC758; &#xD0A4;&#xB97C; &#xC0AC;&#xC6A9;&#xD558;&#xC5EC; &#xC800;&#xC7A5;&#xC18C;&#xC758; &#xB8E8;&#xD2B8; &#xC0C1;&#xD0DC;&#xC5D0; &#xC5F0;&#xACB0;&#xB429;&#xB2C8;&#xB2E4;. &#xBAA8;&#xB4C8;&#xC758; &#xBCC0;&#xC774;&#xC640; getter&#xB294; &#xBAA8;&#xB4C8;&#xC758; &#xB85C;&#xCEEC; &#xC0C1;&#xD0DC;&#xB97C; &#xB8E8;&#xD2B8; &#xC0C1;&#xD0DC; &#xB300;&#xC2E0; &#xCCAB; &#xBC88;&#xC9F8; &#xC804;&#xB2EC;&#xC778;&#xC790;&#xB85C; &#xBC1B;&#xC73C;&#xBA70; &#xBAA8;&#xB4C8; &#xC561;&#xC158;&#xC758; <code>context.state</code>&#xB3C4; &#xB85C;&#xCEEC; &#xC0C1;&#xD0DC;&#xB97C; &#xAC00;&#xB9AC; &#xD0B5;&#xB2C8;&#xB2E4;.</p>
 
+<p><a href="modules.html">&#xC0C1;&#xC138;</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>plugins</strong></p>
 
+<ul>
 
+<li><p>&#xC790;&#xB8CC;&#xD615;: <code>Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Function</span><span class="token punctuation">&gt;</span></span></code></p>
 
+<p>&#xC800;&#xC7A5;&#xC18C;&#xC5D0; &#xC801;&#xC6A9; &#xD560; &#xD50C;&#xB7EC;&#xADF8;&#xC778; &#xD568;&#xC218;&#xC758; &#xBC30;&#xC5F4;&#xC785;&#xB2C8;&#xB2E4;. &#xD50C;&#xB7EC;&#xADF8;&#xC778;&#xC740; &#xC800;&#xC7A5;&#xC18C;&#xB97C; &#xC720;&#xC77C;&#xD55C; &#xC804;&#xB2EC;&#xC778;&#xC790;&#xB85C; &#xBC1B;&#xC544;&#xB4E4;&#xC774;&#xACE0; &#xC544;&#xC6C3;&#xBC14;&#xC6B4;&#xB4DC; &#xB370;&#xC774;&#xD130; &#xC9C0;&#xC18D;&#xC131;, &#xB85C;&#xAE45; &#xB610;&#xB294; &#xB514;&#xBC84;&#xAE45;&#xC744; &#xC704;&#xD55C; &#xBCC0;&#xC774;&#xB97C; &#xAC10;&#xC2DC;&#xD558;&#xAC70;&#xB098; (&#xC778;&#xBC14;&#xC6B4;&#xB4DC; &#xB370;&#xC774;&#xD130; (&#xC608;: &#xC6F9; &#xC18C;&#xCF13; &#xB610;&#xB294; &#xAD00;&#xCC30; &#xAC00;&#xB2A5; &#xD56D;&#xBAA9;)&#xC758; &#xB514;&#xC2A4;&#xD328;&#xCE58; &#xBCC0;&#xC774;) &#xAC10;&#xC2DC;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
 
+<p><a href="plugins.html">&#xC0C1;&#xC138;</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>strict</strong></p>
 
+<ul>
 
+<li>&#xC790;&#xB8CC;&#xD615;: <code>Boolean</code></li>
 
+<li><p>&#xAE30;&#xBCF8;&#xAC12;: <code>false</code></p>
 
+<p>Vuex &#xC800;&#xC7A5;&#xC18C;&#xB97C; strict &#xBAA8;&#xB4DC;&#xB85C; &#xBCC0;&#xACBD;&#xD569;&#xB2C8;&#xB2E4;. strict &#xBAA8;&#xB4DC;&#xC5D0;&#xC11C; &#xBCC0;&#xC774; &#xD578;&#xB4E4;&#xB7EC; &#xC678;&#xBD80;&#xC758; Vuex &#xC0C1;&#xD0DC;&#xC5D0; &#xB300;&#xD55C; &#xC784;&#xC758;&#xC758; &#xBCC0;&#xC774;&#xB294; &#xC624;&#xB958;&#xB97C; &#xBC1C;&#xC0DD;&#xC2DC;&#xD0B5;&#xB2C8;&#xB2E4;.</p>
 
+<p><a href="strict.html">&#xC0C1;&#xC138;</a></p>
 
+</li>
 
+</ul>
 
+</li>
 
+</ul>
 
+<h3 id="vuexstore-&#xC778;&#xC2A4;&#xD134;&#xC2A4;-&#xC18D;&#xC131;">Vuex.Store &#xC778;&#xC2A4;&#xD134;&#xC2A4; &#xC18D;&#xC131;</h3>
 
+<ul>
 
+<li><p><strong>state</strong></p>
 
+<ul>
 
+<li><p>&#xC790;&#xB8CC;&#xD615;: <code>Object</code></p>
 
+<p>&#xB8E8;&#xD2B8; &#xC0C1;&#xD0DC;. &#xC77D;&#xAE30; &#xC804;&#xC6A9;</p>
 
+</li>
 
+</ul>
 
+</li>
 
+<li><p><strong>getters</strong></p>
 
+<ul>
 
+<li><p>&#xC790;&#xB8CC;&#xD615;: <code>Object</code></p>
 
+<p>&#xB4F1;&#xB85D;&#xB41C; getters &#xC785;&#xB2C8;&#xB2E4;. &#xC77D;&#xAE30; &#xC804;&#xC6A9;.</p>
 
+</li>
 
+</ul>
 
+</li>
 
+</ul>
 
+<h3 id="vuexstore-&#xC778;&#xC2A4;&#xD134;&#xC2A4;-&#xBA54;&#xC18C;&#xB4DC;">Vuex.Store &#xC778;&#xC2A4;&#xD134;&#xC2A4; &#xBA54;&#xC18C;&#xB4DC;</h3>
 
+<ul>
 
+<li><p><strong><code>commit(type: string, payload?: any) | commit(mutation: Object)</code></strong></p>
 
+<p>&#xBCC0;&#xC774;&#xB97C; &#xCEE4;&#xBC0B;&#xD569;&#xB2C8;&#xB2E4;. <a href="mutations.html">&#xC0C1;&#xC138;</a></p>
 
+</li>
 
+<li><p><strong><code>dispatch(type: string, payload?: any) | dispatch(action: Object)</code></strong></p>
 
+<p>&#xC561;&#xC158;&#xC744; &#xB514;&#xC2A4;&#xD328;&#xCE58; &#xD569;&#xB2C8;&#xB2E4;. &#xBAA8;&#xB4E0; &#xD2B8;&#xB9AC;&#xAC70;&#xB41C; &#xC561;&#xC158; &#xD578;&#xB4E4;&#xB7EC;&#xB97C; &#xCC98;&#xB9AC;&#xD558;&#xB294; Promise&#xB97C; &#xBC18;&#xD658;&#xD569;&#xB2C8;&#xB2E4;. <a href="actions.html">&#xC0C1;&#xC138;</a></p>
 
+</li>
 
+<li><p><strong><code>replaceState(state: Object)</code></strong></p>
 
+<p>&#xC800;&#xC7A5;&#xC18C;&#xC758; &#xB8E8;&#xD2B8; &#xC0C1;&#xD0DC;&#xB97C; &#xBC14;&#xAFC9;&#xB2C8;&#xB2E4;. &#xC0C1;&#xD0DC;&#xC5D0; &#xB300;&#xD55C; &#xC0C1;&#xD638;&#xC791;&#xC6A9;/&#xC2DC;&#xC810; &#xBCC0;&#xACBD; &#xBAA9;&#xC801;&#xC73C;&#xB85C; &#xB9CC; &#xC0AC;&#xC6A9;&#xD558;&#xC2ED;&#xC2DC;&#xC624;.</p>
 
+</li>
 
+<li><p><strong><code>watch(getter: Function, cb: Function, options?: Object)</code></strong></p>
 
+<p>getter &#xD568;&#xC218;&#xC758; &#xBC18;&#xD658; &#xAC12;&#xC744; &#xBC18;&#xC751;&#xC801;&#xC73C;&#xB85C; &#xC9C0;&#xCF1C;&#xBCF4;&#xACE0; &#xAC12;&#xC774; &#xBCC0;&#xACBD;&#xB418;&#xBA74; &#xCF5C;&#xBC31;&#xC744; &#xD638;&#xCD9C;&#xD569;&#xB2C8;&#xB2E4;. getter&#xB294; &#xC800;&#xC7A5;&#xC18C;&#xC758; &#xC0C1;&#xD0DC;&#xB97C; &#xC720;&#xC77C;&#xD55C; &#xC778;&#xC218;&#xB85C;&#xBC1B;&#xC2B5;&#xB2C8;&#xB2E4;. Vue&#xC758; <code>vm.$watch</code> &#xBA54;&#xC18C;&#xB4DC;&#xC640; &#xAC19;&#xC740; &#xC635;&#xC158;&#xC744; &#xCDE8;&#xD558;&#xB294; &#xC635;&#xC158; &#xAC1D;&#xCCB4;&#xB97C; &#xBC1B;&#xC544;&#xB4E4;&#xC785;&#xB2C8;&#xB2E4;.</p>
 
+<p>&#xAC10;&#xC2DC;&#xB97C; &#xC911;&#xB2E8;&#xD558;&#xB824;&#xBA74; &#xBC18;&#xD658;&#xB41C; &#xD578;&#xB4E4; &#xD568;&#xC218;&#xB97C; &#xD638;&#xCD9C;&#xD558;&#xC2ED;&#xC2DC;&#xC624;.</p>
 
+</li>
 
+<li><p><strong><code>subscribe(handler: Function)</code></strong></p>
 
+<p>&#xC800;&#xC7A5;&#xC18C; &#xBCC0;&#xC774;&#xB97C; &#xAD6C;&#xB3C5;&#xD569;&#xB2C8;&#xB2E4;. <code>handler</code>&#xB294; &#xBAA8;&#xB4E0; &#xBCC0;&#xC774; &#xC774;&#xD6C4; &#xD638;&#xCD9C;&#xB418;&#xACE0; &#xBCC0;&#xC774; &#xB514;&#xC2A4;&#xD06C;&#xB9BD;&#xD130;&#xC640; &#xBCC0;&#xC774; &#xC0C1;&#xD0DC;&#xB97C; &#xC804;&#xB2EC;&#xC778;&#xC790;&#xB85C; &#xBC1B;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
 
+<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span>mutation<span class="token punctuation">,</span> state<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>mutation<span class="token punctuation">.</span>type<span class="token punctuation">)</span>
 
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>mutation<span class="token punctuation">.</span>payload<span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>&#xD50C;&#xB7EC;&#xADF8;&#xC778;&#xC5D0;&#xC11C; &#xAC00;&#xC7A5; &#xC77C;&#xBC18;&#xC801;&#xC73C;&#xB85C; &#xC0AC;&#xC6A9;&#xB429;&#xB2C8;&#xB2E4;. <a href="plugins.html">&#xC0C1;&#xC138;</a></p>
 
+</li>
 
+<li><p><strong><code>registerModule(path: string | Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span><span class="token punctuation">&gt;</span></span>, module: Module, options?: Object)</code></strong></p>
 
+<p>&#xB3D9;&#xC801; &#xBAA8;&#xB4C8;&#xC744; &#xB4F1;&#xB85D;&#xD569;&#xB2C8;&#xB2E4;. <a href="modules.html#dynamic-module-registration">&#xC0C1;&#xC138;</a></p>
 
+<p><code>options</code>&#xC740; &#xC774;&#xC804; &#xC18D;&#xC131;&#xC744; &#xBCF4;&#xD638;&#xD558;&#xB294; <code>preserveState: true</code>&#xB97C; &#xAC00;&#xC9C8; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;. &#xC774;&#xAC83;&#xC740; &#xC11C;&#xBC84;&#xC0AC;&#xC774;&#xB4DC; &#xB80C;&#xB354;&#xB9C1;&#xC5D0;&#xC11C; &#xC720;&#xC6A9;&#xD569;&#xB2C8;&#xB2E4;.</p>
 
+</li>
 
+<li><p><strong><code>unregisterModule(path: string | Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span><span class="token punctuation">&gt;</span></span>)</code></strong></p>
 
+<p>&#xB3D9;&#xC801; &#xBAA8;&#xB4C8;&#xC744; &#xD574;&#xC81C; &#xD569;&#xB2C8;&#xB2E4;. <a href="modules.html#dynamic-module-registration">&#xC0C1;&#xC138;</a></p>
 
+</li>
 
+<li><p><strong><code>hotUpdate(newOptions: Object)</code></strong></p>
 
+<p>&#xC0C8; &#xC561;&#xC158;&#xACFC; &#xBCC0;&#xC774;&#xB97C; &#xD56B; &#xC2A4;&#xC651; &#xD569;&#xB2C8;&#xB2E4;. <a href="hot-reload.html">&#xC0C1;&#xC138;</a></p>
 
+</li>
 
+</ul>
 
+<h3 id="&#xCEF4;&#xD3EC;&#xB10C;&#xD2B8;-&#xBC14;&#xC778;&#xB529;-&#xD5EC;&#xD37C;">&#xCEF4;&#xD3EC;&#xB10C;&#xD2B8; &#xBC14;&#xC778;&#xB529; &#xD5EC;&#xD37C;</h3>
 
+<ul>
 
+<li><p><strong><code>mapState(namespace?: string, map: Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span><span class="token punctuation">&gt;</span></span> | Object): Object</code></strong></p>
 
+<p>Vuex &#xC800;&#xC7A5;&#xC18C;&#xC758; &#xD558;&#xC704; &#xD2B8;&#xB9AC;&#xB97C; &#xBC18;&#xD658;&#xD558;&#xB294; &#xCEF4;&#xD3EC;&#xB10C;&#xD2B8; &#xACC4;&#xC0B0; &#xC635;&#xC158;&#xC744; &#xB9CC;&#xB4ED;&#xB2C8;&#xB2E4;. <a href="state.html#the-mapstate-helper">&#xC0C1;&#xC138;</a></p>
 
+<p>&#xCC98;&#xC74C; argument&#xB294; string &#xD0C0;&#xC785;&#xC758; namespace&#xAC00; &#xB420; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;. <a href="modules.html#binding-helpers-with-namespace">&#xC0C1;&#xC138;</a></p>
 
+</li>
 
+<li><p><strong><code>mapGetters(namespace?: string, map: Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span><span class="token punctuation">&gt;</span></span> | Object): Object</code></strong></p>
 
+<p>getter&#xC758; &#xD3C9;&#xAC00;&#xB41C; &#xAC12;&#xC744; &#xBC18;&#xD658;&#xD558;&#xB294; &#xCEF4;&#xD3EC;&#xB10C;&#xD2B8; &#xACC4;&#xC0B0; &#xC635;&#xC158;&#xC744; &#xB9CC;&#xB4ED;&#xB2C8;&#xB2E4;. <a href="getters.html#the-mapgetters-helper">&#xC0C1;&#xC138;</a></p>
 
+<p>&#xCC98;&#xC74C; argument&#xB294; string &#xD0C0;&#xC785;&#xC758; namespace&#xAC00; &#xB420; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;. <a href="modules.html#binding-helpers-with-namespace">&#xC0C1;&#xC138;</a></p>
 
+</li>
 
+<li><p><strong><code>mapActions(namespace?: string, map: Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span><span class="token punctuation">&gt;</span></span> | Object): Object</code></strong></p>
 
+<p>&#xC561;&#xC158;&#xC744; &#xC804;&#xB2EC;&#xD558;&#xB294; &#xCEF4;&#xD3EC;&#xB10C;&#xD2B8; &#xBA54;&#xC18C;&#xB4DC; &#xC635;&#xC158;&#xC744; &#xB9CC;&#xB4ED;&#xB2C8;&#xB2E4;. <a href="actions.html#dispatching-actions-in-components">&#xC0C1;&#xC138;</a></p>
 
+<p>&#xCC98;&#xC74C; argument&#xB294; string &#xD0C0;&#xC785;&#xC758; namespace&#xAC00; &#xB420; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;. <a href="modules.html#binding-helpers-with-namespace">&#xC0C1;&#xC138;</a></p>
 
+</li>
 
+<li><p><strong><code>mapMutations(namespace?: string, map: Array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>string</span><span class="token punctuation">&gt;</span></span> | Object): Object</code></strong></p>
 
+<p>&#xBCC0;&#xC774;&#xB97C; &#xCEE4;&#xBC0B;&#xD558;&#xB294; &#xCEF4;&#xD3EC;&#xB10C;&#xD2B8; &#xBA54;&#xC18C;&#xB4DC; &#xC635;&#xC158;&#xC744; &#xB9CC;&#xB4ED;&#xB2C8;&#xB2E4;. <a href="mutations.html#commiting-mutations-in-components">&#xC0C1;&#xC138;</a></p>
 
+<p>&#xCC98;&#xC74C; argument&#xB294; string &#xD0C0;&#xC785;&#xC758; namespace&#xAC00; &#xB420; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;. <a href="modules.html#binding-helpers-with-namespace">&#xC0C1;&#xC138;</a></p>
 
+</li>
 
+<li><p><strong><code>createNamespacedHelpers(namespace: string): Object</code></strong></p>
 
+<p>namespace&#xAC00; &#xC801;&#xC6A9;&#xB41C; &#xCEF4;&#xD3EC;&#xB10C;&#xD2B8; &#xBC14;&#xC778;&#xB529; helper&#xB97C; &#xB9CC;&#xB4ED;&#xB2C8;&#xB2E4;. &#xC8FC;&#xC5B4;&#xC9C4; namespace&#xAC00; &#xC801;&#xC6A9;&#xB41C; <code>mapState</code>, <code>mapGetters</code>, <code>mapActions</code> <code>mapMutations</code>&#xB4E4;&#xC744; &#xAC00;&#xC9C0;&#xACE0; &#xC788;&#xB294; &#xC624;&#xBE0C;&#xC81D;&#xD2B8;&#xB97C; &#xBC18;&#xD658;&#xD569;&#xB2C8;&#xB2E4;. <a href="modules.html#binding-helpers-with-namespace">&#xC0C1;&#xC138;</a></p>
 
+</li>
 
+</ul>
 
+
 
+                                
+                                </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="hot-reload.html" class="navigation navigation-prev navigation-unique" aria-label="Previous page: 핫 리로딩">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+            
+        
+    </div>
 
+
 
+    <script>
 
+        var gitbook = gitbook || [];
 
+        gitbook.push(function() {
 
+            gitbook.page.hasChanged({"page":{"title":"API 레퍼런스","level":"1.14","depth":1,"previous":{"title":"핫 리로딩","level":"1.13","depth":1,"path":"hot-reload.md","ref":"hot-reload.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":"kr","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"api.md","mtime":"2018-04-20T00:44:03.869Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"kr"}});
 
+        });
 
+    </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>
 
+

+ 536 - 0
kr/forms.html
View File 

@@ -0,0 +1,536 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="kr" >
 
+    <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.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="testing.html" />
 
+    
+    
+    <link rel="prev" href="strict.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/tree/1.0/docs">
 
+            
+                    
+                    1.0 버전 문서를 보려면?
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.3" >
 
+            
+                <a target="_blank" href="https://github.com/vuejs/vuex/releases">
 
+            
+                    
+                    릴리즈 노트
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.4" data-path="installation.html">
 
+            
+                <a href="installation.html">
 
+            
+                    
+                    설치
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.5" data-path="intro.html">
 
+            
+                <a href="intro.html">
 
+            
+                    
+                    Vuex가 무엇인가요?
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6" data-path="getting-started.html">
 
+            
+                <a href="getting-started.html">
 
+            
+                    
+                    시작하기
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.7" >
 
+            
+                <span>
 
+            
+                    
+                    핵심 컨셉
 
+            
+                </span>
 
+            
+
 
+            
+            <ul class="articles">
 
+                
+    
+        <li class="chapter " data-level="1.7.1" data-path="state.html">
 
+            
+                <a href="state.html">
 
+            
+                    
+                    상태
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.7.2" data-path="getters.html">
 
+            
+                <a href="getters.html">
 
+            
+                    
+                    Getters
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.7.3" data-path="mutations.html">
 
+            
+                <a href="mutations.html">
 
+            
+                    
+                    변이
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.7.4" data-path="actions.html">
 
+            
+                <a href="actions.html">
 
+            
+                    
+                    액션
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.7.5" data-path="modules.html">
 
+            
+                <a href="modules.html">
 
+            
+                    
+                    모듈
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+
 
+            </ul>
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.8" data-path="structure.html">
 
+            
+                <a href="structure.html">
 
+            
+                    
+                    애플리케이션 구조
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.9" data-path="plugins.html">
 
+            
+                <a href="plugins.html">
 
+            
+                    
+                    플러그인
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.10" data-path="strict.html">
 
+            
+                <a href="strict.html">
 
+            
+                    
+                    Strict 모드
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter active" data-level="1.11" data-path="forms.html">
 
+            
+                <a href="forms.html">
 
+            
+                    
+                    폼 핸들링
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.12" data-path="testing.html">
 
+            
+                <a href="testing.html">
 
+            
+                    
+                    테스팅
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.13" data-path="hot-reload.html">
 
+            
+                <a href="hot-reload.html">
 
+            
+                    
+                    핫 리로딩
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.14" 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">
 
+            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="." >폼 핸들링</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="&#xD3FC;-&#xD578;&#xB4E4;&#xB9C1;">&#xD3FC; &#xD578;&#xB4E4;&#xB9C1;</h1>
 
+<p>strict &#xBAA8;&#xB4DC;&#xB85C; Vuex&#xB97C; &#xC0AC;&#xC6A9;&#xD558;&#xB294; &#xACBD;&#xC6B0; Vuex&#xC5D0; &#xD3EC;&#xD568;&#xB41C; &#xBD80;&#xBD84;&#xC5D0; <code>v-model</code>&#xC744; &#xC0AC;&#xC6A9;&#xD558;&#xB294; &#xAC83;&#xC740; &#xC57D;&#xAC04; &#xAE4C;&#xB2E4;&#xB85C;&#xC6B8; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
 
+<pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>obj.message<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
 
+</code></pre>
 
+<p><code>obj</code>&#xAC00; &#xC800;&#xC7A5;&#xC18C;&#xC5D0;&#xC11C; &#xAC1D;&#xCCB4;&#xB97C; &#xBC18;&#xD658;&#xD558;&#xB294; &#xACC4;&#xC0B0;&#xB41C; &#xC18D;&#xC131;&#xC774;&#xB77C;&#xBA74;, &#xC5EC;&#xAE30;&#xC5D0;&#xC788;&#xB294; <code>v-model</code>&#xC740; &#xC0AC;&#xC6A9;&#xC790;&#xAC00; &#xC785;&#xB825; &#xD560; &#xB54C; <code>obj.message</code>&#xB97C; &#xC9C1;&#xC811; &#xBCC0;&#xACBD;&#xD558;&#xB824;&#xACE0; &#xD569;&#xB2C8;&#xB2E4;. strict &#xBAA8;&#xB4DC;&#xC5D0;&#xC11C;&#xB294; Vuex &#xBCC0;&#xC774; &#xCC98;&#xB9AC;&#xAE30; &#xB0B4;&#xBD80;&#xC5D0;&#xC11C; &#xBCC0;&#xC774;&#xAC00; &#xC218;&#xD589;&#xB418;&#xC9C0; &#xC54A;&#xC73C;&#xBBC0;&#xB85C; &#xC624;&#xB958;&#xAC00; &#xBC1C;&#xC0DD;&#xD569;&#xB2C8;&#xB2E4;.</p>
 
+<p>&#xADF8;&#xAC83;&#xC744; &#xB2E4;&#xB8E8;&#xB294; &quot;Vuex &#xBC29;&#xC2DD;&quot;&#xC740; <code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span><span class="token punctuation">&gt;</span></span></code>&#xC758; &#xAC12;&#xC744; &#xBC14;&#xC778;&#xB529;&#xD558;&#xACE0; <code>input</code> &#xB610;&#xB294; <code>change</code> &#xC774;&#xBCA4;&#xD2B8;&#xC5D0; &#xB300;&#xD55C; &#xC561;&#xC158;&#xC744; &#xD638;&#xCD9C;&#xD558;&#xB294; &#xAC83; &#xC785;&#xB2C8;&#xB2E4;.</p>
 
+<pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@input</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>updateMessage<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// ...</span>
 
+computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+    message<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> state<span class="token punctuation">.</span>obj<span class="token punctuation">.</span>message
 
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  updateMessage <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;updateMessage&apos;</span><span class="token punctuation">,</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>&#xBCC0;&#xC774;&#xC5D0; &#xB300;&#xD55C; &#xD578;&#xB4E4;&#xB7EC; &#xC785;&#xB2C8;&#xB2E4;.</p>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// ...</span>
 
+mutations<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  updateMessage <span class="token punctuation">(</span>state<span class="token punctuation">,</span> message<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+    state<span class="token punctuation">.</span>obj<span class="token punctuation">.</span>message <span class="token operator">=</span> message
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<h3 id="&#xC591;&#xBC29;&#xD5A5;-&#xACC4;&#xC0B0;&#xB41C;-&#xC18D;&#xC131;">&#xC591;&#xBC29;&#xD5A5; &#xACC4;&#xC0B0;&#xB41C; &#xC18D;&#xC131;</h3>
 
+<p>&#xD2C0;&#xB9BC;&#xC5C6;&#xC774;, &#xC704;&#xC758; &#xB0B4;&#xC6A9;&#xC740; <code>v-model</code> + &#xC9C0;&#xC5ED; &#xC0C1;&#xD0DC;&#xBCF4;&#xB2E4; &#xC880;&#xB354; &#xC7A5;&#xD669; &#xD574;&#xC84C;&#xACE0;, <code>v-model</code>&#xC758; &#xC720;&#xC6A9;&#xD55C; &#xAE30;&#xB2A5; &#xC911; &#xC77C;&#xBD80;&#xB97C; &#xC783;&#xC5B4; &#xBC84;&#xB838;&#xC2B5;&#xB2C8;&#xB2E4;. &#xB2E4;&#xB978; &#xBC29;&#xBC95;&#xC740; setter&#xB97C; &#xC0AC;&#xC6A9;&#xD558;&#xC5EC; &#xC591;&#xBC29;&#xD5A5; &#xACC4;&#xC0B0;&#xB41C; &#xC18D;&#xC131;&#xC744; &#xC0AC;&#xC6A9;&#xD558;&#xB294; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;.</p>
 
+<pre class="language-"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js"><span class="token comment" spellcheck="true">// ...</span>
 
+computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  message<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">get</span> <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>obj<span class="token punctuation">.</span>message
 
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+    <span class="token keyword">set</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
+      <span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&apos;updateMessage&apos;</span><span class="token punctuation">,</span> value<span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+
 
+                                
+                                </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="strict.html" class="navigation navigation-prev " aria-label="Previous page: Strict 모드">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="testing.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.11","depth":1,"next":{"title":"테스팅","level":"1.12","depth":1,"path":"testing.md","ref":"testing.md","articles":[]},"previous":{"title":"Strict 모드","level":"1.10","depth":1,"path":"strict.md","ref":"strict.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":"kr","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"forms.md","mtime":"2018-04-20T00:44:03.870Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"kr"}});
 
+        });
 
+    </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>
 
+

+ 558 - 0
kr/getters.html
View File 

@@ -0,0 +1,558 @@
 
+
 
+<!DOCTYPE HTML>
 
+<html lang="kr" >
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
+        <title>Getters · 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="mutations.html" />
 
+    
+    
+    <link rel="prev" href="state.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/tree/1.0/docs">
 
+            
+                    
+                    1.0 버전 문서를 보려면?
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.3" >
 
+            
+                <a target="_blank" href="https://github.com/vuejs/vuex/releases">
 
+            
+                    
+                    릴리즈 노트
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.4" data-path="installation.html">
 
+            
+                <a href="installation.html">
 
+            
+                    
+                    설치
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.5" data-path="intro.html">
 
+            
+                <a href="intro.html">
 
+            
+                    
+                    Vuex가 무엇인가요?
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.6" data-path="getting-started.html">
 
+            
+                <a href="getting-started.html">
 
+            
+                    
+                    시작하기
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.7" >
 
+            
+                <span>
 
+            
+                    
+                    핵심 컨셉
 
+            
+                </span>
 
+            
+
 
+            
+            <ul class="articles">
 
+                
+    
+        <li class="chapter " data-level="1.7.1" data-path="state.html">
 
+            
+                <a href="state.html">
 
+            
+                    
+                    상태
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter active" data-level="1.7.2" data-path="getters.html">
 
+            
+                <a href="getters.html">
 
+            
+                    
+                    Getters
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.7.3" data-path="mutations.html">
 
+            
+                <a href="mutations.html">
 
+            
+                    
+                    변이
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.7.4" data-path="actions.html">
 
+            
+                <a href="actions.html">
 
+            
+                    
+                    액션
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.7.5" data-path="modules.html">
 
+            
+                <a href="modules.html">
 
+            
+                    
+                    모듈
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+
 
+            </ul>
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.8" data-path="structure.html">
 
+            
+                <a href="structure.html">
 
+            
+                    
+                    애플리케이션 구조
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.9" data-path="plugins.html">
 
+            
+                <a href="plugins.html">
 
+            
+                    
+                    플러그인
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.10" data-path="strict.html">
 
+            
+                <a href="strict.html">
 
+            
+                    
+                    Strict 모드
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.11" data-path="forms.html">
 
+            
+                <a href="forms.html">
 
+            
+                    
+                    폼 핸들링
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.12" data-path="testing.html">
 
+            
+                <a href="testing.html">
 
+            
+                    
+                    테스팅
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.13" data-path="hot-reload.html">
 
+            
+                <a href="hot-reload.html">
 
+            
+                    
+                    핫 리로딩
 
+            
+                </a>
 
+            
+
 
+            
+        </li>
 
+    
+        <li class="chapter " data-level="1.14" 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">
 
+            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="." >Getters</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="getters">Getters</h1>
 
+<p>&#xB54C;&#xB85C;&#xB294; &#xC800;&#xC7A5;&#xC18C; &#xC0C1;&#xD0DC;&#xB97C; &#xAE30;&#xBC18;&#xD558;&#xB294; &#xC0C1;&#xD0DC;&#xB97C; &#xACC4;&#xC0B0;&#xD574;&#xC57C; &#xD560; &#xC218;&#xB3C4; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.(&#xC608;: &#xC544;&#xC774;&#xD15C; &#xB9AC;&#xC2A4;&#xD2B8;&#xB97C; &#xD544;&#xD130;&#xB9C1;&#xD558;&#xACE0; &#xACC4;&#xC0B0;)</p>
 
+<pre class="language-"><code class="lang-js">computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  doneTodosCount <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>todos<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>todo <span class="token operator">=</span><span class="token operator">&gt;</span> todo<span class="token punctuation">.</span>done<span class="token punctuation">)</span><span class="token punctuation">.</span>length
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>&#xB458; &#xC774;&#xC0C1;&#xC758; &#xCEF4;&#xD3EC;&#xB10C;&#xD2B8;&#xAC00; &#xC774;&#xB97C; &#xC0AC;&#xC6A9; &#xD574;&#xC57C;&#xD558;&#xB294; &#xACBD;&#xC6B0; &#xD568;&#xC218;&#xB97C; &#xBCF5;&#xC81C;&#xD558;&#xAC70;&#xB098; &#xACF5;&#xC720;&#xB41C; &#xD5EC;&#xD37C;&#xB97C; &#xCD94;&#xCD9C;&#xD558;&#xC5EC; &#xC5EC;&#xB7EC; &#xC704;&#xCE58;&#xC5D0;&#xC11C; &#xAC00;&#xC838;&#xC640;&#xC57C;&#xD569;&#xB2C8;&#xB2E4;. &#xB458; &#xB2E4; &#xC774;&#xC0C1;&#xC801;&#xC774;&#xC9C0; &#xC54A;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
 
+<p>Vuex&#xB97C; &#xC0AC;&#xC6A9;&#xD558;&#xBA74; &#xC800;&#xC7A5;&#xC18C;&#xC5D0;&#xC11C; &quot;getters&quot;&#xB97C; &#xC815;&#xC758; &#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;(&#xC800;&#xC7A5;&#xC18C;&#xC758; &#xACC4;&#xC0B0;&#xB41C; &#xC18D;&#xC131;&#xC73C;&#xB85C; &#xC0DD;&#xAC01;&#xB429;&#xB2C8;&#xB2E4;). Getters&#xB294; &#xCCAB; &#xBC88;&#xC9F8; &#xC804;&#xB2EC;&#xC778;&#xC790;&#xB85C; &#xC0C1;&#xD0DC;&#xB97C; &#xBC1B;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
 
+<pre class="language-"><code class="lang-js"><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>
 
+    todos<span class="token punctuation">:</span> <span class="token punctuation">[</span>
 
+      <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">&apos;...&apos;</span><span class="token punctuation">,</span> done<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+      <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">&apos;...&apos;</span><span class="token punctuation">,</span> done<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span>
 
+    <span class="token punctuation">]</span>
 
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 
+  getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+    doneTodos<span class="token punctuation">:</span> state <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+      <span class="token keyword">return</span> state<span class="token punctuation">.</span>todos<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>todo <span class="token operator">=</span><span class="token operator">&gt;</span> todo<span class="token punctuation">.</span>done<span class="token punctuation">)</span>
 
+    <span class="token punctuation">}</span>
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+<p>getters&#xB294; <code>store.getters</code> &#xAC1D;&#xCCB4;&#xC5D0; &#xB178;&#xCD9C; &#xB429;&#xB2C8;&#xB2E4;.</p>
 
+<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>doneTodos <span class="token comment" spellcheck="true">// -&gt; [{ id: 1, text: &apos;...&apos;, done: true }]</span>
 
+</code></pre>
 
+<p>Getters&#xB294; &#xB450; &#xBC88;&#xC9F8; &#xC804;&#xB2EC;&#xC778;&#xC790;&#xB85C; &#xB2E4;&#xB978; getter&#xB3C4; &#xBC1B;&#xAC8C;&#xB429;&#xB2C8;&#xB2E4;.</p>
 
+<pre class="language-"><code class="lang-js">getters<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// ...</span>
 
+  doneTodosCount<span class="token punctuation">:</span> <span class="token punctuation">(</span>state<span class="token punctuation">,</span> getters<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 
+    <span class="token keyword">return</span> getters<span class="token punctuation">.</span>doneTodos<span class="token punctuation">.</span>length
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<pre class="language-"><code class="lang-js">store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>doneTodosCount <span class="token comment" spellcheck="true">// -&gt; 1</span>
 
+</code></pre>
 
+<p>&#xC774;&#xC81C; &#xBAA8;&#xB4E0; &#xCEF4;&#xD3EC;&#xB10C;&#xD2B8;&#xC5D0;&#xC11C; &#xC27D;&#xAC8C; &#xC0AC;&#xC6A9;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
 
+<pre class="language-"><code class="lang-js">computed<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 
+  doneTodosCount <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>getters<span class="token punctuation">.</span>doneTodosCount
 
+  <span class="token punctuation">}</span>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<h3 id="mapgetters-&#xD5EC;&#xD37C;"><code>mapGetters</code> &#xD5EC;&#xD37C;</h3>
 
+<p><code>mapGetters</code> &#xD5EC;&#xD37C;&#xB294; &#xC800;&#xC7A5;&#xC18C; getter&#xB97C; &#xB85C;&#xCEEC; &#xACC4;&#xC0B0;&#xB41C; &#xC18D;&#xC131;&#xC5D0; &#xB9E4;&#xD551;&#xD569;&#xB2C8;&#xB2E4;.</p>
 
+<pre class="language-"><code class="lang-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> mapGetters <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 punctuation">{</span>
 
+    <span class="token comment" spellcheck="true">// getter&#xB97C; &#xAC1D;&#xCCB4; &#xC804;&#xAC1C; &#xC5F0;&#xC0B0;&#xC790;(Object Spread Operator)&#xB85C; &#xACC4;&#xC0B0;&#xD558;&#xC5EC; &#xCD94;&#xAC00;&#xD569;&#xB2C8;&#xB2E4;.</span>
 
+    <span class="token operator">...</span><span class="token function">mapGetters</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
 
+      <span class="token string">&apos;doneTodosCount&apos;</span><span class="token punctuation">,</span>
 
+      <span class="token string">&apos;anotherGetter&apos;</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>
 
+<span class="token punctuation">}</span>
 
+</code></pre>
 
+<p>getter&#xB97C; &#xB2E4;&#xB978; &#xC774;&#xB984;&#xC73C;&#xB85C; &#xB9E4;&#xD551;&#xD558;&#xB824;&#xBA74; &#xAC1D;&#xCCB4;&#xB97C; &#xC0AC;&#xC6A9;&#xD569;&#xB2C8;&#xB2E4;.</p>
 
+<pre class="language-"><code class="lang-js"><span class="token operator">...</span><span class="token function">mapGetters</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 
+  <span class="token comment" spellcheck="true">// this.doneCount&#xB97C; store.getters.doneTodosCount&#xC5D0; &#xB9E4;&#xD551;&#xD558;&#xC2ED;&#xC2DC;&#xC624;.</span>
 
+  doneCount<span class="token punctuation">:</span> <span class="token string">&apos;doneTodosCount&apos;</span>
 
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
 
+</code></pre>
 
+
 
+                                
+                                </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="state.html" class="navigation navigation-prev " aria-label="Previous page: 상태">
 
+                    <i class="fa fa-angle-left"></i>
 
+                </a>
 
+                
+                
+                <a href="mutations.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":"Getters","level":"1.7.2","depth":2,"next":{"title":"변이","level":"1.7.3","depth":2,"path":"mutations.md","ref":"mutations.md","articles":[]},"previous":{"title":"상태","level":"1.7.1","depth":2,"path":"state.md","ref":"state.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":"kr","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"getters.md","mtime":"2018-04-20T00:44:03.870Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-04-20T00:47:55.633Z"},"basePath":".","book":{"language":"kr"}});
 
+        });
 
+    </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>
 
+

Some files were not shown because too many files changed in this diff