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