Create reliable Vue.js applications that scale. Maintainable and high-quality codebases often depend on decisions made in the early stages. Save time and effort for yourself and your team by choosing the right state management patterns and tools from the outset.
The complete guide to Mastering Pinia (Complete)
Common obstacles in scaling your Vue.js application:
- Poor code organization
- Security issues in server-rendered applications
- Difficulty in passing data between components
- Challenges in properly sharing global state
- Misunderstanding when to use global state appropriately and when not to
But I already use a state management solution!
Using Pinia or any other state management solution incorrectly will, in most cases, lead to "spaghetti code," which is difficult to maintain and refactor.
Moreover, Pinia is the officially recommended state management solution. Therefore, you should really consider using Pinia properly in your applications.
The right state management solution is created to eliminate common problems associated with building scalable Vue.js applications from the outset. It provides enough freedom in organizing your stores while automatically supporting good practices such as code splitting.
While there is no one-size-fits-all solution for state management, Pinia significantly simplifies working with global reactive state. How? In many ways! Pinia uses familiar concepts like getters and actions, which are easy to understand. Pinia states also work seamlessly with Vue components written using either the Options API or the Composition API. You can even use Vue composables directly within your stores to create a powerful global state.
This course also covers both bad and good practices for using Pinia so that you not only create stores correctly but also improve existing ones.
And who better to teach the course than the author of Pinia himself, Eduardo San Martin Morote?
Practical outcomes from the practical course:
- Create a simple state management solution from scratch to better understand the inner workings of Pinia
- Understand the core Vue concepts underlying state management solutions
- Learn how to use Pinia correctly
- Ensure your applications work with server-side rendering (SSR)
- Learn how to effectively use Pinia developer tools
- Create maintainable stores
- Refactor existing stores
- Create plugins for Pinia
- Test stores and components
- Learn best practices and useful tips for working with Pinia
- And much more...
Who is this course for?
This course is for web developers who want to learn how to build robust, high-quality Vue.js applications that scale, are easy to test, and meet user needs.
You don't need prior experience with Pinia, but you should be comfortable working with the Vue framework.
The course is particularly useful for developers who want to properly implement state management in existing or new applications, as well as experienced developers working with Pinia who aim to improve the quality of their stores and upgrade the level of their codebase.
If you are a professional Vue developer or aspire to become one, this course is for you!
About the Authors
Eduardo San Martín Morote
Eduardo San Martín Morote is a Vue Core team member and the author of Vue Router and Pinia — the official Vue 3 routing and state-management libraries. He is one of the most authoritative voices on the modern Vue ecosystem.
His CourseFlix listing carries The Complete Guide to Mastering Pinia. Material is paid and aimed at Vue developers building production applications and ready to make state management a deliberate architectural decision.
Vue School
Vue School (vueschool.io) is a Greece-based Vue.js training platform founded by Alex Kyriakidis, an early Vue community member and one of the longest-running independent Vue educators. Vue School operates as both an on-demand course platform and a Vue / Nuxt consulting business, with course material that often emerges from real client engagements.
Course material covers the full Vue ecosystem: Vue 3 fundamentals through advanced Composition API patterns, Nuxt 3 production deployment, Pinia state management, Vue Router, the testing track with Vitest, TypeScript with Vue, real-time features with Pusher / WebSockets, and the broader full-stack Vue work. Vue School also publishes the popular Mastering Pinia course in collaboration with Pinia's author Eduardo San Martín Morote.
The CourseFlix listing under this source carries over 30 Vue School courses spanning that range. Material is paid; Vue School runs on per-course or membership pricing on the original platform. Courses are aimed at Vue developers from beginner through senior level building production Vue applications.
Watch Online 66 lessons
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | The What and Why of State Management and Stores Demo | 03:52 | |
| 2 | Creating a store from scratch | 08:57 | |
| 3 | Collecting effects with `effectScope` | 08:36 | |
| 4 | Touring the exercise platform | 10:39 | |
| 5 | Creating our own `defineStore()` | 15:51 | |
| 6 | Dependency injection with `inject` and `provide` | 12:46 | |
| 7 | Using `inject` and `provide` to ensure app-specific stores | 07:44 | |
| 8 | Introduction to Creating a Tabs Manager | 02:46 | |
| 9 | Creating a Tabs Manager Solution | 26:38 | |
| 10 | Why use Pinia | 03:21 | |
| 11 | Quick Start with Pinia | 07:22 | |
| 12 | The root state AKA the Pinia instance | 07:00 | |
| 13 | The 3 pillars of Pinia: State | 10:58 | |
| 14 | Practicing State | 06:19 | |
| 15 | The 3 pillars of Pinia: Getters | 18:55 | |
| 16 | Practicing Getters | 07:39 | |
| 17 | The 3 pillars of Pinia: Actions | 10:16 | |
| 18 | Practicing Actions | 11:56 | |
| 19 | Correctly Typing a Store | 15:53 | |
| 20 | Gradient Generator | 26:14 | |
| 21 | When should we use `storeToRefs()`, `toRef()`, and `toRefs()` | 08:39 | |
| 22 | How does `useStore()` work? | 10:16 | |
| 23 | Faster development with Hot Module Replacement | 06:35 | |
| 24 | Fix misusing stores in different places | 10:20 | |
| 25 | What are Setup Stores and how do they compare to Option Stores | 15:28 | |
| 26 | Why both syntaxes? | 03:51 | |
| 27 | When to choose one syntax over the other | 12:41 | |
| 28 | Setup Stores Weaknesses | 05:47 | |
| 29 | Debugging Erroneous Code | 09:45 | |
| 30 | Keeping stores simple | 03:19 | |
| 31 | Partitioning setup stores | 15:39 | |
| 32 | Refactoring Stores Introduction | 02:00 | |
| 33 | Refactoring Stores Solution | 14:36 | |
| 34 | Creating private state | 09:20 | |
| 35 | Private State Introduction | 03:55 | |
| 36 | Private State Solution | 02:44 | |
| 37 | Creating definePrivateState | 06:22 | |
| 38 | Creating definePrivateStore | 05:48 | |
| 39 | Creating defineReadonlyState | 05:31 | |
| 40 | Using Composables in Option Stores | 12:45 | |
| 41 | Using Composables in Setup Stores | 08:38 | |
| 42 | (Not) Overusing stores | 08:32 | |
| 43 | Data Fetching Introduction | 03:43 | |
| 44 | Data Fetching Solution Part 1: useQuery | 24:21 | |
| 45 | Data Fetching Solution Part 2: useMutation | 12:35 | |
| 46 | SSR-friendly State | 10:44 | |
| 47 | Complex State Serialization | 09:34 | |
| 48 | Complex State in Nuxt with Payload Plugins | 03:49 | |
| 49 | State Hydration in Option Stores | 09:44 | |
| 50 | State Hydration in Setup Stores | 05:51 | |
| 51 | Introduction to Testing Stores | 01:53 | |
| 52 | Unit Testing Stores | 08:31 | |
| 53 | Exercise - Testing Stores Introduction | 00:39 | |
| 54 | Exercise - Testing Stores Solution | 12:00 | |
| 55 | Stores with Plugins | 05:32 | |
| 56 | Mocking Stores | 18:05 | |
| 57 | Exercise - Mocking Stores Introduction | 00:34 | |
| 58 | Exercise - Mocking Stores Solution | 14:02 | |
| 59 | What is a Pinia Plugin? | 04:32 | |
| 60 | Adding new properties to Stores | 08:53 | |
| 61 | Adding new state to Stores | 06:06 | |
| 62 | Subscribing to state changes with $subscribe | 08:55 | |
| 63 | Intercepting Actions with $onAction | 11:43 | |
| 64 | Defining and using custom store options | 08:38 | |
| 65 | Exercise - Action Retrying Introduction | 03:41 | |
| 66 | Exercise - Action Retrying Solution | 18:14 |
Get instant access to all 65 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionCourse content
66 lessons · 10h 18m 32sShow all 66 lessons
- 1 The What and Why of State Management and Stores 03:52
- 2 Creating a store from scratch 08:57
- 3 Collecting effects with `effectScope` 08:36
- 4 Touring the exercise platform 10:39
- 5 Creating our own `defineStore()` 15:51
- 6 Dependency injection with `inject` and `provide` 12:46
- 7 Using `inject` and `provide` to ensure app-specific stores 07:44
- 8 Introduction to Creating a Tabs Manager 02:46
- 9 Creating a Tabs Manager Solution 26:38
- 10 Why use Pinia 03:21
- 11 Quick Start with Pinia 07:22
- 12 The root state AKA the Pinia instance 07:00
- 13 The 3 pillars of Pinia: State 10:58
- 14 Practicing State 06:19
- 15 The 3 pillars of Pinia: Getters 18:55
- 16 Practicing Getters 07:39
- 17 The 3 pillars of Pinia: Actions 10:16
- 18 Practicing Actions 11:56
- 19 Correctly Typing a Store 15:53
- 20 Gradient Generator 26:14
- 21 When should we use `storeToRefs()`, `toRef()`, and `toRefs()` 08:39
- 22 How does `useStore()` work? 10:16
- 23 Faster development with Hot Module Replacement 06:35
- 24 Fix misusing stores in different places 10:20
- 25 What are Setup Stores and how do they compare to Option Stores 15:28
- 26 Why both syntaxes? 03:51
- 27 When to choose one syntax over the other 12:41
- 28 Setup Stores Weaknesses 05:47
- 29 Debugging Erroneous Code 09:45
- 30 Keeping stores simple 03:19
- 31 Partitioning setup stores 15:39
- 32 Refactoring Stores Introduction 02:00
- 33 Refactoring Stores Solution 14:36
- 34 Creating private state 09:20
- 35 Private State Introduction 03:55
- 36 Private State Solution 02:44
- 37 Creating definePrivateState 06:22
- 38 Creating definePrivateStore 05:48
- 39 Creating defineReadonlyState 05:31
- 40 Using Composables in Option Stores 12:45
- 41 Using Composables in Setup Stores 08:38
- 42 (Not) Overusing stores 08:32
- 43 Data Fetching Introduction 03:43
- 44 Data Fetching Solution Part 1: useQuery 24:21
- 45 Data Fetching Solution Part 2: useMutation 12:35
- 46 SSR-friendly State 10:44
- 47 Complex State Serialization 09:34
- 48 Complex State in Nuxt with Payload Plugins 03:49
- 49 State Hydration in Option Stores 09:44
- 50 State Hydration in Setup Stores 05:51
- 51 Introduction to Testing Stores 01:53
- 52 Unit Testing Stores 08:31
- 53 Exercise - Testing Stores Introduction 00:39
- 54 Exercise - Testing Stores Solution 12:00
- 55 Stores with Plugins 05:32
- 56 Mocking Stores 18:05
- 57 Exercise - Mocking Stores Introduction 00:34
- 58 Exercise - Mocking Stores Solution 14:02
- 59 What is a Pinia Plugin? 04:32
- 60 Adding new properties to Stores 08:53
- 61 Adding new state to Stores 06:06
- 62 Subscribing to state changes with $subscribe 08:55
- 63 Intercepting Actions with $onAction 11:43
- 64 Defining and using custom store options 08:38
- 65 Exercise - Action Retrying Introduction 03:41
- 66 Exercise - Action Retrying Solution 18:14
Related courses
-

The Complete Guide to Django REST Framework and Vue JS
Sources: UdemyHi! Welcome to The Complete Guide to Django REST Framework and Vue JS course! In this course you will learn how to create professional REST APIs with Python and13 hours 40 minutes 40 seconds -

Quasar Fundamentals: Build Cross-Platform Vue.js Apps
Sources: Vue SchoolQuasar Framework will amaze you with its capabilities! By the end of this course, you will be able to develop applications on Vue.js for Android, iOS, Windows.7 hours 6 minutes 8 seconds -

100 Days Of Code: The Complete Web Development Bootcamp 2024
Sources: Academind Pro (Maximilian Schwarzmüller)100 Days of Code: Complete Web Development Bootcamp 2022 by Colt Steele — HTML, CSS, JavaScript, Node, Express, Mongo, and full-stack projects.78 hours 51 minutes 55 seconds