标签：vue exp import 商品 class 根据 lis product log
如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。
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
vuex使用前与使用后的写法---getters（获取事件）
标签：vue exp import 商品 class 根据 lis product log
原文地址：https://www.cnblogs.com/water-no-moon/p/12984170.html
