vuex使用前與使用后的寫法---getters（獲取事件）

如果有多個組件需要用到此屬性，我們要么復制這個函數，或者抽取到一個共享函數然后在多處導入它——無論哪種方式都不是很理想。

Vuex 允許我們在 store 中定義“getter”（可以認為是 store 的計算屬性）。就像計算屬性一樣，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算。

Getter 接受 state 作為其第一個參數。

 

需求：將原商品價格調為半價

實現效果如下圖：

 

 

使用vuex中的getters前，

若多個組件使用同一函數，需要在各自組建中編寫調用此函數，造成代碼冗余，如下代碼，組件productListOne和productListTwo都需用到saleProducts（）這個函數

// productListOne.vue

<template>
<div id="product-list-one">
<h2>Product-List-One</h2>
<ul>
<li v-for="product in saleProducts">
<span class="name">{{product.name}}</span>
<span class="price">${{product.price}}</span> 
</li>
</ul> 
</div>
</template>

<script>
export default {

// 通過調用方法獲取store.js里的數據
computed: {
products() {
return this.$store.state.products
},
saleProducts() {
var saleProducts = this.$store.state.products.map(product =>{ // map遍歷
return {
name: "**" + product.name + "**",
price: product.price / 2
};
})
return saleProducts 
}
}
}
</script>

 

 

使用vuex后，將調用的函數放在store.js

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

// 通過use讓vue使用vuex
Vue.use(Vuex)

// 設定store,必須通過export暴露出去
export const store = new Vuex.Store({
state: {
products:[
{name:"馬雲",price:200},
{name:"馬化騰",price:140},
{name:"馬冬梅",price:20}, 
{name:"馬蓉",price:10}, 
]
},
getters: {
saleProducts: (state) => {
var saleProducts = state.products.map(product =>{ // 這里就不需要this.$store了
return {
name: "**" + product.name + "**",
price: product.price / 2
};
});
return saleProducts
} 
} 
});
子組件中，

<template>
<div id="product-list-one">
<h2>Product-List-One</h2>
<ul>
<li v-for="product in saleProducts">
<span class="name">{{product.name}}</span>
<span class="price">${{product.price}}</span> 
</li>
</ul> 
</div>
</template>

 

 

<script>
export default {

// 通過調用方法獲取store.js里的數據
computed: {
products() {
return this.$store.state.products
},
saleProducts() {
return this.$store.getters.saleProducts; // 通過this.$store.getters將函數return出去
}
}
}
</script>
————————————————
版權聲明：本文為CSDN博主「mandyucan」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/Mandyucan/java/article/details/84872810