You Might Not Need Vuex

A few alternatives to Vuex state management in Vue application

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