VueJS 无需复杂的 v-if 语句即可获取异步状态

Question

我有一个使用 Vue-Router 和 Vuex （商店）的应用程序。

在仪表板组件上，显示用户信息。Vue 从数据库中提取用户信息（异步）并将其推送到 Store。

现在，在我的子组件中，我通过商店访问此信息。问题是，在初始加载子组件时，存储中的用户条目为空。TypeError: $setup.user is null。现在，解决这个问题的一种方法是v-if在每个元素前面放置一个。然而，我发现这很整洁。

v-if我可以在每个 html 元素中添加一个吗？

用户.vue：

<template>
  <div>
    <div id="profile_content">
      <UserNavbar />
      <router-view :key="$route.fullPath" />
    </div>
  </div>
</template>

用户仪表板：

<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

最好显示一些组件或一些旋转器，而不是像这样的loading...整体：ProfileInformationCard

<div>
    <ProfileInformationCard v-if="user">
      <span>{{ user.name }}</span>
      <span>{{ user.lastLogin }}</span>
    </ProfileInformationCard>
    <Loader v-else />
</div>