#title Weekly Vue News #109 - Simple State Management With Composition API #preview Ready for your weekly Vue & Nuxt dose?
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
If you have a small application that only needs to share state between a few components, you can use the
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
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:
Make sure to only return read-only state from your composable. A computed property is read-only by default but you can also use the
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
- 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:
๐๐ป Free conference on October 18th, 2023 to October 19th, 2023. |
๐๐ป Join 21,000 fellow Nuxt & Vue Developers to learn everything Nuxt offers in 2023. |
๐๐ป The choice between Vue.js and Nuxt.js hinges on a variety of factors and considerations. |
๐๐ป This article delves into these factors and considerations. |
๐๐ป This article dives into how to effectively use Vue Devtools to make debugging easier. |
๐๐ป Vue Devtools is a powerful debugging tool that can debug components, states, events, props, routes, and more |
๐๐ป A tutorial about using Nuxt Image to deliver optimized images in Nuxt. |
๐๐ป An in-depth online course led by Eduardo San Martin Morote, the creator of Pinia. |
๐๐ป Join the waitlist to gain early acces on release. |
๐๐ป A free tool to analyze your Vue.js component usage. |
๐๐ป This article answers the age-old question of what to test vs. what not to test. |
๐๐ป This post will guide you on a journey through some advanced TypeScript features like Generics and Advanced Function Types. |
๐๐ป Automating the testing and deployment of your apps is mandatory to avoid wasting time or making mistakes. |
๐๐ป This article will show you how to go about achieving this goal. |
๐๐ป Dropbox reduced its JavaScript bundles by 33% by replacing its outdated module bundler with Rollup. |
๐๐ป The existing system led to large bundle sizes and performance issues. |
๐๐ป This post contains some of the tips, tricks, and configurations to make our life easier day-to-day. |
๐๐ป JavaScript is famously an asynchronous programming language. |
๐๐ป In this tutorial, you will learn everything you need to know about using promises and async/await in JavaScript. |
๐๐ป This is a game where you are the operating system of a computer. |
๐๐ป As such, you have to manage processes, memory and I/O events. |
๐๐ป Play it here: https://plbrault.github.io/youre-the-os |
๐๐ป GodMode is an AI chat browser. |
๐๐ป It allows you to chat with ChatGPT, Claude, Bard, Bing, and Llama2 all at the same time. |
๐๐ป TypeStat converts JavaScript into TypeScript and modifies TypeScript types in existing code. |
๐๐ป It can add and remove types without changing runtime behavior. |
๐๐ป It can also infer types and annotate missing nulls and undefineds. |
Until next week,
Holzapfelkreuther Str. 19, 81375 Munich, Germany