10 lessons
In this lesson, we will learn how to use provide() and inject() in Vue.js to avoid prop drilling and make our store compatible with server-side rendering (SSR). This will allow us to finish our store implementation and make it (almost!) production-ready.
🧑💻 We will use this Vue.js SFC Playground to practice some concepts.
You can find the final solution here
Eduardo San Martin Morote
1
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
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
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
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
1 lessons
6
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
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
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
7 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
Subscribing to state changes with $subscribe
Subscribing to state changes with $subscribe
Intercepting Actions with $onAction
Intercepting Actions with $onAction
Defining and using custom store options
Defining and using custom store options
Exercise - Action retrying
Exercise - Action retrying
