복잡한 v-if 문을 사용하지 않고 VueJ가 비동기 상태를 가져옵니다.

복잡한 v-if 문을 사용하지 않고 VueJ가 비동기 상태를 가져옵니다.

Vue-Router와 Vuex(Store)를 사용하는 어플리케이션이 있습니다.

대시보드 구성 요소에 사용자 정보가 표시됩니다.Vue는 해당 사용자 정보를 데이터베이스(async)에서 가져와 스토어에 푸시합니다.

서브 컴포넌트에서는 스토어를 통해 이 정보에 액세스합니다.문제는 서브컴포넌트를 처음 로드할 때 스토어의 사용자 엔트리가 비어 있다는 것입니다. TypeError: $setup.user is null이 문제를 해결하는 한 가지 방법은v-if모든 요소들 앞에서.하지만, 나는 이것이 깔끔하다고 생각한다.

돌아다니고 싶어도 돼?v-ifhtml을 사용할 수 있습니까?

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>

컴포넌트가 표시되도록 하는 것이 좋습니다.loading...아니면 전체가 아닌 스피너도 있고ProfileInformationCard다음과 같습니다.

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

언급URL : https://stackoverflow.com/questions/70264931/vuejs-get-asynchronous-state-without-complex-v-if-statements