[Vuejs]-Vue: share a vue element between child components

3👍

When your Vue app is transitioning to something that has heavy coupling between components via props, as in your case, it is best to use state management.

State management has a global "store" where you can define the state (or multiple states), view (getters) and actions (setters). With this management model, you can hold "global" data that can be shared across multiple components. Read more about it here.

An example of this is storing user session info (i.e. username, email, etc.), or in your case, apple data (state) which can be accessed (view) and changed (action).

Vuex is usually the go-to, but that has transitioned to Pinia – so I recommend using that.

1👍

As described, a state management is extremely useful. Another solution is creating your own composable functions instead of using a store library e.g. Pinia.

A good explanation you find in this article: https://michael-verschoof.medium.com/keep-state-easily-using-a-composable-in-vue-3-2e01b2c68d7f

Leave a comment