Vue + TypeScript + Pinia

Vue TypeScript Pinia

About me

Fernando Escolar ❤️‍🔥 Estrella Galicia
🖕 Verdura
🎨 Naranja
🎮 Pokemon Arceus
🧑‍💼 SCRM Lidl International Hub
🌐 developerro.com

The problem

Components model

Components

Mediator pattern

Zombie notification bug

flowchart TD Action --> Controller Controller --> Model1 Controller --> Model2 Controller --> Model3 Model1 --> View1 Model1 --> View2 Model2 --> View3 Model3 --> View4 Model3 --> View5 Model3 --> View6

Flux architecture

flowchart LR Action --> Dispatcher Dispatcher --> Store Store --> View

Single data flow direction

Single dispatcher

Single data source of truth

Flux architecture

Redux

graph LR Action --> Reducers Reducers --> Store Store --subscribe--> Component Component --dispatch--> Action

Data is inmutable

Reducers as time machine (no dispatcher)

Only one complex store

Redux

Vuex

graph LR Action --> Mutations Mutations --> Store Component --map--> Getter Getter --> Store Component --dispatch--> Action

Official flux implementation

Reactive (no immutable)

With mutations (no reducers)

With getters (almost single data flow direction)

With modules (multiple sources of truth)

Vuex

Are you crazy?

Pinia 🍍

graph LR Action --> State Getter --computed--> State Component --map--> Getter Component --map--> State Component --map--> Action

Without time machine (no mutations no magic strings)

Without nested modules (no magic strings and single source of truth

Getters only for computed values

Simple, fast and lightweight

Pinia 🍍

Pinia 🍍

in the Real World™️

Pinia 🍍

in the Real World™️

let's take a look 🍍

what about splitting it into files

let's take a look 🍍

Thank you very much

Links

Slides: vuebcn.developerro.com

Source code: github.com/fernandoescolar/vue-ts-pinia