Vue3+Pinia实现Firebase产品表过滤及平均生产率计算

Pinia的getter要接收参数的话，需要让它返回一个函数，这样就能在调用时传入product参数来过滤数据了。修改你的getter代码如下：

getters: {
  getAve: (state) => (targetProduct) => {
    // 过滤出当前产品的所有条目
    const filteredOrders = state.orders.filter(order => order.product === targetProduct)
    
    // 处理没有匹配数据的情况，避免除以0
    if (filteredOrders.length === 0) {
      return 0
    }
    
    // 计算productivity总和
    const sum = filteredOrders.reduce((total, order) => total + order.productivity, 0)
    
    // 返回平均值
    return sum / filteredOrders.length
  }
}

代码说明： #

• 把原来的getter改成返回函数的形式：(state) => (targetProduct) => {...}，这样调用getAve('某产品')时就能拿到对应产品的平均值
• 用filter方法筛选出product等于传入参数的订单
• 先判断筛选后的数组长度，如果为0直接返回0，防止出现NaN
• 用reduce计算总和（比forEach更简洁），最后除以数量得到平均值

模板调用 #

你计划的调用方式是对的，在v-for循环里直接传product参数就行：

<template>
  <!-- 假设这里是你的v-for循环 -->
  <div v-for="order in orders" :key="order.id">
    {{ order.product }} 的平均生产力：{{ getAve(order.product) }}
  </div>
</template>

内容的提问来源于stack exchange，提问作者BeEmil