Best means of utilizing a generic component across different stores?

[hoodnoah]

I am working on a Vue app for which I have defined two stores, one for "items" and one for "regions."

I permit the user to select a series of items and regions by making use of a generic component; the component's behavior is identical across instances of itself, the only difference being the data it operates on.

Right now, I'm doing what feels like a lot of prop drilling and event bubbling. I instantiate the stores at the App.vue level, and then pass the requisite store data through props, and update them at the App.vue level by using events. But in so doing, I've rewritten a lot of logic that does the same thing multiple times.

It seems there must be a better way to do this. I am aware of the concept of using useStore in child components; I just don't understand how I would make the child component know which store to use. And if the solution is a single consolidated store, I don't know how to make the child component know which elements it's working on (regions or items).

[Yordan-Ramchev]

@hoodnoah If I understand correctly, it should look something like this.

const store = computed(() => {
  if (props.storeType=== 'regions') {
    return useRegionsStore();
  } else if (props.storeType=== 'items') {
    return useItemsStore();
  }
  return null;
});

You can create a computed that can be initialized based on prop that is passed. (and you will have to write a lot of if-else statements to cover different cases)

Have you thought about splitting the component into different chunks/components? Sometimes repeating parts of component/code makes sense. Something like AppRegions.vue & AppItems.vue that will use smaller chunks from the generic component and handle all the stuff that is related with their data.