Vue核心概念Getter的使用方法
有時(shí)候我們需要從store中的state中派生出一些狀態(tài)。
如果有多個(gè)組件需要用到此屬性，我們要么復(fù)制這個(gè)函數(shù)，或者抽取到一個(gè)共享函數(shù)然后在多處導(dǎo)入它——無論哪種方式都不是很理想。
Vuex 允許我們?cè)趕tore中定義getter屬性（可以認(rèn)為是 store 的計(jì)算屬性）。就像計(jì)算屬性一樣，getter 的返回值會(huì)根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算。
比如這里我們?cè)赑age4.vue里面需要對(duì)商品價(jià)格加倍，我們就可以使用Getter。
使用Getter
store.js，我們?cè)趕tate下面加入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ì)算屬性對(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緩存組件keepalive的相關(guān)資料,keep-alive組件是使用 include exclude這兩個(gè)屬性傳入組件名稱來確認(rèn)哪些可以被緩存的，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2022-08-08
Vue源碼解析之?dāng)?shù)組變異的實(shí)現(xiàn)
這篇文章主要介紹了Vue源碼解析之?dāng)?shù)組變異的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
這篇文章主要介紹了深入理解Vuex的作用，對(duì)Vuex感興趣的同學(xué)，可以參考下2021-05-05
Vue做一個(gè)簡(jiǎn)單的隨機(jī)點(diǎn)名冊(cè)
這篇文章主要介紹的是如何用Vue做一個(gè)簡(jiǎn)單的隨機(jī)點(diǎn)名冊(cè)，主要是做個(gè)簡(jiǎn)單的點(diǎn)名器，不做樣式,需要的朋友可以參考一下，希望對(duì)你有所幫助2021-12-12
本文主要介紹了基于Vue3的全屏拖拽上傳組件，其實(shí)思路上與其他拖拽上傳組件基本一樣,都是指定一個(gè)區(qū)域可拖拽,然后讀取文件在上傳，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-09-09
Vue移動(dòng)端項(xiàng)目實(shí)現(xiàn)使用手機(jī)預(yù)覽調(diào)試操作
這篇文章主要介紹了Vue移動(dòng)端項(xiàng)目實(shí)現(xiàn)使用手機(jī)預(yù)覽調(diào)試操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue之如何實(shí)現(xiàn)打印功能問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要給大家介紹了關(guān)于Vue中forEach()使用方法的相關(guān)資料,forEach和map是數(shù)組的兩個(gè)方法,作用都是遍歷數(shù)組,在vue項(xiàng)目的處理數(shù)據(jù)中經(jīng)常會(huì)用到,需要的朋友可以參考下2023-09-09
vue項(xiàng)目中的public、static及指定不編譯文件問題
這篇文章主要介紹了vue項(xiàng)目中的public、static及指定不編譯文件問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue中的 mixins 和 provide/inject詳解
這篇文章主要介紹了Vue中的 mixins 和 provide/inject詳解,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07