Building Pinia From Scratch

certificate
Recording and certification are available to Multipass and Full ticket holders only
Please login if you have one.
Rate this content
Bookmark

Let's dive into how Pinia works under the hood by building our own `defineStore()`. During this workshop we will cover some advanced Vue concepts like dependency Injection and effect scopes. It will give you a better understanding of Vue.js Composition API and Pinia. Requirements: experience building applications with Vue and its Composition API.

This workshop has been presented at Vue.js Live 2024, check out the latest edition of this JavaScript Conference.

FAQ

Both ref and reactive are ways to create reactive objects in Vue. ref is used for primitive values like numbers, strings, and booleans, and requires accessing the value using .value. reactive is used for objects and allows direct manipulation without needing .value.

Reactive only works with objects because Vue tracks reactivity through the access of properties. Primitives like numbers, booleans, and strings are immutable in JavaScript and cannot be tracked or changed directly. You can only create new versions of them.

Unwrapping in Vue refers to automatically accessing the value inside a ref or a computed property when it's placed inside a reactive or another ref. This means you don't need to use .value to access the value, as Vue handles it automatically.

store to refs is a function that allows you to extract properties from a reactive object while keeping their reactivity. This is useful for splitting a reactive object into separate refs that can be used independently while staying connected to the original reactive object.

The main difference is that ref is used for primitive values and requires using .value to access the stored value, while reactive is used for objects and allows direct access to the properties without needing .value.

Vue handles reactivity for objects by tracking the access and modification of their properties. For primitives, Vue uses refs because primitives are immutable in JavaScript, and Vue cannot track changes directly. Instead, you must create new versions of the primitive values.

Provide and inject in Vue are used to pass data from a parent component to its descendants without prop drilling. It's commonly used in libraries to provide global properties, but can also be useful in coupled components to share context-specific data implicitly.

In recursive components, provide can be used to pass down data like depth or other context-specific information. Each child component can inject this data to determine its behavior based on its position in the component tree, enabling features like conditional rendering based on hierarchy depth.

Using provide/inject for global state in SSR applications ensures that each request gets its own independent instance of the global state. This prevents cross-state pollution where data from one user's request could leak into another user's request, which is crucial for security and data integrity.

Using symbols as keys in provide/inject ensures unique identifiers for the injected properties, preventing conflicts and making sure that the injected values are not accidentally overridden by other values with the same key.

Eduardo San Martin Morote
Eduardo San Martin Morote
70 min
22 Apr, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Reactive and ref are both reactive in Vue, allowing objects to be reactive and removing the need for writing 'value'. Store to refs is a specific version of refs in Vue. The exercises are located in the 'exercises' folder and include automated tests. Implementing FX scope in Vue allows for refactoring and better code organization. Weak maps are used for resource disposal and dependency injection is useful for resolving prop drilling issues.
Available in Español: Construyendo Pinia desde cero
Video transcription and chapters available for users with access.