Mastering Pinia | Learn from the creator of Pinia

Introduction

10 lessons

Get access to the complete guide to developing and deploying fast, production-ready Pinia apps.

2. Creating a store from scratch

During the next few lessons we will create our own store from scratch. This will allows to understand what is needed to build a store, how to organize it and to learn a bit more about the Vue Reactivity API. During this lesson we will talk about the Reactivity API and start with a very naive implementation of a store.

Note: In Vue >=3.5.0, the reactivity system has been internally refactored, it no longer shows the issue with computed but what's said in this lesson is still valid, and the issue can still happen with other reactivity features like watch()

🧑‍💻 We will use this Vue.js SFC Playground

Eduardo

Eduardo San Martin Morote

1

Introduction

10 lessons

The What and Why of State Management and Stores

The What and Why of State Management and Stores

Creating a store from scratch

Creating a store from scratch

Collecting effects with `effectScope`

Collecting effects with `effectScope`

Touring the exercise platform

Touring the exercise platform

Creating our own `defineStore()`

Creating our own `defineStore()`

Dependency injection with `inject` and `provide`

Dependency injection with `inject` and `provide`

Using `inject` and `provide` to ensure app-specific stores

Using `inject` and `provide` to ensure app-specific stores

Introduction to Creating a Tabs Manager

Introduction to Creating a Tabs Manager

Creating a Tabs Manager Solution

Creating a Tabs Manager Solution

Why use Pinia

Why use Pinia

2

Getting Started with Pinia

10 lessons

Quick Start with Pinia

Quick Start with Pinia

The root state AKA the Pinia instance

The root state AKA the Pinia instance

The 3 pillars of Pinia: State

The 3 pillars of Pinia: State

Practicing State

Practicing State

The 3 pillars of Pinia: Getters

The 3 pillars of Pinia: Getters

Practicing Getters

Practicing Getters

The 3 pillars of Pinia: Actions

The 3 pillars of Pinia: Actions

Practicing Actions

Practicing Actions

Correctly Typing a Store

Correctly Typing a Store

Gradient Generator

Gradient Generator

3

Consuming the store

4 lessons

When should we use `storeToRefs()`, `toRef()`, and `toRefs()`

When should we use `storeToRefs()`, `toRef()`, and `toRefs()`

How does `useStore()` work?

How does `useStore()` work?

Faster development with Hot Module Replacement

Faster development with Hot Module Replacement

Fix misusing stores in different places

Fix misusing stores in different places

4

Option Stores vs Setups Stores

4 lessons

What are Setup Stores and how do they compare to Option Stores

What are Setup Stores and how do they compare to Option Stores

Why both syntaxes?

Why both syntaxes?

When to choose one syntax over the other

When to choose one syntax over the other

Setup Stores Weaknesses

Setup Stores Weaknesses

5

Debugging stores with the Devtools

1 lessons

Debugging Erroneous Code

Debugging Erroneous Code

6

Maintainable stores

16 lessons

Keeping stores simple

Keeping stores simple

Partitioning setup stores

Partitioning setup stores

Refactoring Stores Introduction

Refactoring Stores Introduction

Refactoring Stores Solution

Refactoring Stores Solution

Creating private state

Creating private state

Private State Introduction

Private State Introduction

Private State Solution

Private State Solution

Creating definePrivateState

Creating definePrivateState

Creating definePrivateStore

Creating definePrivateStore

Creating defineReadonlyState

Creating defineReadonlyState

Using Composables in Option Stores

Using Composables in Option Stores

Using Composables in Setup Stores

Using Composables in Setup Stores

(Not) Overusing stores

(Not) Overusing stores

Data Fetching Introduction

Data Fetching Introduction

Data Fetching Solution Part 1: useQuery

Data Fetching Solution Part 1: useQuery

Data Fetching Solution Part 2: useMutation

Data Fetching Solution Part 2: useMutation

7

Server Side Rendering

5 lessons

SSR-friendly State

SSR-friendly State

Complex State Serialization

Complex State Serialization

Complex State in Nuxt with Payload Plugins

Complex State in Nuxt with Payload Plugins

State Hydration in Option Stores

State Hydration in Option Stores

State Hydration in Setup Stores

State Hydration in Setup Stores

8

How to test stores

8 lessons

Introduction to Testing Stores

Introduction to Testing Stores

Unit Testing Stores

Unit Testing Stores

Exercise - Testing Stores Introduction

Exercise - Testing Stores Introduction

Exercise - Testing Stores Solution

Exercise - Testing Stores Solution

Stores with Plugins

Stores with Plugins

Mocking Stores

Mocking Stores

Exercise - Mocking Stores Introduction

Exercise - Mocking Stores Introduction

Exercise - Mocking Stores Solution

Exercise - Mocking Stores Solution

9

Augmenting stores with Pinia plugins

8 lessons

What is a Pinia Plugin?

What is a Pinia Plugin?

Adding new properties to Stores

Adding new properties to Stores

Adding new state to Stores

Adding new state to Stores

Intercepting Actions with $onAction

Intercepting Actions with $onAction

Defining and using custom store options

Defining and using custom store options

Exercise - Action Retrying Introduction

Exercise - Action Retrying Introduction

Exercise - Action Retrying Solution

Exercise - Action Retrying Solution