Book Image

Learning Vue.js 2

By : Olga Filipova
Book Image

Learning Vue.js 2

By: Olga Filipova

Overview of this book

Vue.js is one of the latest new frameworks to have piqued the interest of web developers due to its reactivity, reusable components, and ease of use. This book shows developers how to leverage its features to build high-performing, reactive web interfaces with Vue.js. From the initial structuring to full deployment, this book provides step-by-step guidance to developing an interactive web interface from scratch with Vue.js. You will start by building a simple application in Vue.js which will let you observe its features in action. Delving into more complex concepts, you will learn about reactive data binding, reusable components, plugins, filters, and state management with Vuex. This book will also teach you how to bring reactivity to an existing static application using Vue.js. By the time you finish this book you will have built, tested, and deployed a complete reactive application in Vue.js from scratch.
Table of Contents (18 chapters)
Learning Vue.js 2
Credits
About the Author
Acknowledgments
About the Reviewer
www.PacktPub.com
Dedication
Preface

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...