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

Question

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

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

现在，在我的子组件中，我通过商店访问这些信息。问题是，在初始加载子组件时，商店中的用户条目是空的。 TypeError: $setup.user is null。现在，解决这个问题的一种方法是在每个元素前面放置一个 v-if 。但是，我觉得这很乏味。

我可以绕过，在每个 html 元素中放置一个 v-if 吗？

User.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>

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

VueJS get asynchronous state without complex v-if statements

javascript

vue.js

vue-router

vuex