CF

The complete guide to Mastering Pinia (Complete)

10h 18m 32s
English
Paid

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.

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 thumbnail

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 thumbnail

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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 66 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: The What and Why of State Management and Stores
All Course Lessons (66)
#Lesson TitleDurationAccess
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
Unlock unlimited learning

Get instant access to all 65 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What prerequisites should I have before taking this course?
Before enrolling in this course, you should have a basic understanding of Vue.js, as it builds on Vue.js applications to teach state management using Pinia. Familiarity with JavaScript is also essential, as the course involves creating stores and using various state management patterns. Experience with Vue's reactivity system will help as well, especially when delving into topics like `effectScope`, `inject`, and `provide`.
What kind of projects will I build during this course?
Throughout the course, you'll work on several practical examples and exercise projects. Some key projects include creating a Tabs Manager and a Gradient Generator. These projects are designed to give you hands-on experience with Pinia's state management features, such as state, getters, actions, and the use of composables in both Option and Setup Stores.
Who is the target audience for this course?
The course is aimed at developers who are looking to enhance their Vue.js applications by integrating efficient state management using Pinia. It's particularly suited for those who want to build scalable and maintainable applications. Both beginners with some Vue.js experience and seasoned developers looking to deepen their understanding of state management will benefit from this course.
How does this course compare to other Vue.js state management courses?
This course offers an extensive focus on Pinia, which is gaining popularity as a state management solution for Vue.js applications. Unlike courses that might cover multiple state management libraries, this course dives deep into Pinia's features, including the three pillars of state, getters, and actions, as well as advanced topics like SSR-friendly state and complex state serialization in Nuxt.
What specific tools or platforms are covered in this course?
The course primarily covers Pinia as the state management library for Vue.js. It also introduces related tools and techniques like `inject`, `provide`, `storeToRefs`, `toRef`, `toRefs`, and Hot Module Replacement for faster development. Additionally, the course explores state management in the context of SSR and Nuxt, including complex state serialization and state hydration.
What topics are not covered in this course?
While the course thoroughly covers state management with Pinia, it does not delve into other Vue.js state management libraries like Vuex. It also does not cover basic Vue.js concepts or general JavaScript programming, assuming that students already have foundational knowledge in these areas.
How much time should I expect to commit to this course?
The course consists of 66 lessons, though the exact runtime is not specified. To get the most out of the course, including completing exercise projects and practicing testing and debugging techniques, you should be prepared to devote several hours to each module. This time commitment will vary based on your prior experience and familiarity with the concepts.