Uploaded byGITS Indonesia
GITS Class #19: Build Large Scale Vue.js Apps with Vuex
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 Appswith Vuex By Warsono M Faizal Frontend Dev at GITS Indonesia
- 2. Intro Warsono Muhamad Faizal FrontendWeb Developer at GITS Indonesia
- 3. What is Vuex? Vuexis 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.
- 6. Why Do YouNeed 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.
- 7.
- 8.
- 9. State ● The Vuexstate 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 onlyway to actually change state in a Vuex store is by committing a mutation ● We cannot directly call a mutation handler
- 11.
- 12.
- 13. Mutations - Object-StyleCommit
- 14. Actions Actions are similarto mutations, the differences being that: ● Instead of mutating the state, actions commit mutations. ● Actions can contain arbitrary asynchronous operations.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20. Modules - AccessingState
- 21.
- 22. Form Handling -Two-Way Computed Properties
- 23.
- 24.
- 25. Thanks! Warsono MFaizal Instagram: @warsonoid Facebook: /gravitano Twitter: @gravitano GitHub: @gravitano