Vue Composition api - Provide/Inject models

[svenhue]

All of my frontend projects come basically from one codebase, build with vue composition api - composables. So i can reuse all of my components and the logic

When creating different applications which can be deeply nested i really like vues provide and inject features.

When we look at the "view" from the flux pattern - we see an component which retrieves all the data from the store and passes it (trhough props, fallthrough props) to the child components. -> https://facebook.github.io/flux/docs/in-depth-overview/

Problem ist as mentioned, the apps can be really deep nested. So vue fixed that with provide/ inject.

In theory, i can do (from my view): provide('modelname', value, {we can also pass additional functions that can be executet from the child an mutate the store}) and at my child i do : const { model, somefunctions }= inject('modelname)

BUT
....i want resusability
--->>> So actually we could add some field to the model which is a boolean and decides if the store provides a value (model) automatically

Then i do somethind like this in my child: inject('modelname + id? ') and finished!
If we want to mutate or actions, just pass the functions within the provide from the view (component)
Note the id is important for me because i want to associate my datamodels with my components

Gracias!

[svenhue]

possible advantage: cleaner templates, no need to import the repo in every component while dont pass the data through the props

[CodeDredd]

I had to think about what you write. Becuase of the composable way of pinia, pinia already provides the pinia store. And in with the usage of useStore we inject the repo (store). So isn't this kind of double ?

[svenhue]

Yes it's kind of double.