VueJS get asynchronous state without complex v-if statements

Question

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>

Answer 1

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>