Vue核心概念Getter的使用方法
有時(shí)候我們需要從store中的state中派生出一些狀態(tài)。
如果有多個(gè)組件需要用到此屬性，我們要么復(fù)制這個(gè)函數(shù)，或者抽取到一個(gè)共享函數(shù)然后在多處導(dǎo)入它——無(wú)論哪種方式都不是很理想。
Vuex 允許我們?cè)趕tore中定義getter屬性（可以認(rèn)為是 store 的計(jì)算屬性）。就像計(jì)算屬性一樣，getter 的返回值會(huì)根據(jù)它的依賴(lài)被緩存起來(lái)，且只有當(dāng)它的依賴(lài)值發(fā)生了改變才會(huì)被重新計(jì)算。
比如這里我們?cè)赑age4.vue里面需要對(duì)商品價(jià)格加倍，我們就可以使用Getter。
使用Getter
store.js，我們?cè)趕tate下面加入getters里面有一個(gè)商品價(jià)格加倍的方法。
// 在分離出來(lái)的vuex文件中安裝 Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 每一個(gè)Vuex倉(cāng)庫(kù)中只能包含一個(gè)store實(shí)例
export const store = new Vuex.Store({
state: { // 把頁(yè)面顯示數(shù)據(jù)寫(xiě)在store.js文件
goodsList: [
{ name: '贛州橙子', price: '8.8' },
{ name: '新疆哈密瓜', price: '2.0' },
{ name: '山東大棗', price: '3.2' },
{ name: '陽(yáng)澄湖大閘蟹', price: '10.0' }
]
},
// getters是vuex中的計(jì)算屬性對(duì)象
getters: {
//商品價(jià)格加倍;其中g(shù)oodsPriceDoubble(state)中有一個(gè)state參數(shù)表示state中的數(shù)據(jù)對(duì)象
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中的對(duì)應(yīng)的回調(diào)函數(shù)的函數(shù)名
return this.$store.getters.goodsPriceDoubble;
}
}
顯示效果就是page4的商品價(jià)格加倍了。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接
相關(guān)文章
Vue拖拽組件列表實(shí)現(xiàn)動(dòng)態(tài)頁(yè)面配置功能
這篇文章主要介紹了Vue拖拽組件列表實(shí)現(xiàn)動(dòng)態(tài)頁(yè)面配置功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了10分鐘教你快速上手Vue3中新增的API,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
本篇文章主要介紹了Vue.js -- 過(guò)濾器使用總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
Vue3中結(jié)合ElementPlus實(shí)現(xiàn)彈窗的封裝方式
這篇文章主要介紹了Vue3中結(jié)合ElementPlus實(shí)現(xiàn)彈窗的封裝方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
vue中引入高德地圖并多點(diǎn)標(biāo)注的實(shí)現(xiàn)步驟
這篇文章主要介紹了vue中引入高德地圖并多點(diǎn)標(biāo)注,實(shí)現(xiàn)步驟是通過(guò)vue的方法引入地圖，初始化地圖，設(shè)置寬和高，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細(xì)介紹了Vue.js render方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了關(guān)于vue編譯版本引入的問(wèn)題的解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)下拉菜單效果，運(yùn)用了hover顯示與隱藏以及定位，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
vue使用canvas畫(huà)布實(shí)現(xiàn)平面圖點(diǎn)位標(biāo)注功能(最新推薦)
這篇文章主要介紹了vue使用canvas畫(huà)布實(shí)現(xiàn)平面圖點(diǎn)位標(biāo)注功能,經(jīng)過(guò)本文一番研究發(fā)現(xiàn)canvas標(biāo)簽可以完成很多功能，電子簽名，點(diǎn)位標(biāo)注，問(wèn)題標(biāo)注，畫(huà)圖功能，感興趣的朋友跟隨小編一起看看吧2023-07-07
vue computed的set方法無(wú)效問(wèn)題及解決
這篇文章主要介紹了vue computed的set方法無(wú)效問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11