> Canonical URL: https://codingcat.dev/podcast/2-42-Pinia-Vue-New-State-Management

# Pinia Vue’s New State Management

🎧 Podcast Episode · S2E42October 5, 2022[#WebDev](/topic/webdev)[![](/logos/tags/storyblok-symbol-light.svg)![](/logos/tags/storyblok-symbol-dark.svg)Storyblok](/topic/storyblok)

# Pinia Vue’s New State Management

![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/e9e4314f20b5cec30b40b39872a718596e0da2fb-1920x1080.jpg?w=1920&h=1080&q=82&fit=max&auto=format)[@CodingCatDev62.5K / 100K Subscribers Goal](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Subscribe on YouTube→](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Watch on YouTube App ↗](https://www.youtube.com/watch?v=c9HzsWFjTfM&list=UUnKZ8gEb78zXKMi1ns-IQ2g)[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Brittney Postma](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/f25e504779cb6ebb7c0dd7df367f2c7490e17784-735x735.png?w=96&h=96&q=82&fit=max&auto=format)Brittney Postma](/author/brittney-postma)[![Eduardo San Martin Morote](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/4e6b56ba2a00d2d3eaf5fbd67e780a5977f1254d-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Eduardo San Martin Morote](/guest/eduardo-san-martin-morote)🎧 Listen & Subscribe[Spotify](https://open.spotify.com/episode/3D3qGwlpKEXf8FDaz2lALw)[Apple](https://podcasts.apple.com/us/podcast/2-42-pinia-vues-new-state-management/id1491655542?i=1000581698842)[YouTube](https://www.youtube.com/watch?v=c9HzsWFjTfM&list=PLUKgAjyG9B0ZhUEXp9eVa7h4L__FDW3uV)[Subscribe on YouTube (62.5K / 100K) →](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Pocket Casts](https://pca.st/episode/4083018e-118c-4ea2-a83a-691b863ac1bc)[Castbox](https://castbox.fm/episode/id2508485-id538187909)[Castro](https://castro.fm/episode/tEwROV)[Overcast](https://overcast.fm/itunes1491655542)[RSS](https://anchor.fm/s/115b203c/podcast/rss)

## Episode Sponsors.

[![CodingCat.dev tutorial cover image](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/1564a576c0c19e1b857c9bfba3cfb6364e7af223-2400x1350.jpg?w=1920&q=82&fit=max&auto=format)Partner & Sponsor

### Storyblok

Have you already discovered Storyblok? They have an official Svelte SDK! 74,000 + developers & marketers use it to deliver powerful content experiences on any frontend: Websites, eCommerce, mobile apps, AR/VR, or voice content!](https://www.storyblok.com/?utm_source=codingcat&utm_medium=sponsor&utm_campaign=AWA_SPON_PURRFECT_TRA&utm_content=purrfect-podcast)

**Pinia Vue’s New State Management ** is a CodingCat.dev podcast episode featuring Eduardo San Martin Morote alongside Alex Patterson and Brittney Postma focused on WebDev. We sat down with Eduardo San Martin Morote to chat all about how he helped to create Pinia, Vue’s New State Management system. Watch the full video breakdown on [**YouTube**](https://www.youtube.com/watch?v=c9HzsWFjTfM) or explore the architectural notes, chapters, and official documentation links below.

## Questions

- Can you tell us more about yourself?
- Why do you need state management in an application?
- Why was the decision made to replace the old state system?
- Is this the default state management tool for Vue?
- Is there potential to bake it into it in the future?

## Links

- [Vue Pinia Playground](https://github.com/vuejs/pinia/tree/v2/packages/playground)

## Technical Overview: Pinia Vue’s New State Management

2.42 - Pinia Vue’s New State Management: We sat down with Eduardo San Martin Morote to chat all about how he helped to create Pinia, Vue’s New State Management system. https://codingcat.dev/podcast/2-42-Pinia-Vue's-New-State-Management Sponsors: Storyblok
Have you already discovered Storyblok? They have an official Svelte SDK! 74,000 +

When applying the concepts from **Pinia Vue’s New State Management**  in a production codebase, teams working with WebDev should align their implementation with the [**MDN Web Docs for Developers**](https://developer.mozilla.org/en-US/docs/Web) (Core web platform standards, browser APIs, and performance guides). Structuring your workflow around repeatable patterns, automated verification, and clear separation of concerns helps prevent regressions as your application scales.

### Key Engineering Takeaways

- **Core Topic Focus: ** Practical strategies for WebDev covered in "Pinia Vue’s New State Management" (We sat down with Eduardo San Martin Morote to chat all about how he helped to create Pinia, Vue’s New State Management system.).
- **Production Implementation: ** Combine the architectural patterns demonstrated in this podcast with the official [MDN Web Docs for Developers](https://developer.mozilla.org/en-US/docs/Web) for type safety, performance, and long-term maintainability.
- **Hands-On Video Walkthrough: ** Follow along with the live coding demos and discussion on [YouTube (Pinia Vue’s New State Management)](https://www.youtube.com/watch?v=c9HzsWFjTfM) and subscribe to [CodingCat.dev on YouTube](https://www.youtube.com/@CodingCatDev?sub_confirmation=1) for weekly deep dives.

## Video Chapters & Timestamps

Jump directly to any segment of [**Pinia Vue’s New State Management**](https://www.youtube.com/watch?v=c9HzsWFjTfM) on YouTube using the timestamped chapters below:

- [**00:00**](https://www.youtube.com/watch?v=c9HzsWFjTfM&t=0s): PM

## Resources, Links & Official Documentation

- **Watch on YouTube: ** [Pinia Vue’s New State Management Full Video](https://www.youtube.com/watch?v=c9HzsWFjTfM) (plus [Subscribe to CodingCat.dev](https://www.youtube.com/@CodingCatDev?sub_confirmation=1))
- **storyblok.com: ** [https://www.storyblok.com/?utm_source=codingcat&utm_medium=sponsor&utm_campaign=AWA_SPON_PURRFECT_TRA&utm_content=purrfect-podcast](https://www.storyblok.com/?utm_source=codingcat&utm_medium=sponsor&utm_campaign=AWA_SPON_PURRFECT_TRA&utm_content=purrfect-podcast)
- **Show Pick: ** [Fresh 1.0 (picked by Alex Patterson)](https://deno.com/blog/fresh-is-stable)
- **Show Pick: ** [Primer Prism (picked by Alex Patterson)](https://github.com/primer/prism)
- **Show Pick: ** [Prismic: Give Pinia a Try: Build a Confetti Clicker Game with Us (picked by Brittney Postma)](https://prismic.io/blog/try-tutorial-vue-pinia)
- **Show Pick: ** [Prismic: Explore Svelte by Building a Bubble Popping Game (picked by Brittney Postma)](https://prismic.io/blog/try-svelte-build-game)
- **Show Pick: ** [Cult of the Lamb (picked by Eduardo San Martin Morote)](https://www.nintendo.com/store/products/cult-of-the-lamb-switch/)
- [**Eduardo San Martin Morote Guest Profile & Episodes on CodingCat.dev**](/guest/eduardo-san-martin-morote)
- [**Eduardo San Martin Morote on GitHub**](https://github.com/posva)
- [**Eduardo San Martin Morote Official Website**](https://esm.dev)
- [**Episode Sponsor: Storyblok**](https://www.storyblok.com/?utm_source=codingcat&utm_medium=sponsor&utm_campaign=AWA_SPON_PURRFECT_TRA&utm_content=purrfect-podcast)
- [**MDN Web Docs for Developers:**](https://developer.mozilla.org/en-US/docs/Web) Core web platform standards, browser APIs, and performance guides

## Related CodingCat.dev Tutorials & Podcast Episodes

- [**Data Connect: All About Schemas in Firebase: Web Architecture & Implementation Guide**](/post/firebase-2025-02-dataconnect-schemas): Hands-on web engineering breakdown of "Data Connect: All About Schemas" (2025-02-11). Learn how to integrate Firebase, Google Cloud, Web Dev, SQL in production ...
- [**Breaking Down ViteConf**](/podcast/2-46-Breaking-Down-ViteConf): Matias talks to us all about ViteConf, the future of Vite and all of the great speakers at the conference.
- [**Nx the Smart, Fast and Extensible Build System**](/podcast/2-41-Nx-the-Smart-Fast-and-Extensible-Build-System): We chat with Juri from Nrwl all about monorepos and how Nx fits into your development pipeline.

## Frequently Asked Questions (FAQ)

### What are the main takeaways from Pinia Vue’s New State Management?

We sat down with Eduardo San Martin Morote to chat all about how he helped to create Pinia, Vue’s New State Management system. 2.42 - Pinia Vue’s New State Management: We sat down with Eduardo San Martin Morote to chat all about how he helped to create Pinia, Vue’s New State Management system. https://codingcat.dev/podcast/2-42-Pinia-Vue's-New-State-Management Sponsors: Storyblok
Have you already discovered Storyblok? They have an official Svelte SDK! 74,000 + Throughout this podcast, Eduardo San Martin Morote breaks down real-world implementation details for WebDev so developers can apply these patterns directly in production.

### How do you implement WebDev best practices in production?

When adopting WebDev in a production stack, start by validating your configuration against the [**MDN Web Docs for Developers**](https://developer.mozilla.org/en-US/docs/Web) (Core web platform standards, browser APIs, and performance guides). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage.

### Where can I watch the full Pinia Vue’s New State Management walkthrough and find related code resources?

You can watch the complete video session for [**Pinia Vue’s New State Management**](https://www.youtube.com/watch?v=c9HzsWFjTfM) on the [**CodingCat.dev YouTube channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1). For a deeper dive into WebDev, check out our related guide: [**Data Connect: All About Schemas in Firebase: Web Architecture & Implementation Guide**](/post/firebase-2025-02-dataconnect-schemas).

## ✏️ Episode Summary

2.42 - Pinia Vue’s New State Management: We sat down with Eduardo San Martin Morote to chat all about how he helped to create Pinia, Vue’s New State Management system.

https://codingcat.dev/podcast/2-42-Pinia-Vue's-New-State-Management

Sponsors:

Storyblok
Have you already discovered Storyblok? They have an official Svelte SDK! 74,000 +

✏️ Visual Architecture Diagram

## how this episode connects together.

Follow AJ from first principles to production-ready architecture.

Let’s build it!✏️ Visual Diagram: Pinia Vue’s New State Management✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Pinia Vue’s New State Management: start with Eduardo San Martin Morote, implement Architecture & Patterns, and ship to production.AAA Contrast Verified

## episode picks.

### 🐾 Alex Patterson

- [Fresh 1.0](https://deno.com/blog/fresh-is-stable)
- [Primer Prism](https://github.com/primer/prism)

### 🐾 Brittney Postma

- [Prismic: Give Pinia a Try: Build a Confetti Clicker Game with Us](https://prismic.io/blog/try-tutorial-vue-pinia)
- [Prismic: Explore Svelte by Building a Bubble Popping Game](https://prismic.io/blog/try-svelte-build-game)

### 🐾 Eduardo San Martin Morote

- [Cult of the Lamb](https://www.nintendo.com/store/products/cult-of-the-lamb-switch/)

## related episodes.

[All Episodes→](/podcasts)[![The Odin Project 6: Modern React 19, State Architecture & TypeScript](https://cdn.sanity.io/images/hfh83o0w/production/1a3aad1e42061d9c384f723cdec562e1aa2afd24-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-modern-react-and-typescript)November 4, 2026[![](/logos/tags/react-symbol-light.svg)![](/logos/tags/react-symbol-dark.svg)React](/topic/react)[![](/logos/tags/typescript-symbol-light.svg)![](/logos/tags/typescript-symbol-dark.svg)TypeScript](/topic/typescript)[![](/logos/tags/astro-symbol-light.svg)![](/logos/tags/astro-symbol-dark.svg)Astro](/topic/astro)[+1](/course/odin-modern-react-and-typescript)

### [The Odin Project 6: Modern React 19, State Architecture & TypeScript](/course/odin-modern-react-and-typescript)

Master React 19 components, strict TypeScript props, derived state vs. useEffect traps, Server Actions, and island hydration in Astro.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![The Odin Project 4: JavaScript Deep Dive (Closures, Event Loop, Async & TDD)](https://cdn.sanity.io/images/hfh83o0w/production/dd88ac44f50d7e5f3da1d21184bb96cb032c66fc-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-javascript-deep-dive)November 4, 2026[![](/logos/tags/javascript-symbol-light.svg)![](/logos/tags/javascript-symbol-dark.svg)JavaScript](/topic/javascript)[![](/logos/tags/typescript-symbol-light.svg)![](/logos/tags/typescript-symbol-dark.svg)TypeScript](/topic/typescript)[#Testing](/topic/testing)[+1](/course/odin-javascript-deep-dive)

### [The Odin Project 4: JavaScript Deep Dive (Closures, Event Loop, Async & TDD)](/course/odin-javascript-deep-dive)

Master lexical closures, ES Modules, the V8 Event Loop (microtasks vs. macrotasks), Promise concurrency, and Test-Driven Development with Vitest.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)