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

Vue 教程第十五 篇—— Vuex 之 getter

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">getter</h2> <p>getters 可以理解为 vuex 中的 computed,和 vue 中的 computed 类似,都是用来计算 state 然后生成新的数据 ( 状态 ) 的。</p> <p>在上面的案例当中,如果想得到的 state 最终为一个带了币种的金额,只要给一个统一的出口,返回统一的数据模式。</p> <h4>简单实现</h4> <h5>store.js</h5> <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><br /> <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) let state = { count: 0 } let getters = { total: state => {<br /> return '$' + state.count;<br /> }<br /> }</p> <p>let mutations = {<br /> increment(_state, n){<br /> _state.count += n || 1;<br /> },<br /> decrement(){<br /> state.count -= 1;<br /> }<br /> }</p> <p>const store = new Vuex.Store({<br /> state,<br /> getters,<br /> mutations<br /> })</p> <p>export default store" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><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-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> state = { <span class="hljs-attr">count</span>: <span class="hljs-number">0</span> } <span class="hljs-keyword">let</span> getters = { <span class="hljs-attr">total</span>: <span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> { <span class="hljs-keyword">return</span> <span class="hljs-string">'$'</span> + state.count; } } <span class="hljs-keyword">let</span> mutations = { increment(_state, n){ _state.count += n || <span class="hljs-number">1</span>; }, decrement(){ state.count -= <span class="hljs-number">1</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">new</span> Vuex.Store({ state, getters, mutations }) <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">default</span> store</code></pre> <h4>getter 通过属性访问</h4> <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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <h3>count-{{$store.getters.total}}</h3> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html" style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>count-{{$store.getters.total}}<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span></code></pre> <h4>getter 通过方法访问</h4> <p>如果上面的方法想改变货币符号,那就要通过传参方式来解决</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="let getters = { total: (state) => (symbol) => {<br /> return (symbol || '$') + state.count;<br /> }<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">let</span> getters = { <span class="hljs-attr">total</span>: <span class="hljs-function">(<span class="hljs-params">state</span>) =&gt;</span> (symbol) =&gt; { <span class="hljs-keyword">return</span> (symbol || <span class="hljs-string">'$'</span>) + state.count; } }</code></pre> <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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <h3>count-{{$store.getters.total('¥')}}</h3> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html" style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>count-{{$store.getters.total('¥')}}<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span></code></pre> <h4>mapGetters 辅助函数</h4> <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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div> <h3>count-{{total('¥')}}</h3> </p></div> <p></template></p> <p><script> import common from '../../common/common.js' import {map<a href="http://www.js-code.com/tag/state" title="State" target="_blank">State</a>, mapMutations, mapGetters} from 'vuex'; <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { computed: { ...mapGetters([ 'total' ]) } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><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">h3</span>&gt;</span>count-{{total('¥')}}<span class="hljs-tag">&lt;/<span class="hljs-name">h3</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">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> common <span class="hljs-keyword">from</span> <span class="hljs-string">'../../common/common.js'</span> <span class="hljs-keyword">import</span> {map<a href="http://www.js-code.com/tag/state" title="浏览关于“State”的文章" target="_blank" class="tag_link">State</a>, mapMutations, mapGetters} <span class="hljs-keyword">from</span> <span class="hljs-string">'vuex'</span>; <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">computed</span>: { ...mapGetters([ <span class="hljs-string">'total'</span> ]) } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <h4>mapGetters 辅助函数之别名</h4> <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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div> <h3>count-{{amount('¥')}}</h3> </p></div> <p></template></p> <p><script> import common from '../../common/common.js' import {map<a href="http://www.js-code.com/tag/state" title="State" target="_blank">State</a>, mapMutations, mapGetters} from 'vuex'; <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { computed: { ...mapGetters({ amount: 'total' }) } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">template</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">h3</span>&gt;</span>count-{{amount('¥')}}<span class="hljs-tag">&lt;/<span class="hljs-name">h3</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">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> common <span class="hljs-keyword">from</span> <span class="hljs-string">'../../common/common.js'</span> <span class="hljs-keyword">import</span> {mapState, mapMutations, mapGetters} <span class="hljs-keyword">from</span> <span class="hljs-string">'vuex'</span>; <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">computed</span>: { ...mapGetters({ <span class="hljs-attr">amount</span>: <span class="hljs-string">'total'</span> }) } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p></code></p>

总结

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

Vue 教程第十五 篇—— Vuex 之 getter

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

Vue 教程第十五 篇—— Vuex 之 getter

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

80%的人都看过