Vuex for Intermediate Vue.js Developers
Table of Contents
IntroductionDivya Tagtachian shares the course slides and repository, and gives an overview of the course curriculum.
Overview of State ManagementDivya defines a state as the condition of an object stored as data, and explains that a state is passed through props and events. Events are communication between components, and props are custom attributes linked to a specific component.
Overview of VuexDivya introduces Vuex, explains that it is a centralized data store for shared data, logic, and methods, making the mutation of a state predictable, and describes the differences between actions, mutations and state.
Moving State into VuexDivya demonstrates moving the state out of a UI component in Vue into a Vuex Store by changing the data properties, and more specifically using the method supply to modify computer properties. Actions and mutations are also discussed in this section.
Moving to State & Actions ExerciseStudents are instructed to move the state out of a UI component in Vue into a Vuex Store using the dispense method, along with using actions and mutations.
Moving to State & Actions SolutionDivya walks through the code for the solution to the Vuex Store exercise.
Moving to State & Actions PracticeDivya moves the state out of a UI component in Vue into a Vuex Store using the restock method, as well as using actions and mutations.
State & Getters
State Management in VuexDivya defines state, actions, getters, and mutations as responsibilities in state management systems, and explains the difference between an action and a mutation.
Creating a Loading StateDivya explains how to transition states and display a loading state while loading data from an asynchronous source like an API by creating and making calls to a mock inventory API
Async State PracticeDivya goes through an exercise of getting data from an asynchronous action by using an isRestocking boolean computer property, checking the specific state, committing to change the restocking property to true, and, once the async action finishes, changing it back to false.
GettersDivya explains that getters are computed properties cached in the event that a state does not change and only update when a mutation occurs, and goes through an example of a getter.
Getters ExerciseStudents are instructed to modify the language in which the information is displayed using a getter.
Getters SolutionDivya live codes the solution to the getters exercise, demonstrates how to add getters to a state, uses getters in transitions, and explains that in this practice gatters are used so that data is updated outside of the component.
Vuex StoreDivya explains that this section focuses on how Vuex is used daily by developers, and adds that the best practice is to isolate Vuex within the same file.
Moving a Vuex Store into a FileDivya goes through moving a Vuex store into a separate file to be imported and used in a given application, after sharing the Vuex folder structure.
Move into a Vuex Store ExerciseStudents are instructed to move a Vuex store into a separate single file store component and link it to the main.js file.
Move into a Vuex Store SolutionDivya live codes the solution to the Vuex Store exercise.
Helpers & Actions
Commit & DispatchDivya compares and differentiates the purposes of the commit and dispatch methods: dispatch triggers an action whereas commit triggers a mutation
Commit & Dispatch ExerciseStudents are instructed to destructure context so it uses the commit and dispatch methods to gain a better understanding of how to use these methods.
Commit & Dispatch SolutionDivya live codes the solution to the commit and dispatch exercise.
Vuex HelpersDivya explains that helpers allow developers to write less boilerplate code, and adds that separating functionality into Vuex helpers is best practice because it makes the code more readable.
Vuex Helpers ExerciseStudents are instructed to refactor code explored in a previous section to use helpers by using mapState and mapActions.
Vuex Helpers SolutionDivya live codes the solution to the Vuex helpers exercise.
Composing Vuex Actions PracticeDivya demonstrates how to call an action on another action, and commit a mutation on the condition that the dispatch action returns successfully.
Composing Vuex Actions ExerciseStudents are instructed to chain actions by first dispatching an action to check if the machine is working, and, if it is, dispatching an action to run an API call.
Composing Vuex Actions SolutionDivya live codes the solution to the composing Vuex actions exercise.
Vuex ModulesDivya explains that modules are a new concept in Vuex, and concludes that Vuex modules help separate state and functionality into smaller modules grouped by commonalities.
Vuex Modules ExerciseStudents are instructed to move the various stores of the vending machine application into different modules.
Vuex Modules SolutionDivya live codes the solution to the vuex modules exercise.
Namespace Vuex ModulesDivya explains that it is best practice to namespace actions, getters, and mutations, because they are global and can be used across modules.
Helpers & Vuex ModulesDivya explains how to use helpers to modularize or refactor code into modules, focuses on the mapState and actionState tool functions, and creates Namespaced helpers, and explains that using helpers allows developers to avoid repetition when writing code.
Vuex Modules File StructureDivya defines what a Vuex modules file structure is, explains how to create a module folder within the store folder to improve readability, and demonstrates how to combine states, getters, and actions together into the same index file inside of the module folder.
Static vs Dynamic ModulesDivya explains the difference between static and dynamic Vuex modules. Dynamic modules are registered on component initialization, and can be loaded at any time rather than needed at the time of loading an application.
Dynamic Modules ExerciseStudents are instructed to locate the operatorView component, and dynamically load the store so that the primary machine is serviced without updating the other machines.
Dynamic Modules SolutionDivya live codes the solution to the dynamic module exercise.
Vuex PluginsDivya defines a plugin in Vuex as an object with store as its main parameter, and explains that plugins monitor state changes to perform other tasks that are not state management specific.
Mutation Local Storage Plugin PracticeDivya demonstrates how to subscribe to a mutation by creating a plugin that hooks into a mutation and stores the data in local storage.
Action Plugin ExerciseStudents are instructed to modify the previous plugin to use the subscribeAction handler. The handler is used in Vuex because it calls every dispatched action and receive the action descriptor and current store state as arguments.
Action Plugin SolutionDivya live codes the solution to the action plugin exercise and explores how to build a functionality to check that the machine built in previous sections was serviced.
Vuex & Vue RouterDivya demonstrates how to hook up a Vuex store to a Vue router, and explains that this is useful for authenticated routes and loading data based on the route. The router provides a way to safely manage the application state inside the store, along with the rest of the application state.
Per Route Guard PracticeDivya demonstrates how to add a per route navigation guard to a view instance, and explains that a route guard is useful when developers need one specific route protected or when checking permissions for a specific route.
Global GuardsDivya shows how to create a global guard to run on all routes. Guards are primarily used to guard navigations either by redirecting it or canceling it.
Global Guards ExerciseStudents are instructed to add metadata to the admin and inventory routes and create a global navigation guard that checks whether a user is logged in.
Global Guards SolutionDivya live codes the solution to the global guards exercise.
Normalizing StateDivya describes state normalization at a high level, and explains that normalizing a state is removing the nestedness of data, which allows developers to avoid updating unrelated components.
Local Storage PluginDivya answers questions about the way the localStorage plugin loads data, the chronology of the before and after methods, and whether or not they follow the action like a promise.
Vuex ORMDivya explains that the Vuex ORM or Object Relational Mapping is a plugin, adds that the ORM helps define the application's data model, and allows to lockdown locations.