Setting up a Vuex store

Before starting with real data from the database, let's set up the Vuex store for our ProFitOro. We will use it to manage the Pomodoro timer configuration, user settings, such as the username, and a profile picture URL. We will also use it to store and retrieve the application's usage statistics.

From Chapter 2, Hello User Explained, you already know how the Vuex store works. We must define data that will represent the application's state and then we must provide all the needed getters to get the data and all the needed mutations to update the data. Once all this is set, we will be able to access this data from the components.

After the application's store is ready and set up, we can connect it to the real-time database and slightly adjust the getters and mutations to operate the real data.

First of all, we need to tell our application that it will use the Vuex store. To do that, let's add the npm dependency for vuex:

npm install vuex --save...