I limit my application to load to the DOM only if I have user details:
<template>
<div id="app">
<template v-if="loggedUser">
//...
</template>
</div>
</template>
where loggedUser
is a computed property from the store:
computed: {
loggedUser() {
return this.$store.getters.user;
}
}
The issue is that other components rely on this property existing. In one component, called admin under the route /admin
for example, when mounted()
I pass the user object from the store to a method which in turn executes an HTTP request:
mounted(){
this.someFunc(this.$store.getters.user)
}
but the issue is sometimes the user exists and sometimes the user doesn't. This is true if the user tries to load the app directly from the admin page andthe user doesn't exist. One possible option to solve this issue is to use watch
over the a computed property that returns the user from the store:
computed: {
user() {
return this.$store.getters.user;
}
},
watch: {
user(newVal) {
if(newVal) this.someFunc(this.$store.getters.user)
}
}
and while this might work it feels tedious even for this example. Nevertheless, bigger more complex issues arise due to this problem. Another possible option came is to try and save the user in localStorage but I guess vuex should be able to solve my issue without using any type of client side storage solutions. Any idea how I can solve this issue? Is there a more robust way to ensure that the user is available across my entire application?