GITS Class #19: Build Large Scale Vue.js Apps with Vuex

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.
  Flow One-Way Data Flow VuexFlow
• 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.
  Let’s Get Started
• 8.
  Vuex Store
• 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.
  Mutations Types
• 12.
  Mutations Payload
• 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.
  Actions - Promise
• 16.
  Getters
• 17.
  Accessing State
• 18.
  Map Helper
• 19.
  Modules
• 20.
  Modules - AccessingState
• 21.
  Form Handling
• 22.
  Form Handling -Two-Way Computed Properties
• 23.
  Application Structure
• 24.
  Resources ● https://vuex.vuejs.org/ ● https://github.com/gravitano/gits-class-vuex
• 25.
  Thanks! Warsono MFaizal Instagram: @warsonoid Facebook: /gravitano Twitter: @gravitano GitHub: @gravitano