Simple State Management With Composition API

Hi 👋

This issue is packed full of great content 💪🏻.

I share an interesting Vue tip on how you can create simple state management solution with Composition API.

Additionally, you get a curated list of Vue, Nuxt and web development related articles and tools.

Have a lovely week ☀️

To support me:

• 😘 Recommend the newsletter to your friends: it really helps!
• 💸 Sponsor the newsletter
• 🧵 Retweet the latest Twitter thread
• 📨 Reply to this email: feedback is welcome

You might think that you need a state management library like Pinia to manage your state, but that's not always the case.

If you have a small application that only needs to share state between a few components, you can use the Composition API to create a simple state management solution.

Let me show you how you can build a simple state management solution with the Composition API which contains state, mutations/actions, and getters.

Let's start by defining the state using a reactive object inside a useState.ts composable:

By lifting the state outside the composable function, it can be shared between multiple components. Read more at "Share Composable State Across Components".

Next, we need to define the mutations/actions that can update the state. All we need to do is to add a function that updates the state:

For a getter, we can simply return the state:

You might wonder why you should use a store library like Pinia if you could just use the Composition API to build a simple state management solution. The answer is provided in Pinia documentation and here are some of the reasons. Pinia provides:

• Devtools support
• Hot module replacement
• Plugins: extend Pinia features with plugins
• Proper TypeScript support or autocompletion for JS users
• Server Side Rendering (SSR) Support

You can try our simple state management solution in the following StackBlitz:

Until next week,