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