You Might Not Need Vuex

A few alternatives to Vuex state management in Vue application

Transcript

1. YOU MIGHT NOT NEED VUEX
2. YOU MIGHT NOT NEED VUE
3. Core Team Member My name is Natalia Tepluhina Google Developer Expert Senior Frontend Engineer @N_Tepluhina
4. Do I need a shared state?
5. “ “Flux libraries are like glasses: you'll know when you need them” Dan Abramov
6. Independent components Different routes Deep nesting
7. Provide/inject approach
8. Provide Inject
9. Reactive object
10. Don’t change data where it’s injected!
11. Composition API to the rescue
12. posva/pinia Automatically typed, modular and lightweight store for Vue using the Composition api with DevTools support Eduardo San Martin Morote
13. Creating a store
14. Using a store in components
15. DEMO
16. Let’s get some GraphQL hype!
17. vue-apollo Integrates Apollo in your Vue components with declarative queries. Compatible with Vue 2.0+ and 3.0+. Guillaume Chau
18. Dispatch an action Trigger API call Success? Commit ‘success’ mutation State changed Commit ‘error’ mutation Yes No
20. Query Success/error State changed
21. Ok but what about local state?
22. Local state* = Apollo Cache *everything is Apollo Cache
23. ‘Normal’ query…
24. ..vs local query
25. Setting initial state
26. Changing data
27. Read the cache Update data Write back to the cache
28. DEMO
29. Thanks! You can find demo repository at bit.ly/no-vuex