GITS Class #19: Build Large Scale Vue.js Apps with Vuex
0 likes429 views
The document provides an introduction to Vuex, a state management library for Vue.js applications, highlighting its structure and purpose. Vuex offers a reactive centralized store for managing application state, allowing for easier maintenance and debugging. The document also details the components of Vuex, including state, mutations, actions, and getters.
GITS Class #19: Build Large Scale Vue.js Apps with Vuex
- 1. Build Large-Scale Vue.js Apps with Vuex By Warsono M Faizal Frontend Dev at GITS Indonesia
- 2. Intro Warsono Muhamad Faizal Frontend Web Developer at GITS Indonesia
- 3. What is Vuex? Vuex is a state management pattern + library for Vue.js applications. Vuex is inspired by Flux, Redux and The Elm Architecture. Vuex serves as a centralized store for all the components in an application
- 4. What is a "State Management Pattern"? It is a self-contained app with the following parts: ● The state, which is the source of truth that drives our app; ● The view, which is just a declarative mapping of the state; ● The actions, which are the possible ways the state could change in reaction to user inputs from the view. This is an extremely simple representation of the concept of "one-way data flow":
- 5. Flow One-Way Data Flow Vuex Flow
- 6. Why Do You Need Vuex? ● The Vuex store is reactive. Once components retrieve a state from it, they will reactively update their views every time the state changes. ● Components cannot directly mutate the store's state. The only way to change the store's state is by explicitly committing mutations. ● You can easily debug your application thanks to the Vuex integration with Vue's DevTools extension. ● It's easier to maintain and synchronize the state between multiple components, even if the component hierarchy changes. ● Vuex makes direct cross-component communication possible.
- 8. Vuex Store
- 9. State ● The Vuex state is a single object contains all your application level state ● You will have only one store for each application ● The single state tree does not conflict with modularity (Vuex modules)
- 10. Mutations ● The only way to actually change state in a Vuex store is by committing a mutation ● We cannot directly call a mutation handler
- 11. Mutations Types
- 13. Mutations - Object-Style Commit
- 14. Actions Actions are similar to mutations, the differences being that: ● Instead of mutating the state, actions commit mutations. ● Actions can contain arbitrary asynchronous operations.
- 16. Getters
- 17. Accessing State
- 18. Map Helper
- 19. Modules
- 20. Modules - Accessing State
- 21. Form Handling
- 22. Form Handling - Two-Way Computed Properties
- 25. Thanks! Warsono M Faizal Instagram: @warsonoid Facebook: /gravitano Twitter: @gravitano GitHub: @gravitano