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

Natalia Tepluhina

February 21, 2020
Tweet

More Decks by Natalia Tepluhina

Other Decks in Programming

Transcript

  1. YOU MIGHT NOT NEED
    VUEX

    View Slide

  2. YOU MIGHT NOT NEED
    VUE

    View Slide

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

    View Slide

  4. Do I need
    a shared state?

    View Slide


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

    View Slide

  6. Independent components
    Different routes
    Deep nesting

    View Slide

  7. Provide/inject
    approach

    View Slide

  8. Provide
    Inject

    View Slide

  9. Reactive object

    View Slide

  10. Don’t change data
    where it’s injected!

    View Slide

  11. Composition API
    to the rescue

    View Slide

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

    View Slide

  13. Creating a store

    View Slide

  14. Using a store in components

    View Slide

  15. DEMO

    View Slide

  16. Let’s get some
    GraphQL hype!

    View Slide

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

    View Slide

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

    View Slide

  19. View Slide

  20. Query Success/error
    State
    changed

    View Slide

  21. Ok but what about
    local state?

    View Slide

  22. Local state* = Apollo Cache
    *everything is Apollo Cache

    View Slide

  23. ‘Normal’ query…

    View Slide

  24. ..vs local query

    View Slide

  25. Setting initial state

    View Slide

  26. Changing data

    View Slide

  27. Read the cache
    Update data
    Write back to the cache

    View Slide

  28. DEMO

    View Slide

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

    View Slide