脚本宝典收集整理的这篇文章主要介绍了

Vue2从0到1(三):Vuex的使用

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>上两篇讲了:</p> <h4>环境的搭建用<a href="https://segmentfault.com/a/1190000011280912">webpack打包vue</a> 和<a href="https://segmentfault.com/a/1190000011298261" target="_blank">Vue-router的使用</a> </h4> <p>下面讲一下:</p> <h4>9.vuex的应用</h4> <blockquote> <p>安装vuex</p> </blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install vuex --save" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword"><a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>st<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a></span> vuex <span class="hljs-comment">--save</span></code></pre> <h5>9.1基本用法:</h5> <p>新建store.js文件:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex) //创建Store实例 const store = new Vuex.Store({ // 存储状态值 state: { count:1 }, // 状态值的改变方法,操作状态值 // 提交mutations是更改Vuex状态的唯一方法 mutations: { increment(state){ state.count++; }, decrement(state){ state.count--; } }, // 在store中定义getters(可以认为是store的计算属性)。Getters接收state作为其第一个函数 getters: { }, actions: { } }) // 要改变状态值只能通过提交mutations来完成 export default store;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code> <span class="hljs-keyword">import</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>; <span class="hljs-keyword">import</span> Vuex <span class="hljs-keyword">from</span> <span class="hljs-string">'vuex'</span>; Vue.use(Vuex) <span class="hljs-comment">//创建Store实例</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> store = <span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> Vuex.Store({ <span class="hljs-comment">// 存储状态值</span> state: { count:<span class="hljs-number">1</span> }, <span class="hljs-comment">// 状态值的改变方法,操作状态值</span> <span class="hljs-comment">// 提交mutations是更改Vuex状态的唯一方法</span> mutations: { increment(state){ state.count++; }, decrement(state){ state.count--; } }, <span class="hljs-comment">// 在store中定义getters(可以认为是store的计算属性)。Getters接收state作为其第一个函数</span> getters: { }, actions: { } }) <span class="hljs-comment">// 要改变状态值只能通过提交mutations来完成</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/default" title="浏览关于“default”的文章" target="_blank" class="tag_link">default</a></span> store;</code></pre> <p>在main.js里面注入store;</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" ... //引入store import store from './store.js' ... const app = new Vue({ router, store }).$mount('#main')" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code> ... <span class="hljs-comment">//引入store</span> <span class="hljs-keyword">import</span> store <span class="hljs-keyword">from</span> <span class="hljs-string">'./store.js'</span> ... <span class="hljs-keyword">const</span> app = <span class="hljs-keyword">new</span> Vue({ router, store }).$mount(<span class="hljs-string">'#main'</span>)</code></pre> <p>新建count.vue文件,并新建路由指向count组件参照<a href="https://segmentfault.com/a/1190000011298261">vue-router的使用</a>。<br />count.vue文件:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="<a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a>" class="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>=" <template> </p> <div> <div>{{$store.state.count}}</div> <div> <span @click=&quot;increment&quot;>increment</span> <span @click=&quot;decrement&quot;>decrement</span> </div> </p></div> <p> </template> </p> <style> </style> <p> <script> export default { data(){ <a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a> {}; }, methods:{ increment(){ <a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.$store.commit('increment') }, decrement(){ this.$store.commit('decrement') } } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> <span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>{{$store.state.count}}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"increment"</span>&gt;</span>increment<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"decrement"</span>&gt;</span>decrement<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="undefined"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { data(){ <span class="hljs-keyword">return</span> {}; }, <span class="hljs-attr">methods</span>:{ increment(){ <span class="hljs-keyword">this</span>.$store.commit(<span class="hljs-string">'increment'</span>) }, decrement(){ <span class="hljs-keyword">this</span>.$store.commit(<span class="hljs-string">'decrement'</span>) } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>效果图:<br /><span class="img-wrap"><img data-src="/img/bVVQ2u?w=813&amp;h=508" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <hr> <h4>9.2用Module拆分state</h4> <p>由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。<br />为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter</p> <p>新建moduleA.js,moduleB.js</p> <h4><a href="https://github.com/liubin915249126/vue2-study/blob/master/Script/moduleA.js" rel="nofollow noreferrer" target="_blank">moduleA</a></h4> <h4><a href="https://github.com/liubin915249126/vue2-study/blob/master/Script/moduleB.js" rel="nofollow noreferrer" target="_blank">moduleB</a></h4> <p>并修改store.js:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="... import moduleA from './moduleA'; import moduleB from './moduleB'; ... Vue.use(Vuex) //创建Store实例 const store = new Vuex.Store({ modules:{ moduleA, moduleB //es6的写法,合并模块 } }) ..." title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>... <span class="hljs-keyword">import</span> moduleA <span class="hljs-keyword">from</span> <span class="hljs-string">'./moduleA'</span>; <span class="hljs-keyword">import</span> moduleB <span class="hljs-keyword">from</span> <span class="hljs-string">'./moduleB'</span>; ... Vue.use(Vuex) <span class="hljs-comment">//创建Store实例</span> <span class="hljs-keyword">const</span> store = <span class="hljs-keyword">new</span> Vuex.Store({ modules:{ moduleA, moduleB <span class="hljs-comment">//<a href="http://www.js-code.com/tag/es6" title="浏览关于“es6”的文章" target="_blank" class="tag_link">es6</a>的写法,合并模块</span> } }) ...</code></pre> <p>在组件里面想访问到state需要用到</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" $store.state.moduleA.count $store.state.moduleB.Name" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs perl"><code> $store.state.moduleA.count $store.state.moduleB.Name</code></pre> <p>效果图:<br /><span class="img-wrap"><img data-src="/img/bVVQ2w?w=813&amp;h=508" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span><br />mutations里面修改state的方法依然不变</p> <h4>下章将讲用<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>js+koa2搭建后台,提供数据,以及Vuex的异步操作</h4> <h4>以上代码代码亲测可用,托管在<a href="https://github.com/liubin915249126/vue2-study#8" rel="nofollow noreferrer" target="_blank">github</a>上面,欢迎star</h4> <p></code></p>

总结

以上是脚本宝典为你收集整理的

Vue2从0到1(三):Vuex的使用

全部内容,希望文章能够帮你解决

Vue2从0到1(三):Vuex的使用

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过