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