App state
To make it easier for us to control the state of the app, we’ll add a new store to track the current state of the user interface.
Vuetify has created a placeholder app store for us in the store/app.ts file, so we’ll add some features to handle page transitions (lines 28, 30-35), toggling a menu (lines 18, 20-26) and controlling a dialog (lines 37-55) for app-level notifications: https://github.com/PacktPublishing/Building-Real-world-Web-Applications-with-Vue.js-3/blob/main/06.fitness/.notes/6.6-app.ts.
Having access to these kinds of user interface utilities in a centralized place eliminates the need to repeat certain patterns in our app, such as showing or hiding a dialog. It means that those utilities are part of the app and are therefore available throughout the whole app.
Centralized dialog
Let’s update the FormLogin.vue file to make use of the store options on the app level. We can clean up the existing dialog options and replace them...
