Using Vuex store in the Pomodoro application

Finally, we got back to our Pomodoro! When was the last time you took a 5-minute break? Let's build our Pomodoro application with the Vuex architecture and then take a rest look at kittens. Let's start with the base in the chapter5/pomodoro folder, where you already included the basic structure of the Vuex store (if not, go to the start of the Installing and using Vuex store in our applications section).

Bringing life to start, pause, and stop buttons

Let's start by analyzing what can actually be done with our Pomodoro timer. Look at the page. We have only three buttons: start, pause, and stop. This means that our application can be in one of these three states. Let's define and export them in our store.js file:

//store.js 
<...> 
const state = { 
  started: false, 
  paused: false, 
  stopped: false 
} 
<...> 

Initially, all these states are set to false, which makes sense because the application...