8

Introducing Vuex

Vuex is a library that we can use with Vue.js to manage different states in an application. If

you are building a small application that does not require much data exchange between its

components, you are better off not using this library. However, as your application grows,
complexities crawl along with it. There will be several components in the application, and,

most obviously, you will need to exchange data from one component to another or share
the same data across multiple components. That is when Vuex comes to the rescue.

Vue.js also provides an emit method to pass data between different components, which we

used in previous chapters. As your application grows, you might also want to update

data across several components when your data gets updated.

So, Vuex provides a centralized place to store all the pieces of data in our application.

Whenever data changes, this new set of data will be stored in this centralized place. Also,

all of the components that want to use that data will be fetched from the store. This means
that we have a single source to store all the data, and all the components that we build will

be able to access that data.

Let's first get acquainted with some of the terminology that come with Vuex:

State: This is an object that contains the data. Vuex uses a single state tree, which

means that it is a single object that contains all the pieces of data for the

application.

Getters: It is used to fetch data from the state tree.

mutations: They are the methods that change the data in the state tree.

Actions: They are the functions that perform mutations.

We will discuss each of these in this chapter.