You have learned how to connect the real-time Firebase database to your Vue application and used this knowledge to update the configurations for Pomodoro timers. Now, apply your knowledge to the statistics area. For the sake of simplicity, just display the total amount of Pomodoros executed since the user started using the application. For that you will need to do the following:
Add another object called
statistics
containing thetotalPomodoros
attribute that initially equals0
in your Firebase database.Create an entry in the store's
state
to hold the statistics data.Map
totalPomodoros
of the statistics state's object to the Firebase reference using thefirebaseAction
enhancer and thebindFirebaseRef
method.Create an action that will update the
totalPomodoros
reference.Call this action whenever it has to be called inside the
PomodoroTimer
component.Display this value inside the
Statistics.vue
component.
Try to do it yourself. It shouldn't be difficult. Follow the same logic we applied...