Apologies for the format of the question, it’s a bit late here and I couldn’t find a way to state my ideas more clearly. Maybe I am just trying too hard and overcomplicating something that is already a simple thing to do.
I just want to know how dumb this is (to discard the idea) or if there are glaring improvements I could make to this implementation.
The setup:
- FWIW This is Vue3 + TS + Pinia
- I have a “base” drawer component
- Ideally I don’t want to reuse it by implementing it over and over (because I have many such drawers (forms) to display) and I need to implement logic to keep track of the state within each drawer implementation.
- So I wrapped it in yet-another-component which is paired to a [Pinia] store.
- This component has child components registered and “knows every single one”
- “Triggering” the drawer is now a matter of calling the method in the store that shows the drawer.
- Upon updating the store, this component will swap the appropriate child form and execute the “confirm” action declared in the current child component (form) being rendered.
What doesn’t feel right:
- Using the store for this purpose in the first place.
- When implementing the children forms, I would need to also hook the different pieces to the store.
- And most importantly IMO, for maintenance purposes, anyone would need to know how this is done. (Especially worried about the
confirmActionwhich is usually a “save” action) - I kind of feel like I am missing something and could use another feature of the framework, but can’t quite pinpoint what it could help me more in this case.
