How to dynamically decide which imported store i have to use from another store?

[ozoono]

Hi, let's imagine i have a main store that is using another two stores. In this main store i have a function that receive some parameters, and depending of one of them (type) I have to use the corresponding imported store.

import { defineStore } from 'pinia'
import { useArticleWebcamStore } from './webcam.store'
import { useArticleLaptopStore } from './laptop.store'

export const useMainStore = defineStore('main', () => {
  const articleWebcamStore = useArticleWebcamStore()
  const articleLaptopStore = useArticleLaptopStore()
  
  function addItem(type, name) {
    // call to addNewItem() of the store relative to type
  }
  
  return {
    addItem
  }
})

Then, if i have in my component:
mainStore.addItem('LAPTOP', 'Lenovo L540')

I want then call:
articleLaptopStore.addNewItem('Lenovo L540')

I could add a switch, and depending of type value, call articleWebcamStore.addNewItem() or useArticleLaptopStore.addNewItem()... but i would like to do it in a more generic way (perhaps in the future i have to use another 10 stores).

Is there any way of dynamically generate the reference to the right store every time I use addItem ?

Thanks.

[angelhdzmultimedia]

If addItem function can be asynchronous, you can import the stores dynamically using template literal:

https://stackblitz.com/edit/vitejs-vite-7jamvv?file=src%2Fstores%2Fmain.store.js

Otherwise:

const stores = {
  WEBCAM: useArticleWebcamStore,
  LAPTOP: useArticleLaptopStore,
  // Add more
}

 function addItem(type, name) {
   const store = stores[type]()
   store.addNewItem(name)
  }

Wish you lots of health, peace, and success. 👋🔥💚