strict.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495
  1. <!DOCTYPE HTML>
  2. <html lang="en" >
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  6. <title>Strict Mode · Vuex</title>
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  8. <meta name="description" content="">
  9. <meta name="generator" content="GitBook 3.2.2">
  10. <link rel="stylesheet" href="../gitbook/style.css">
  11. <link rel="stylesheet" href="../gitbook/gitbook-plugin-prism/prism.css">
  12. <link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
  13. <link rel="stylesheet" href="../gitbook/gitbook-plugin-theme-vuejs/vue.css">
  14. <meta name="HandheldFriendly" content="true"/>
  15. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  16. <meta name="apple-mobile-web-app-capable" content="yes">
  17. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  18. <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
  19. <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
  20. <link rel="next" href="forms.html" />
  21. <link rel="prev" href="plugins.html" />
  22. </head>
  23. <body>
  24. <div class="book">
  25. <div class="book-summary">
  26. <div id="book-search-input" role="search">
  27. <input type="text" placeholder="Type to search" />
  28. </div>
  29. <nav role="navigation">
  30. <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=vuejs" id="_carbonads_js"></script>
  31. <ul class="summary">
  32. <li class="chapter " data-level="1.1" data-path="./">
  33. <a href="./">
  34. Introduction
  35. </a>
  36. </li>
  37. <li class="chapter " data-level="1.2" >
  38. <a target="_blank" href="https://github.com/vuejs/vuex/releases">
  39. Release Notes
  40. </a>
  41. </li>
  42. <li class="chapter " data-level="1.3" data-path="installation.html">
  43. <a href="installation.html">
  44. Installation
  45. </a>
  46. </li>
  47. <li class="chapter " data-level="1.4" data-path="intro.html">
  48. <a href="intro.html">
  49. What is Vuex?
  50. </a>
  51. </li>
  52. <li class="chapter " data-level="1.5" data-path="getting-started.html">
  53. <a href="getting-started.html">
  54. Getting Started
  55. </a>
  56. </li>
  57. <li class="chapter " data-level="1.6" data-path="core-concepts.html">
  58. <a href="core-concepts.html">
  59. Core Concepts
  60. </a>
  61. <ul class="articles">
  62. <li class="chapter " data-level="1.6.1" data-path="state.html">
  63. <a href="state.html">
  64. State
  65. </a>
  66. </li>
  67. <li class="chapter " data-level="1.6.2" data-path="getters.html">
  68. <a href="getters.html">
  69. Getters
  70. </a>
  71. </li>
  72. <li class="chapter " data-level="1.6.3" data-path="mutations.html">
  73. <a href="mutations.html">
  74. Mutations
  75. </a>
  76. </li>
  77. <li class="chapter " data-level="1.6.4" data-path="actions.html">
  78. <a href="actions.html">
  79. Actions
  80. </a>
  81. </li>
  82. <li class="chapter " data-level="1.6.5" data-path="modules.html">
  83. <a href="modules.html">
  84. Modules
  85. </a>
  86. </li>
  87. </ul>
  88. </li>
  89. <li class="chapter " data-level="1.7" data-path="structure.html">
  90. <a href="structure.html">
  91. Application Structure
  92. </a>
  93. </li>
  94. <li class="chapter " data-level="1.8" data-path="plugins.html">
  95. <a href="plugins.html">
  96. Plugins
  97. </a>
  98. </li>
  99. <li class="chapter active" data-level="1.9" data-path="strict.html">
  100. <a href="strict.html">
  101. Strict Mode
  102. </a>
  103. </li>
  104. <li class="chapter " data-level="1.10" data-path="forms.html">
  105. <a href="forms.html">
  106. Form Handling
  107. </a>
  108. </li>
  109. <li class="chapter " data-level="1.11" data-path="testing.html">
  110. <a href="testing.html">
  111. Testing
  112. </a>
  113. </li>
  114. <li class="chapter " data-level="1.12" data-path="hot-reload.html">
  115. <a href="hot-reload.html">
  116. Hot Reloading
  117. </a>
  118. </li>
  119. <li class="chapter " data-level="1.13" data-path="api.html">
  120. <a href="api.html">
  121. API Reference
  122. </a>
  123. </li>
  124. <li class="divider"></li>
  125. <li>
  126. <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
  127. Published with GitBook
  128. </a>
  129. </li>
  130. </ul>
  131. </nav>
  132. </div>
  133. <div class="book-body">
  134. <div class="body-inner">
  135. <div class="book-header" role="navigation">
  136. <!-- Title -->
  137. <h1>
  138. <i class="fa fa-circle-o-notch fa-spin"></i>
  139. <a href="." >Strict Mode</a>
  140. </h1>
  141. </div>
  142. <div class="page-wrapper" tabindex="-1" role="main">
  143. <div class="page-inner">
  144. <div id="book-search-results">
  145. <div class="search-noresults">
  146. <section class="normal markdown-section">
  147. <h1 id="strict-mode">Strict Mode</h1>
  148. <p>To enable strict mode, simply pass in <code>strict: true</code> when creating a Vuex store:</p>
  149. <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>
  150. <span class="token comment" spellcheck="true">// ...</span>
  151. strict<span class="token punctuation">:</span> <span class="token boolean">true</span>
  152. <span class="token punctuation">}</span><span class="token punctuation">)</span>
  153. </code></pre>
  154. <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>
  155. <h3 id="development-vs-production">Development vs. Production</h3>
  156. <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>
  157. <p>Similar to plugins, we can let the build tools handle that:</p>
  158. <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>
  159. <span class="token comment" spellcheck="true">// ...</span>
  160. 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>
  161. <span class="token punctuation">}</span><span class="token punctuation">)</span>
  162. </code></pre>
  163. </section>
  164. </div>
  165. <div class="search-results">
  166. <div class="has-results">
  167. <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
  168. <ul class="search-results-list"></ul>
  169. </div>
  170. <div class="no-results">
  171. <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
  172. </div>
  173. </div>
  174. </div>
  175. </div>
  176. </div>
  177. <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
  178. <div class="bsa-cpc"></div>
  179. <script>
  180. (function(){
  181. if(typeof _bsa !== 'undefined' && _bsa) {
  182. _bsa.init('default', 'CKYD62QM', 'placement:vuejsorg', {
  183. target: '.bsa-cpc',
  184. align: 'horizontal',
  185. disable_css: 'true'
  186. });
  187. }
  188. })();
  189. </script>
  190. </div>
  191. <a href="plugins.html" class="navigation navigation-prev " aria-label="Previous page: Plugins">
  192. <i class="fa fa-angle-left"></i>
  193. </a>
  194. <a href="forms.html" class="navigation navigation-next " aria-label="Next page: Form Handling">
  195. <i class="fa fa-angle-right"></i>
  196. </a>
  197. </div>
  198. <script>
  199. var gitbook = gitbook || [];
  200. gitbook.push(function() {
  201. 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"}});
  202. });
  203. </script>
  204. </div>
  205. <script src="../gitbook/gitbook.js"></script>
  206. <script src="../gitbook/theme.js"></script>
  207. <script src="../gitbook/gitbook-plugin-edit-link/plugin.js"></script>
  208. <script src="../gitbook/gitbook-plugin-github/plugin.js"></script>
  209. <script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
  210. <script src="../gitbook/gitbook-plugin-search/search.js"></script>
  211. <script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
  212. <script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
  213. <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
  214. </body>
  215. </html>