前三章陆续已经更新了Vue基本使用 和Vue Router的基本使用，如果你读了前三篇文章的话，并且掌握差不多，那么你现在可以开发简单的应用了，例如Blog，电商网站........唯一不足的是，随着你的业务需求不断增加，页面中的状态数据也不断庞大，维护起来就特别困难了，Vue 提供了一种状态管理 解决办法 -Vuex，它的思想和React 的Redux 很像，页面中的数据和逻辑都交给了store来管理了，这样的好处就是，维护方便，单个组件代码也整洁不少。
<section id="nice" data-tool="mdnice编辑器" data-website="https://www.mdnice.com" style="padding: 0 10px; word-spacing: 0px; word-wrap: break-word; text-align: left; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; margin-top: -10px; line-height: 1.6; letter-spacing: .034em; color: rgb(63, 63, 63); font-size: 16px; word-break: all;"><h2 data-tool="mdnice编辑器" style="font-weight: bold; color: black; font-size: 22px; display: block; text-align: center; background-image: url(https://my-wechat.mdnice.com/mdnice/mountain_2_20191028221337.png); background-position: center center; background-repeat: no-repeat; background-attachment: initial; background-origin: initial; background-clip: initial; background-size: 63px; margin-top: 38px; margin-bottom: 10px;"><span class="prefix" style="display: none;"></span><span class="content" style="text-align: center; display: inline-block; height: 38px; line-height: 42px; color: rgb(60, 112, 198); background-position: left center; background-repeat: no-repeat; background-attachment: initial; background-origin: initial; background-clip: initial; background-size: 63px; margin-top: 38px; font-size: 18px; margin-bottom: 10px;">Vuex</span><span class="suffix"></span></h2> <h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 18px;"><span class="prefix" style="display: none;"></span><span class="content">安装</span><span class="suffix" style="display: none;"></span></h4> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;">npm install vuex --save<br><br>yarn add vuex<br><br><br><span class="hljs-comment" style="color: #75715e; line-height: 26px;">// Vuex 依赖 Promise，所有需要安装 es6-promise</span><br><br>npm install es6-promise --save <br>yarn add es6-promise <br></code></pre> <h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 18px;"><span class="prefix" style="display: none;"></span><span class="content">Vuex 介绍</span><span class="suffix" style="display: none;"></span></h4> <blockquote data-tool="mdnice编辑器" style="font-size: 0.9em; overflow: auto; overflow-scrolling: touch; background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; padding: 15px 20px; line-height: 27px; background-color: rgb(239, 239, 239); border-left: none; display: block;"> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">Vuex 是一个专为 Vue.js 应用程序开发的<strong style="font-weight: bold; line-height: 1.75em; color: rgb(74,74,74);">状态管理模式</strong>。</p> </blockquote> <h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 18px;"><span class="prefix" style="display: none;"></span><span class="content">store.js</span><span class="suffix" style="display: none;"></span></h4> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;"><span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">import</span> Vue <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">from</span> <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'vue'</span><br><span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">import</span> Vuex <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">from</span> <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'vuex'</span><br><br>Vue.use(Vuex)<br><br><span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">export</span> <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">default</span> <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">new</span> Vuex.Store({<br> <span class="hljs-attr" style="line-height: 26px;">state</span>: {<br> <span class="hljs-attr" style="line-height: 26px;">count</span>: <span class="hljs-number" style="line-height: 26px;">0</span>,<br> <span class="hljs-attr" style="line-height: 26px;">message</span>: <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'测试信息'</span><br> },<br> <span class="hljs-attr" style="line-height: 26px;">mutations</span>: {<br> },<br> <span class="hljs-attr" style="line-height: 26px;">actions</span>: {<br> },<br> <span class="hljs-attr" style="line-height: 26px;">modules</span>: {<br> }<br>})<br><br></code></pre> <h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 18px;"><span class="prefix" style="display: none;"></span><span class="content">State ------>驱动应用的数据源</span><span class="suffix" style="display: none;"></span></h4> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">1.在组件中 获取store 中的state 数据</span><span class="suffix" style="display: none;"></span></h5> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;"><span class="hljs-number" style="line-height: 26px;">1.</span> 在组件中 获取store 中的state 数据<br><br> <span class="hljs-comment" style="color: #75715e; line-height: 26px;">// 一般是 通过计算属性中声明属性，然后使用 this.$store.state.数据源 来获取数据的</span><br> computed: {<br> count () {<br> <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">return</span> store.state.count<br> }<br> }<br><br></code></pre> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">如何获取多个state呢？</span><span class="suffix" style="display: none;"></span></h5> <blockquote data-tool="mdnice编辑器" style="font-size: 0.9em; overflow: auto; overflow-scrolling: touch; background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; padding: 15px 20px; line-height: 27px; background-color: rgb(239, 239, 239); border-left: none; display: block;"> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">如果想获取多个state数据呢，其实可以在computed 中写多个属性 来获取state，但是当state变化时，会重新求取计算属性，并且触发更新相关联的 DOM，非常影响性能。</p> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">好在Vuex 提供了 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(60, 112, 198);">mapState</code> 辅助函数，减少不必要的开销</p> </blockquote> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;"><span class="hljs-number" style="line-height: 26px;">1.</span> 首先第一步 必须引入 mapState <br><span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">import</span> { mapState } <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">from</span> <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'vuex'</span><br><br><span class="hljs-number" style="line-height: 26px;">2.</span> 在computed 使用即可<br>computed: mapState({<br> <span class="hljs-attr" style="line-height: 26px;">counts</span>: <span class="hljs-function" style="line-height: 26px;"><span class="hljs-params" style="line-height: 26px;">state</span> =></span> state.count,<br> <span class="hljs-comment" style="color: #75715e; line-height: 26px;">//counts为自定义的属性： state参数 是stote中的state，然后直接通过state。数据源获取即可</span><br> addNumber (state) {<br> <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">return</span> <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">this</span>.numbers + state.count<br> }<br> })<br><br><br><span class="hljs-number" style="line-height: 26px;">3.</span> 在页面 直接使用 自定义的属性<br></code></pre> <h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 18px;"><span class="prefix" style="display: none;"></span><span class="content">Getter</span><span class="suffix" style="display: none;"></span></h4> <blockquote data-tool="mdnice编辑器" style="font-size: 0.9em; overflow: auto; overflow-scrolling: touch; background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; padding: 15px 20px; line-height: 27px; background-color: rgb(239, 239, 239); border-left: none; display: block;"> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">作用类似 computed，但有缓存功能。</p> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">使用场景： 当一个组件需要过滤后的state值，你可以在组件中通过filter进行过滤，那么其它组件也需要过滤后的值，你就的再 次过滤state。</p> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);"> 当使用getter 处理后，一次处理，多次使用，提高效率</p> </blockquote> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;"><span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">export</span> <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">default</span> <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">new</span> Vuex.Store({<br> <span class="hljs-attr" style="line-height: 26px;">state</span>: {<br> <span class="hljs-attr" style="line-height: 26px;">count</span>: <span class="hljs-number" style="line-height: 26px;">0</span>,<br> <span class="hljs-attr" style="line-height: 26px;">message</span>: <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'测试信息'</span>,<br> <span class="hljs-attr" style="line-height: 26px;">arr</span>: [<span class="hljs-number" style="line-height: 26px;">1</span>, <span class="hljs-number" style="line-height: 26px;">2</span>, <span class="hljs-number" style="line-height: 26px;">3</span>, <span class="hljs-number" style="line-height: 26px;">4</span>, <span class="hljs-number" style="line-height: 26px;">5</span>, <span class="hljs-number" style="line-height: 26px;">6</span>]<br> },<br> <span class="hljs-attr" style="line-height: 26px;">getters</span>: {<br> <span class="hljs-attr" style="line-height: 26px;">filterArr</span>: <span class="hljs-function" style="line-height: 26px;"><span class="hljs-params" style="line-height: 26px;">state</span> =></span> {<br> <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">return</span> state.arr.filter(<span class="hljs-function" style="line-height: 26px;"><span class="hljs-params" style="line-height: 26px;">items</span> =></span> items % <span class="hljs-number" style="line-height: 26px;">2</span> === <span class="hljs-number" style="line-height: 26px;">0</span>)<br> }<br> }<br>})<br></code></pre> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content"><code>mapGetters</code> 辅助函数</span><span class="suffix" style="display: none;"></span></h5> <blockquote data-tool="mdnice编辑器" style="font-size: 0.9em; overflow: auto; overflow-scrolling: touch; background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; padding: 15px 20px; line-height: 27px; background-color: rgb(239, 239, 239); border-left: none; display: block;"> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);"> <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(60, 112, 198);">mapGetters</code> 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：</p> </blockquote> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">在组件中访问getter 值</span><span class="suffix" style="display: none;"></span></h5> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;"><span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">this</span>.$store.getters.自定义的属性<br><br>在 其它 组件访问该getters 时，值仍然时 [ <span class="hljs-number" style="line-height: 26px;">2</span>, <span class="hljs-number" style="line-height: 26px;">4</span>, <span class="hljs-number" style="line-height: 26px;">6</span> ] 过滤后的<br></code></pre> <h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 18px;"><span class="prefix" style="display: none;"></span><span class="content">Mutation</span><span class="suffix" style="display: none;"></span></h4> <blockquote data-tool="mdnice编辑器" style="font-size: 0.9em; overflow: auto; overflow-scrolling: touch; background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; padding: 15px 20px; line-height: 27px; background-color: rgb(239, 239, 239); border-left: none; display: block;"> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">Mutation 是用来更改Store的状态的唯一方法。</p> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">它由 事件类型 和 回调函数构成。回调函数是用来更改state状态的，参数为state</p> <h5 style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">使用mutation：</span><span class="suffix" style="display: none;"></span></h5> <ol style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: black; list-style-type: decimal;"> <li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500;">必须在 mutation中注册事件，</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500;">然后在组件中通过 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(60, 112, 198);">store.commit(事件名)</code> 来 触发改变state的状态</section></li></ol> <h5 style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">注意：</span><span class="suffix" style="display: none;"></span></h5> </blockquote> <img src="https://user-gold-cdn.xitu.io/2020/3/30/1712bfb1b2c6246b?w=2001&h=679&f=gif&s=113714" data-tool="mdnice编辑器" style="display: block; margin: 0 auto; width: auto; max-width: 100%; border-radius: 4px; margin-bottom: 25px;"> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content"><code>store.commit 参数</code></span><span class="suffix" style="display: none;"></span></h5> <blockquote data-tool="mdnice编辑器" style="font-size: 0.9em; overflow: auto; overflow-scrolling: touch; background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; padding: 15px 20px; line-height: 27px; background-color: rgb(239, 239, 239); border-left: none; display: block;"> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">store.commit 接收两个参数</p> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);"> 第一个参数为： store.mutation中的事件名</p> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);"> 第二个参数为： 要传递的 <strong style="font-weight: bold; line-height: 1.75em; color: rgb(74,74,74);">载荷</strong></p> </blockquote> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;">mutations: {<br> increment (state, n) {<br> state.count += n<br> }<br>}<br><br><br>store.commit(<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'increment'</span>, <span class="hljs-number" style="line-height: 26px;">10</span>)<br><br><br></code></pre> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content"><code>mapMutations</code>辅助函数</span><span class="suffix" style="display: none;"></span></h5> <blockquote data-tool="mdnice编辑器" style="font-size: 0.9em; overflow: auto; overflow-scrolling: touch; background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; padding: 15px 20px; line-height: 27px; background-color: rgb(239, 239, 239); border-left: none; display: block;"> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);"><code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(60, 112, 198);">mapMutations</code> 辅助函数将组件中的 methods 映射为 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(60, 112, 198);">store.commit</code> 调用（需要在根节点注入 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(60, 112, 198);">store</code>）。</p> </blockquote> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">对象的提交方式</span><span class="suffix" style="display: none;"></span></h5> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;">mutations: {<br> increment (state, payload) {<br> state.count += payload.amount<br> }<br>}<br><br><br>mutations: {<br> increment (state, payload) {<br> state.count += payload.amount<br> }<br>}store.commit({<br> <span class="hljs-attr" style="line-height: 26px;">type</span>: <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'increment'</span>,<br> <span class="hljs-attr" style="line-height: 26px;">amount</span>: <span class="hljs-number" style="line-height: 26px;">10</span><br>})<br></code></pre> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">Mutation 使用技巧</span><span class="suffix" style="display: none;"></span></h5> <blockquote data-tool="mdnice编辑器" style="font-size: 0.9em; overflow: auto; overflow-scrolling: touch; background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; padding: 15px 20px; line-height: 27px; background-color: rgb(239, 239, 239); border-left: none; display: block;"> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">在多人协作开发时，随着 mutation 的 type 增多，会维护困难。</p> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">官方推荐采用 使用 事件类型，来处理,开发效率提高。</p> </blockquote> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;"><span class="hljs-comment" style="color: #75715e; line-height: 26px;">// mutation-types.js</span><br><span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">export</span> <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">const</span> SOME_MUTATION = <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'SOME_MUTATION'</span><br><br><span class="hljs-comment" style="color: #75715e; line-height: 26px;">// store.js</span><br><span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">import</span> Vuex <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">from</span> <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'vuex'</span><br><span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">import</span> { SOME_MUTATION } <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">from</span> <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'./mutation-types'</span><br><br><span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">const</span> store = <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">new</span> Vuex.Store({<br> <span class="hljs-attr" style="line-height: 26px;">state</span>: { ... },<br> <span class="hljs-attr" style="line-height: 26px;">mutations</span>: {<br> <span class="hljs-comment" style="color: #75715e; line-height: 26px;">// 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名</span><br> [SOME_MUTATION] (state) {<br> <span class="hljs-comment" style="color: #75715e; line-height: 26px;">// mutate state</span><br> }<br> }<br>})<br><br><br></code></pre> <h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 18px;"><span class="prefix" style="display: none;"></span><span class="content">Action</span><span class="suffix" style="display: none;"></span></h4> <blockquote data-tool="mdnice编辑器" style="font-size: 0.9em; overflow: auto; overflow-scrolling: touch; background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; padding: 15px 20px; line-height: 27px; background-color: rgb(239, 239, 239); border-left: none; display: block;"> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">Action 功能类似 Mutation，</p> <h5 style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">Action 支持 异步操作</span><span class="suffix" style="display: none;"></span></h5> <h5 style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">Action 提交的 mutation, 不是直接修改state状态</span><span class="suffix" style="display: none;"></span></h5> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">Action 接收参数： 与 store 实例具有相同方法和属性的 context 对象</p> </blockquote> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">实例</span><span class="suffix" style="display: none;"></span></h5> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;"><span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">const</span> store = <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">new</span> Vuex.Store({<br> <span class="hljs-attr" style="line-height: 26px;">state</span>: {<br> <span class="hljs-attr" style="line-height: 26px;">count</span>: <span class="hljs-number" style="line-height: 26px;">0</span><br> },<br> <span class="hljs-attr" style="line-height: 26px;">mutations</span>: {<br> increment (state) {<br> state.count++<br> }<br> },<br> <span class="hljs-attr" style="line-height: 26px;">actions</span>: {<br> increment (context) {<br> context.commit(<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'increment'</span>)<br> }<br> }<br>})<br></code></pre> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">在组件中分发Action</span><span class="suffix" style="display: none;"></span></h5> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;"><span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">this</span>.$store.dispatch(<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'xxx'</span>)<br></code></pre> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">异步执行Action</span><span class="suffix" style="display: none;"></span></h5> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;">actions: {<br> incrementAsync ({ commit }) {<br> setTimeout(<span class="hljs-function" style="line-height: 26px;"><span class="hljs-params" style="line-height: 26px;">()</span> =></span> {<br> commit(<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'increment'</span>)<br> }, <span class="hljs-number" style="line-height: 26px;">1000</span>)<br> }<br>}<br></code></pre> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content"><code>mapActions</code>辅助函数</span><span class="suffix" style="display: none;"></span></h5> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;"><span class="prefix" style="display: none;"></span><span class="content">Action 也支持载荷</span><span class="suffix" style="display: none;"></span></h5> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;"><span class="hljs-comment" style="color: #75715e; line-height: 26px;">// 以载荷形式分发</span><br>store.dispatch(<span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'incrementAsync'</span>, {<br> <span class="hljs-attr" style="line-height: 26px;">amount</span>: <span class="hljs-number" style="line-height: 26px;">10</span><br>})<br><br><span class="hljs-comment" style="color: #75715e; line-height: 26px;">// 以对象形式分发</span><br>store.dispatch({<br> <span class="hljs-attr" style="line-height: 26px;">type</span>: <span class="hljs-string" style="color: #a6e22e; line-height: 26px;">'incrementAsync'</span>,<br> <span class="hljs-attr" style="line-height: 26px;">amount</span>: <span class="hljs-number" style="line-height: 26px;">10</span><br>})<br></code></pre> <h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 18px;"><span class="prefix" style="display: none;"></span><span class="content">Module 模块分割</span><span class="suffix" style="display: none;"></span></h4> <blockquote data-tool="mdnice编辑器" style="font-size: 0.9em; overflow: auto; overflow-scrolling: touch; background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; padding: 15px 20px; line-height: 27px; background-color: rgb(239, 239, 239); border-left: none; display: block;"> <p style="padding-bottom: 8px; padding-top: 23px; margin: 0px; line-height: 26px; padding: 0px; font-size: 15px; color: rgb(89,89,89);">当所有状态对象都集中在个大的对象中，store维护将变得困难。这时，可以使用模块分割成多个对象，最后将对象挂载到store的modeule中,Vuex 允许我们将 store 分割成<strong style="font-weight: bold; line-height: 1.75em; color: rgb(74,74,74);">模块（module）</strong>。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：</p> </blockquote> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;"><span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">const</span> moduleA = {<br> <span class="hljs-attr" style="line-height: 26px;">state</span>: { ... },<br> <span class="hljs-attr" style="line-height: 26px;">mutations</span>: { ... },<br> <span class="hljs-attr" style="line-height: 26px;">actions</span>: { ... },<br> <span class="hljs-attr" style="line-height: 26px;">getters</span>: { ... }<br>}<br><br><span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">const</span> moduleB = {<br> <span class="hljs-attr" style="line-height: 26px;">state</span>: { ... },<br> <span class="hljs-attr" style="line-height: 26px;">mutations</span>: { ... },<br> <span class="hljs-attr" style="line-height: 26px;">actions</span>: { ... }<br>}<br><br><span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">const</span> store = <span class="hljs-keyword" style="color: #f92672; font-weight: bold; line-height: 26px;">new</span> Vuex.Store({<br> <span class="hljs-attr" style="line-height: 26px;">modules</span>: {<br> <span class="hljs-attr" style="line-height: 26px;">a</span>: moduleA,<br> <span class="hljs-attr" style="line-height: 26px;">b</span>: moduleB<br> }<br>})<br><br>store.state.a <span class="hljs-comment" style="color: #75715e; line-height: 26px;">// -> moduleA 的状态</span><br>store.state.b <span class="hljs-comment" style="color: #75715e; line-height: 26px;">// -> moduleB 的状态</span><br></code></pre> </section> <center><h3>✨觉得不错的点赞，帮忙转发分享以下，原创不易！<h3/><center/> <br/> <center><h3>✨关注微信公众号'前端自学社区' 获取更多资料到此，Vue 系列文章就结束了，Vue 全家桶已经讲完了，如果你跟着读了这前几篇文章的话，你现在就可以实操的写一个项目来体验一下Vue的魅力。Vue 使用熟练可以了的话，下一步你应该进阶更高一层了，那就是研究Vue 源码。只有清楚原理了，自己造轮子玩那才有意思，对应你的money 也提高了，lavel 也 提升了，加油吧， 小伙伴们。
