Javascript is required
Weekly Vue News Logo
a { color: #42B883; text-decoration: none; } a:hover { color: #33a06f } .overflow-auto { overflow: auto } p {margin: 8px 0px} .ct-36e85c{color:#6A9955} .ct-8f9f80{color:#C8C8C8} .ct-ae5419{color:#808080} .ct-78eef5{color:#9CDCFE} .ct-0d8ec4{color:#B5CEA8} .ct-c2bbeb{color:#CE9178} .ct-c746e8{color:#DCDCAA} .ct-b1c360{color:#4FC1FF} .ct-220622{color:#569CD6} .ct-e8c10a{color:#C586C0} .ct-f3f815{color:#D4D4D4} FOLLOW_UP_PLACEHOLDER

#title Weekly Vue News #109 - Simple State Management With Composition API #preview Ready for your weekly Vue & Nuxt dose?

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:

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:

const state = reactive({ counter: 0 }) export const useState = () => { return {} }

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:

const state = reactive({ counter: 0 }) export const useState = () => { function setCounter(value: number) { state.counter = value } return { setCounter } }

For a getter, we can simply return the state:

const state = reactive({ counter: 0 }) export const useState = () => { const count = computed(() => state.counter) const doubleCount = computed(() => state.counter * 2) return { count, doubleCount } }

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

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

โšก Open DemoQuote of the weekCurated 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.
๐Ÿ“• 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.
๐Ÿ“• 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
๐Ÿ“• Improving Performance of Nuxt with NuxtImage
๐Ÿ‘‰๐Ÿป A tutorial about using Nuxt Image to deliver optimized images in Nuxt.
๐ŸŽ“ 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.
๐Ÿ› ๏ธ Berryjam (Alpha)
๐Ÿ‘‰๐Ÿป A free tool to analyze your Vue.js component usage.
FunCurated 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.
๐Ÿ“• 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.
๐Ÿ“• 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.
๐Ÿ“• 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.
๐Ÿ“• Git Tips And Tricks
๐Ÿ‘‰๐Ÿป This post contains some of the tips, tricks, and configurations to make our life easier day-to-day.
๐Ÿ“• 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.
๐ŸŽฎ 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:
๐Ÿ› ๏ธ GodMode
๐Ÿ‘‰๐Ÿป GodMode is an AI chat browser.
๐Ÿ‘‰๐Ÿป It allows you to chat with ChatGPT, Claude, Bard, Bing, and Llama2 all at the same time.
๐Ÿ› ๏ธ 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.
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
Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
Make sure to stay up to date about new features, best articles and tools in the Vue & Nuxt ecosystem by subscribing to the newsletter.Get one email per week | 100% free
I will never share any of your personal data.
ยฉ 2023 All rights reserved.