My website has a Navbar component that utilizes values from the Vuex store. Prior to entering each route, I trigger a dispatch from Vuex as shown below:
router.beforeEach((to, from, next) => {
//...
store.dispatch("updateUserData");
next();
});
Here is my Vuex store:
const actions = {
updateUserData({ commit }) {
UserService.getUserData().then(
(response) => {
commit("updateUserState", response.data);
},
(error) => {}
)
},
}
const mutations = {
updateUserState: function(state, user) {
state.user = user;
},
}
const getters = {
getUser: (state) => {
return state.user;
}
}
In addition, my Navbar component includes the following:
computed: {
currentUser() {
return this.$store.getters.getUser;
}
},
I use the value retrieved from Vuex like this:
<p style="border-left: 1px solid black" class="navIcon pl-4 py-1">
{{ currentUser.firstName }} {{ currentUser.lastName }}
</p>
Everything works fine when I first load the page containing the Navbar component. However, upon refreshing the page, I encounter the following error in my console:
vue.esm.js?a026:628 [Vue warn]: Error in render: "TypeError: Cannot read property 'firstName' of null"
found in
---> <Navbar> at src/layouts/Navbar.vue
<App> at src/App.vue
<Root>
warn @ vue.esm.js?a026:628
vue.esm.js?a026:1897 TypeError: Cannot read property 'firstName' of null
Can anyone provide guidance on what might be causing this issue? Thank you for your assistance!