33.VueJs学习-VueX/getter

在 Vuex 中，getters 起着重要的作用，它可以对 Vuex 的 state 进行派生计算和处理，提供更加灵活和可复用的数据处理方式。

一、基本概念

1.定义

• Getters 是一个对象，其中包含一些函数，这些函数接收 state 作为第一个参数，并且可以接收其他 getters 作为第二个参数（可选）。

const store = new Vuex.Store({
    state: {
        items: [
            {id: 1, name: 'wikiHong1', price: 30},
            {id: 2, name: 'wikiHong2', price: 32},
            {id: 3, name: 'wikiHong3', price: 34}
        ]
    },
    getters: {
        totalPrices: state => {
            return state.items.reduce((total, item) => total + item.price, 0)
        }
    }
})

在这个例子中，totalPrice getter 函数计算了items数组中所有物品价格的总和。

2.使用

• 在组件中，可以通过this.$store.getters来访问 getters。

  <template>
      <div>
          <p>total price: {{ total price}}</p>
      </div>
  </template>
  
  <script>
      export default {
          computed: {
              totalPrice () {
                  return this.$store.getters.totalPrice
              }
          }
      }
  </script>

二、高级用法

1.接收参数

• Getters 也可以接受参数，这使得它们更加灵活。

  const store = new Vuex.Store({
       state: {
         items: [
           { id: 1, name: 'Item 1', price: 10 },
           { id: 2, name: 'Item 2', price: 20 },
           { id: 3, name: 'Item 3', price: 30 }
         ]
       },
       getters: {
         filteredItems: (state) => (filter) => {
           return state.items.filter(item => item.name.includes(filter));
         }
       }
     });

• 在这个例子中，filteredItems getter 函数接受一个参数filter，用于过滤items数组中的物品。

2.组合getters

• Getters 可以相互调用，这使得可以在 getters 之间进行组合和复用。

     const store = new Vuex.Store({
       state: {
         items: [
           { id: 1, name: 'Item 1', price: 10 },
           { id: 2, name: 'Item 2', price: 20 },
           { id: 3, name: 'Item 3', price: 30 }
         ]
       },
       getters: {
         totalPrice: state => {
           return state.items.reduce((total, item) => total + item.price, 0);
         },
         averagePrice: (state, getters) => {
           return getters.totalPrice / state.items.length;
         }
       }
     });

• 在这个例子中，averagePrice getter 调用了totalPrice getter 来计算物品的平均价格。

三、作用和优势

1.数据处理和转换

• Getters 可以对 state 进行各种数据处理和转换操作，例如过滤、排序、计算总和等。这使得组件可以直接访问处理后的数据，而无需在组件内部进行重复的计算。

2.可复用性

• Getters 可以在多个组件中复用，提高了代码的可维护性和可复用性。如果需要对数据进行相同的处理，可以在 getters 中定义一次，然后在多个组件中使用。

3.缓存和性能优化

• Getters 的结果是缓存的，只有当它们依赖的 state 发生变化时才会重新计算。这可以提高应用的性能，特别是在处理大量数据或复杂计算时。

总之，Vuex 的 getters 提供了一种强大的方式来处理和派生 Vuex state 中的数据，使得数据处理更加灵活、可复用和高效。