Chapter 10. Vuex
This chapter covers
- Understanding state
- Using getters
- Implementing mutations
- Adding actions
- Working with Vuex helpers
- Learning about project setup and modules
In chapter 9, we looked at ways we could extend Vue.js and reuse part of its functionality without repeating code. In this chapter, we’ll look at how we store data in our application and how that data is shared between components. One of the preferred ways of sharing data in an application is by using a library called Vuex. Vuex is a state-management library that helps create a centralized store that can be shared with all the components in the application.
We’ll begin by looking at when we should use Vuex and when we shouldn’t. Certain applications benefit more from Vuex than others. Next, we’ll look at state and how we can centrally locate it. Afterward we’ll explore getters, mutations, and actions. All three allow us to keep track of state in our application. Then we’ll look at Vuex helpers, which will help us eliminate part of our boilerplate code. Last, we’ll see what type of directory structure we can use to fully take advantage of Vuex in larger applications.
The Vuex state-management library mutates state. It stores state in a central location, which makes it easy for any component to interact with. State is the information or data that supports our application. This is important because we need to access that information in a reliable and understandable way.