Skip to content

Contact sales

By filling out this form and clicking submit, you acknowledge our privacy policy.

Managing State in Vue.js with Vuex

Course Summary

The Managing State in Vue.js with Vuex course is designed to demonstrate how to utilize Vuex to simplify state management in a Vue application.

The course begins with a review of Vue and its idioms and syntax. It then covers getters, mutations, actions and debugging. Finally, the course ends with a coverage of modules, plugins and testing. This course would be helpful for developers using Vue who need to make their applications more maintainable and easier to reason about.

Purpose
 Learn how to use Vuex to simplify state management in a Vue application.
Audience
 Vue.js developers looking to learn how to leverage Vuex
Role
Web Developer
Skill Level
Intermediate
Style
Workshops
Duration
1 Day
Related Technologies
JavaScript | Web Development | Vue.js

 

Productivity Objectives
  • Install Vuex into your project
  • Integrate Vuex into Vue.js to create a central state store
  • Manage state with getters and mutators
  • Perform asynchronous actions on the store's state, including persisting state to remote servers and local storage databases
  • Use Vue.js dev tools to debug state changes

What You'll Learn:

In the Managing State in Vue.js with Vuex training course, you'll learn:
  • Introduction
    • What is Vuex?
    • Core Concepts
    • Advantages of Vuex vs plain Vue.js state management
  • Getting Started
    • Installing Vuex
    • Creating a basic Vuex store
    • Making the Vuex store available to the entire app
  • Accessing State
    • $storestate
    • Mapping state to computed properties in components
  • Getters
    • Retrieving computed state from a store
    • Writing getters
    • Using getters
    • Mapping getters to computed properties in components
  • Mutations
    • Why not just set state directly?
    • Writing mutations
    • Commiting mutations
    • Mapping mutations to methods in components
  • Actions
    • What are actions?
    • Writing actions
    • Performing asynchronous operations
    • Using actions to persist data
    • Dispatching Actions
    • Mapping actions to methods in components
  • Debugging
    • Installing Vue dev tools
    • Tracking state changes in tool
    • Using "time travel" to debug
  • Modules
    • Splitting state into modules
    • Namespacing modules
    • Registering modules
    • Accessing global/root state from namespaced modules
    • Using helpers to aid in mapping module state/getters/mutations/actions in components
  • Plugins
    • Creating and registering plugins
    • Potentially useful plugins
    • Using plugins with modules
  • Testing
    • Testing getters
    • Testing mutations
    • Testing actions
real world content

Real-World Content

Project-focused demos and labs using your tool stack and environment, not some canned "training room" lab.
expert practitioners

Expert Practitioners

Industry experts that bring their battle scars into the classroom.
experiential learning

Experiential Learning

More coding than lecture, coupled with architectural and design discussions.
tailored outlines

Tailored Outlines

One-size-fits-all doesn't apply to training teams. That's where we come in!
“I appreciated the instructor's technique of writing live code examples rather than using fixed slide decks to present the material.”

VMware

Dive in and learn more

When transforming your workforce, it's important to have expert advice and tailored solutions. We can help. Tell us your unique needs and we'll explore ways to address them.

Let's chat

By filling out this form and clicking submit, you acknowledge our privacy policy.