So I was having an issue where my app wouldn't load once the user logged in.
The new "Timeline View" in Vuex Dev Tools was a huge help in dialing-in on where the problem was. I've been using it all week and it's incredibly well-built.
I initially thought that the route was being loaded before the AppConfig and UserConfig had a chance to be pulled from firebase. Looking at the code, I realized that I wasn't even pulling them from Firebase at all 😅 More specifically, I pulled the config in on the initial page load, but not when the user logged in.
I really love the first time I'm able to implement a piece of knowledge seamlessly. In this case, it was the Promise.all function. In this case, I wait for both fetchAppConfig and fetchUserConfig to load before updating the router:
note: ToastError and ToastNotifications are just wrappers for Buefy component
I also made sure to notify the user before calling the promises. It could take a second to load the database and it might confuse users if there's no response on the page to clicking "Log In" button.
Final solution looks and feels great 😊
Top comments (0)