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