在Vue3 Pinia Store中实现Orders与Products数组合并并全局调用

步骤1：修正State里的语法错误 #

你提供的Pinia代码存在几处语法问题，比如对象属性缺逗号、冗余闭合括号，先修正这些基础问题：

import { defineStore } from 'pinia'
import { collection, onSnapshot } from "firebase/firestore"
import { db } from '@/firebase/firebase'
import { useStoreAuth } from '@/store/storeAuth'

export const useStoreOrders = defineStore('storeOrders', {
  state: () => {
    return { 
      orders: [
        {
          id: 'id1',
          name: 'Smith',
          address: 'something',
          shared: 'id1'
        },
        {
          id: 'id2',
          name: 'Apple',
          address: 'good',
          shared: 'id2'
        }
      ],
      products: [
        {
          id: 'id1',
          product: 'Lorem ipsum dolor saxime.',
          productivity: 3
        },
        {
          id: 'id2',
          product: 'Woo!',
          productivity: 2
        }
      ],
      merged: [] // 先初始化空数组，后续通过Action填充
    }
  },

步骤2：添加合并数组的Action #

把你本地验证可行的合并逻辑封装成Pinia的Action，直接修改State里的merged数组：

actions: {
    // 核心合并逻辑
    mergeOrdersAndProducts() {
      this.merged = this.orders.map(order => {
        const matchedProduct = this.products.find(product => product.id === order.shared)
        return { ...order, ...matchedProduct }
      })
    },
    // 异步加载Firebase数据并触发合并
    loadFirebaseData() {
      // 监听orders集合实时变化
      const ordersCol = collection(db, 'orders')
      onSnapshot(ordersCol, (snapshot) => {
        this.orders = snapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data()
        }))
        this.mergeOrdersAndProducts()
      })

      // 监听products集合实时变化
      const productsCol = collection(db, 'products')
      onSnapshot(productsCol, (snapshot) => {
        this.products = snapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data()
        }))
        this.mergeOrdersAndProducts()
      })
    }
  }
})

步骤3：组件中调用与使用 #

在Vue组件里调用加载数据的Action，之后直接使用Store中的merged数组即可：

<script setup>
import { useStoreOrders } from '@/store/storeOrders'
import { onMounted } from 'vue'

const storeOrders = useStoreOrders()

onMounted(() => {
  storeOrders.loadFirebaseData()
})
</script>

<template>
  <div v-for="item in storeOrders.merged" :key="item.id" class="merged-item">
    <p>客户：{{ item.name }}</p>
    <p>地址：{{ item.address }}</p>
    <p>商品：{{ item.product }}</p>
    <p>产能：{{ item.productivity }}</p>
  </div>
</template>

补充说明 #

• 用map替代for循环，代码更简洁易维护
• 借助Firebase的onSnapshot，每次数据更新都会自动重新合并，保证merged数组实时同步
• 如果不需要实时监听数据，可将onSnapshot替换为getDocs实现一次性加载

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