In Vue.js, it is quite simple to work with components, and share data among them using events and props - especially in small to medium projects. When an application starts growing, managing component state might become tedious and overwhelming. This is where Pinia comes to our rescue.

Pinia is a state management solution for Vue.js applications that makes it easy to store data at a global level and share it amongst application components.

By the end of the workshop, attendees will be able to develop elegant, debuggable, maintainable, and organized applications using a centralized store. No prior experience with Pinia is needed.

We will answer the common question, “When should I use Pinia?” and work on real-world features.

Topics

• Understanding global state management
• Creating a Pinia store with core features like: state, actions, and getters
• Consuming a store in components
• Organizing the store with modules
• Usage with the Composition API and the Options API
• Preserving state with HMR
• Using composables in the Pinia state

Who is this for

This workshop is ideal for web developers who know the basics of Vue.js and are looking to manage application data without the headache of prop drilling.

Pre-requisites

• Experience with the basics of Vue.js
• Experience building full scale apps that could benefit from a central store