基于Nuxt3的Supabase查询需求：按货币分组求和金额

方案一：数据库端聚合查询（推荐） #

直接让Supabase数据库完成分组求和，效率更高且减少数据传输量：

const client = useSupabaseClient()
const { data: expenseSummary } = await useAsyncData('expense-summary', async () => {
  const { data, error } = await client
    .from('expenses')
    .select('currency, sum(amount) as total_amount')
    .group('currency')
  
  if (error) throw error
  
  // 转换为你需要的键值对格式
  return data.reduce((acc, item) => {
    acc[item.currency] = item.total_amount
    return acc
  }, {})
})

console.log('分组求和结果:', expenseSummary.value)

这段代码用sum(amount)聚合函数配合group('currency')，让数据库直接按货币类型计算总和，最后通过reduce把数组结果转成{ 0: 33800, 1: 10 }这样的对象格式。

方案二：前端本地处理 #

如果不想修改原有查询逻辑，也可以拿到全量数据后在前端计算：

const client = useSupabaseClient()
const { data: expenses } = await useAsyncData('count', async () => {
  const { data, count } = await client.from<Expenses>('expenses').select('amount, currency', { count: 'exact' })
  return { data, count }
})

// 前端分组求和逻辑
const result = expenses.value?.data.reduce((acc, item) => {
  const currency = item.currency
  acc[currency] = (acc[currency] || 0) + item.amount
  return acc
}, {}) || {}

console.log('分组求和结果:', result)

通过reduce遍历所有数据，按currency字段累加对应的amount值，最终得到目标格式的结果。

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