使用Pinia存储VUEJS将两个数组合并为一个唯一的数组

Question

我正在尝试合并两个数组"订单"one_answers"产品"，并创建合并的第三个数组。每个"Orders"数组都包含代表"products id"的"shared"值，这就是我过滤和合并它们的方式，因为我有很多数组。如果我在本地运行合并两个数组的函数，它会起作用，但我正在努力将此函数作为Pinia存储中的操作，并创建"合并"的第三个数组，然后全局使用它。我将vuejs 3与pinia一起使用，数据来自firebase。在代码中，数组中的示例合并是我想要的结果。

import { defineStore } from 'pinia'
import { collection, onSnapshot, doc, updateDoc, deleteDoc, addDoc, collectionGroup, query, where } 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: [
{
id: 'id1',
name: 'Smith',
address: 'something',
product: 'Lorem ipsum dolor saxime.',
productivity: 3,
shared: 'id1'
},
{
id: 'id2',
name: 'Apple',
address: 'good',
product: 'Woo!',
productivity: 2,
shared: 'id2'
}
],
}
},
actions: {

这就是当我在本地使用它时起作用的功能：

<script setup>
import { useStoreOrders } from '@/store/storeOrders'
import { ref } from 'vue'
const storeOrders = useStoreOrders()
let merged = [];
for(let i=0; i<storeOrders.orders.length; i++) {
merged.push({
...storeOrders.orders[i], 
...(storeOrders.products.find((itmInner) => itmInner.id === storeOrders.orders[i].shared))}
);
}

Answer 1

您可以声明action或getter来实现这一点。

import { defineStore } from 'pinia'
interface State {
orders: any[]
products: any[]
mergedOrders: any[]
}
export const useOrdersStore = defineStore('orders', {
state: (): 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,
},
],
mergedOrders: [],
}
},
actions: {
mergeOrders() {
this.mergedOrders = this.orders.map((order) => {
const product = this.products.find((p) => p.id === order.shared)
return product ? { ...order, ...product } : order
})
},
},
// You could also chose use a getter to return the merged orders
getters: {
merged(state: State): any {
return state.orders.map((order) => {
const product = state.products.find((p) => p.id === order.shared)
return product ? { ...order, ...product } : order
})
},
},
})

在您的组件中，只需实例化存储并调用您的操作：

const ordersStore = useOrdersStore()
ordersStore.mergeOrders()