Vue.js, while relatively new to the scene, is growing in popularity quite quickly. It is relatively easy to get started with, but for anything non-trivial, it quickly becomes apparent that more powerful state management is needed in order to keep shared data synchronized throughout the application. Vuex is one of the possible solutions and is the most popular among Vue.js developers.
Vuex was inspired by Redux, a popular state management library for React, but is designed to integrate more seamlessly into Vue.js applications since it was created by the same developers and was intended only for use with Vue.js.
This course, Managing State in Vue.js with Vuex, teaches how to leverage Vuex the right way to add more maintainability and readability to the state management for Vue.js applications.
Developers who have at least a basic understanding of Vue.js looking to move onto more advanced state management system that is more maintainable and centralized.
Upon completion of this course, developers will understand or know how to:
- Install Vuex into their 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 bases
- Use Vue.js dev tools to debug state changes
- Split different pieces of state into separate modules for simpler maintenance
- Extend Vuex with plugins
- Test Vuex stores
This is a one-day hands-on course.
- 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
- Mapping state to computed properties in components
- Retrieving computed state from a store
- Writing getters
- Using getters
- Mapping getters to computed properties in components
- Why not just set state directly?
- Writing mutations
- Commiting mutations
- Mapping mutations to methods in components
- What are actions?
- Writing actions
- Performing asynchronous operations
- Using actions to persist data
- Dispatching Actions
- Mapping actions to methods in components
- Installing Vue dev tools
- Tracking state changes in tool
- Using “time travel” to debug
- 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
- Creating and registering plugins
- Potentially useful plugins
- Using plugins with modules
- Testing getters
- Testing mutations
- Testing actions
Request More Information About This Course