I have an application that uses Vue-Router and Vuex (Store).
On the Dashboard component, user information is shown. Vue pulls that user information from a database (async) and pushes it to the Store.
Now, in my subcomponents, I access this information via the Store.
The problem is, on the initial loading of a subcomponent, the user entry in the store is empty. TypeError: $setup.user is null.
Now, one way to get around this is to put a v-if in front of every element. However, I find this to be tidious.
Can I get around, putting a v-if in every html-element?
User.vue:
<template>
<div>
<div id="profile_content">
<UserNavbar />
<router-view :key="$route.fullPath" />
</div>
</div>
</template>
UserDashboard:
<template>
<div>
<ProfileInformationCard>
<span v-if="user">{{ user.name }}</span>
<span v-if="user">{{ user.lastLogin }}</span>
</ProfileInformationCard>
</div>
</template>
<script>
import _ from "lodash";
import { useStore } from "vuex"
import { watch } from "vue"
export default {
setup(){
const store = useStore()
const user = store.state.user.currentUser
watch(() => _.cloneDeep(store.state.user.currentUser), () => {
user.value = store.state.user.currentUser;
}
);
}
}
</script>
It would be better to have some component showing loading... or some spinner instead of the whole ProfileInformationCard like this:
<div>
<ProfileInformationCard v-if="user">
<span>{{ user.name }}</span>
<span>{{ user.lastLogin }}</span>
</ProfileInformationCard>
<Loader v-else />
</div>