You Might Not Need Vuex

Slide 1

Slide 1 text

YOU MIGHT NOT NEED VUEX

Slide 2

Slide 2 text

YOU MIGHT NOT NEED VUE

Slide 3

Slide 3 text

Core Team Member My name is Natalia Tepluhina Google Developer Expert Senior Frontend Engineer @N_Tepluhina

Slide 4

Slide 4 text

Do I need a shared state?

Slide 5

Slide 5 text

“ “Flux libraries are like glasses: you'll know when you need them” Dan Abramov

Slide 6

Slide 6 text

Independent components Different routes Deep nesting

Slide 7

Slide 7 text

Provide/inject approach

Slide 8

Slide 8 text

Provide Inject

Slide 9

Slide 9 text

Reactive object

Slide 10

Slide 10 text

Don’t change data where it’s injected!

Slide 11

Slide 11 text

Composition API to the rescue

Slide 12

Slide 12 text

posva/pinia Automatically typed, modular and lightweight store for Vue using the Composition api with DevTools support Eduardo San Martin Morote

Slide 13

Slide 13 text

Creating a store

Slide 14

Slide 14 text

Using a store in components

Slide 15

Slide 15 text

DEMO

Slide 16

Slide 16 text

Let’s get some GraphQL hype!

Slide 17

Slide 17 text

vue-apollo Integrates Apollo in your Vue components with declarative queries. Compatible with Vue 2.0+ and 3.0+. Guillaume Chau

Slide 18

Slide 18 text

Dispatch an action Trigger API call Success? Commit ‘success’ mutation State changed Commit ‘error’ mutation Yes No

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Query Success/error State changed

Slide 21

Slide 21 text

Ok but what about local state?

Slide 22

Slide 22 text

Local state* = Apollo Cache *everything is Apollo Cache

Slide 23

Slide 23 text

‘Normal’ query…

Slide 24

Slide 24 text

..vs local query

Slide 25

Slide 25 text

Setting initial state

Slide 26

Slide 26 text

Changing data

Slide 27

Slide 27 text

Read the cache Update data Write back to the cache

Slide 28

Slide 28 text

DEMO

Slide 29

Slide 29 text

Thanks! You can find demo repository at bit.ly/no-vuex