Netlify
Vuex for Intermediate Vue 2 Developers
3 hours, 15 minutes
CC
Course Description
Vuex is a state management library for managing state in large Vue.js applications. It serves as a centralized store for all the components in an application. Learn how to integrate Vuex and learn patterns to make managing state across your code more maintainable. In this course, you’ll learn to move your application state into Vuex and build a full-scale application that utilizes Vuex to its full capacity with modules and plugins!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: August 5, 2020
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 31 minutes
Divya Tagtachian shares the course slides and repository, and gives an overview of the course curriculum.
Divya 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.
Divya 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.
Divya 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.
Students 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.
Divya walks through the code for the solution to the Vuex Store exercise.
Divya 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
Section Duration: 28 minutes
Divya defines state, actions, getters, and mutations as responsibilities in state management systems, and explains the difference between an action and a mutation.
Divya 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
Divya 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.
Divya 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.
Students are instructed to modify the language in which the information is displayed using a getter.
Divya 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.
Store
Section Duration: 9 minutes
Divya 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.
Divya 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.
Students are instructed to move a Vuex store into a separate single file store component and link it to the main.js file.
Divya live codes the solution to the Vuex Store exercise.
Helpers & Actions
Section Duration: 21 minutes
Divya compares and differentiates the purposes of the commit and dispatch methods: dispatch triggers an action whereas commit triggers a mutation
Students are instructed to destructure context so it uses the commit and dispatch methods to gain a better understanding of how to use these methods.
Divya live codes the solution to the commit and dispatch exercise.
Divya 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.
Students are instructed to refactor code explored in a previous section to use helpers by using mapState and mapActions.
Divya live codes the solution to the Vuex helpers exercise.
Divya demonstrates how to call an action on another action, and commit a mutation on the condition that the dispatch action returns successfully.
Students 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.
Divya live codes the solution to the composing Vuex actions exercise.
Modules
Section Duration: 43 minutes
Divya 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.
Students are instructed to move the various stores of the vending machine application into different modules.
Divya live codes the solution to the vuex modules exercise.
Divya explains that it is best practice to namespace actions, getters, and mutations, because they are global and can be used across modules.
Divya 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.
Divya 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.
Divya 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.
Students are instructed to locate the operatorView component, and dynamically load the store so that the primary machine is serviced without updating the other machines.
Divya live codes the solution to the dynamic module exercise.
Plugins
Section Duration: 25 minutes
Divya 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.
Divya demonstrates how to subscribe to a mutation by creating a plugin that hooks into a mutation and stores the data in local storage.
Students 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.
Divya 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.
Routing
Section Duration: 19 minutes
Divya 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.
Divya 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.
Divya 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.
Students 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.
Divya live codes the solution to the global guards exercise.
Q&A
Section Duration: 13 minutes
Divya 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.
Divya 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.
Divya 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.
Wrapping Up
Section Duration: 1 minute
Divya wraps up by explaining that more information and examples can be found in the code repo and links to articles about managing state in Vue 3.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops