Merge two arrays into one unique array by using Pinia store VUEJS-CodePudding

I am trying to merge two arrays 'orders' and 'products' and creating third array merged. Each 'Orders' array contains value of 'shared' which represents 'products id', that's how I am filtering and merging them together since I have many arrays. If I run locally function of merging two arrays it works but I am strugling to make this function as action in Pinia store and create this third array 'merged' and then use it globally. I use vuejs 3 with pinia and the data comes from firebase. In code Example in array merged is my desired result.

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: {

and this is the function which works when I use it locally:

<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))}
   );
 }

CodePudding user response：

You can declare either a action or a getter to achieve this.

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
      })
    },
  },
})

In your component just instantiate the store and call your action :

const ordersStore = useOrdersStore()
ordersStore.mergeOrders()