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>