Weekly Vue News #109 - Simple State Management With Composition API

View and discuss online,

Weekly Vue News #109 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

Vue Tip: Simple State Management With Composition API

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.

Build 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:

useState.ts 1 const state = reactive({ counter: 0 }) 2 3 export const useState = () => { 4 return {} 5 }

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:

useState.ts 1 const state = reactive({ counter: 0 }) 2 3 export const useState = () => { 4 function setCounter(value: number) { 5 state.counter = value 6 } 7 8 return { setCounter } 9 }

For a getter, we can simply return the state:

useState.ts 1 const state = reactive({ counter: 0 }) 2 3 export const useState = () => { 4 const count = computed(() => state.counter) 5 const doubleCount = computed(() => state.counter * 2) 6 7 return { count, doubleCount } 8 }

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 readonly function provided by Vue.

Why Pinia?

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

StackBlitz

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

⚡ Open Demo

Quote of the week

Curated Vue & Nuxt Content

📅 Nuxt Nation Conference 👉🏻 Free conference on October 18th, 2023 to October 19th, 2023. 👉🏻 Join 21,000 fellow Nuxt & Vue Developers to learn everything Nuxt offers in 2023. nuxtnation.com

📕 Choosing Between Vue.js and Nuxt.js: The Development Dilemma 👉🏻 The choice between Vue.js and Nuxt.js hinges on a variety of factors and considerations. 👉🏻 This article delves into these factors and considerations. levelup.gitconnected.com

📕 Debugging Magic with Vue Devtools 👉🏻 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 vueschool.io

📕 Improving Performance of Nuxt with NuxtImage 👉🏻 A tutorial about using Nuxt Image to deliver optimized images in Nuxt. dev.to

🎓 Mastering Pinia 👉🏻 An in-depth online course led by Eduardo San Martin Morote, the creator of Pinia. 👉🏻 Join the waitlist to gain early acces on release. masteringpinia.com

🛠️ Berryjam (Alpha) 👉🏻 A free tool to analyze your Vue.js component usage. www.berryjam.dev

Fun

Curated Web Development Content

📕 To test or not to test, a technical perspective 👉🏻 This article answers the age-old question of what to test vs. what not to test. web.dev

📕 TypeScript's Generics and Advanced Function Types 👉🏻 This post will guide you on a journey through some advanced TypeScript features like Generics and Advanced Function Types. engineering.leanix.net

📕 Create a CI/CD pipeline for frontend projects 👉🏻 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. blog.openreplay.com

📕 How we reduced the size of our JavaScript bundles by 33% 👉🏻 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. dropbox.tech

📕 Git Tips And Tricks 👉🏻 This post contains some of the tips, tricks, and configurations to make our life easier day-to-day. www.justinjoyce.dev

📕 How to Use JavaScript Promises 👉🏻 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. www.freecodecamp.org

🎮 You're the OS 👉🏻 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 github.com

🛠️ GodMode 👉🏻 GodMode is an AI chat browser. 👉🏻 It allows you to chat with ChatGPT, Claude, Bard, Bing, and Llama2 all at the same time. github.com

🛠️ TypeStat 👉🏻 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. github.com

Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator)

Share via Facebook Twitter LinkedIn

Unsubscribe from this newsletter Holzapfelkreuther Str. 19, 81375 Munich, Germany