如何在Vue中使用Getter?很多新手對此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來學(xué)習(xí)下,希望你能有所收獲。

使用Getter
store.js,我們在state下面加入getters里面有一個(gè)商品價(jià)格加倍的方法。
// 在分離出來的vuex文件中安裝 Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 每一個(gè)Vuex倉庫中只能包含一個(gè)store實(shí)例
export const store = new Vuex.Store({
state: { // 把頁面顯示數(shù)據(jù)寫在store.js文件
goodsList: [
{ name: '贛州橙子', price: '8.8' },
{ name: '新疆哈密瓜', price: '2.0' },
{ name: '山東大棗', price: '3.2' },
{ name: '陽澄湖大閘蟹', price: '10.0' }
]
},
// getters是vuex中的計(jì)算屬性對象
getters: {
//商品價(jià)格加倍;其中g(shù)oodsPriceDoubble(state)中有一個(gè)state參數(shù)表示state中的數(shù)據(jù)對象
goodsPriceDoubble: state => {
let goodsPriceDoubble = state.goodsList.map(currentValue => {
return {
name: currentValue.name,
price: currentValue.price *2
}
})
return goodsPriceDoubble;
}
}
})在page4.vue里面修改成如下:
<ul class="ul_list">
<li v-for="item in goodsPriceTwo">
<p class="name">商品:{{item.name}}</p>
<p class="price">價(jià)格:¥{{item.price}}</p>
</li>
</ul>在computed中加入如下方法:
computed: {
goodsPriceTwo() {
//this.$store.getters.vuex getters中的對應(yīng)的回調(diào)函數(shù)的函數(shù)名
return this.$store.getters.goodsPriceDoubble;
}
}顯示效果就是page4的商品價(jià)格加倍了。

看完上述內(nèi)容是否對您有幫助呢?如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章,請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝您對創(chuàng)新互聯(lián)的支持。
文章題目:如何在Vue中使用Getter-創(chuàng)新互聯(lián)
網(wǎng)頁URL:http://www.chinadenli.net/article16/djcogg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供動態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作、商城網(wǎng)站、網(wǎng)站策劃、移動網(wǎng)站建設(shè)、搜索引擎優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容