I’m fairly new to Vue and when integrating Pinia store state management into my project, I could not decide on the best approach to do so. I’m using the Composition API.

I have a Pinia store containing, let’s say, Products. Products contain several distinct pieces of information (product details, reviews, tags, etc.). All of this information is contained within a single Product instance/document with a single ID. I have different Vue components which focus on different parts of Product information.

So for sake of the example, imagine I select one such Product in a side drawer and then show a page with multiple Vue components, each handling their part of the Product. What would be the best way to provide each component with its state? Assuming the page is provided the Product ID via the url and the page retrieves the Product from the store, do I:

1. Provide a reference to the Product instance to each component via the Props mechanism?
2. Provide the Product ID to each component via the Props mechanism and let those components retrieve their own Product from state management?
3. Provide a reference to the specific Product information to each component via the Props mechanism?
4. Any other, better, approach.

I’ve tried variations of options 1 and 3, but it somehow does not feel right to exchange references to a Product instance between components. And I’m not sure if it’s common to access the Pinia store directly using the Product ID in each component.