Sharing State with useState

Breaking up our application into multiple pages and components can often present challenges. One of those is how we share state or data between them. We may fetch a user in one component and also need to access the data in others.

Current solutions

Some solutions to this include a regular JavaScript file, a composable file, and props. Regular JavaScript files can be used, and we export any data or functions we need in other parts of our project. Composable files also work in a similar way, creating a standalone file we can import where we need to access it.

A traditional solution with Nuxt or Vue.js is to use props. Data can be passed down from a parent to a child component. If we organize the component structure to accommodate our data being in a parent component, this can also be a good option. This can also become complex when we are passing data down multiple levels and even more so when triggering custom events.