Pin me a Pinia
A yummy store management for Vue.js apps
Maya Shavin
A little bit about me
SENIOR SOFTWARE ENGINEER
StoreFrontUI Team
VueJS Israel Organizer
State management
Why do you need a state management (or store)?
What is State Management?
Process of maintaining knowledge of application's inputs across multiple related data flows... to understand the condition of an app at any given time..."
- Manage conditions of an app/ component/ feature at a given session period.
- Keep consistency of data flows.
When do you need State Management?
- Sharing states/data flows between components.
- Preserve data state logic from component's lifecycle.
- Single source of truth
- Faster UI interaction.
- Less requests sent to BE
- Better maintenance & testingÂ
import { createStore } from 'vuex'
export const globalStore = createStore({
state: () => ({
products: [],
cart: [],
user: null
}),
mutations: {
/*....*/
},
methods: {
login() {
/*...*/
},
fetchProducts() {},
addItemToCart() {}
}
})- Unidirectional data flow
- Dispatcher as the central hubÂ
- The dispatcher, stores, and views are independent nodes.
State management - Flux pattern
- Flux architecture inspired
- Strong community
- Focus on scalability
Vuex
- Over complicated in many cases
- Out-of-the-box TypeScript support?
- Effective code spliting for store?
Pinia
A modular approach to store management
- Support Vue 2 AND Vue 3
- TypeScript support
- Create and bundle the store only where it needed
- Reusable getters (less duplicate code)
- Multipe stores as modular
- Lighter weight (~1kb)
What's yummy about Pinia
Seeing is believing...
Let's make a pizza store
Vue 3 Vue Router 4 Pinia 2 Netlify functions Vitejs
The requirements
Fetch, store and display pizzas from APIs
Create a cart system (add, edit, clear)
Add pizza to cart & display cart
Make a payment using Pinia plugins
The requirements
Fetch, store and display pizzas from APIs
Create a cart system (add, edit, clear)
Add pizza to cart & display cart
Make a payment using Pinia plugins
The requirements
Fetch, store and display pizzas from APIs
Create a cart system (add, edit, clear)
Add pizza to cart & display cart
Make a payment using Pinia plugins
The requirements
Fetch, store and display pizzas from APIs
Create a cart system (add, edit, clear)
Add pizza to cart & display cart
Make a payment using Pinia plugins
The requirements
Fetch, store and display pizzas from APIs
Create a cart system (add, edit, clear)
Add pizza to cart & display cart
Make a payment using Pinia plugins
Others cool things of Pinia
Obviously :)
- $patch
- $subscribe
- $onAction
Is Pinia better than VueX?
It all depends...
- Lack of debugging support (yet)
- Scalability for big complex project?
- New to the community