Upgrade to Pro — share decks privately, control downloads, hide ads and more …

You Might Not Need Vuex

You Might Not Need Vuex

A few alternatives to Vuex state management in Vue application

D2a706fe1f598d26a6a2ae246ff551ce?s=128

Natalia Tepluhina

February 21, 2020
Tweet

More Decks by Natalia Tepluhina

Other Decks in Programming

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
  19. None
  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