我有一個使用 Vue-Router 和 Vuex (Store) 的應用程式。
在儀表板組件上，顯示用戶資訊。Vue 從資料庫（異步）中提取用戶資訊并將其推送到 Store。
現在，在我的子組件中，我通過 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>
uj5u.com熱心網友回復：
最好有一些組件顯示loading...或一些微調器而不是ProfileInformationCard像這樣的整體：
<div>
<ProfileInformationCard v-if="user">
<span>{{ user.name }}</span>
<span>{{ user.lastLogin }}</span>
</ProfileInformationCard>
<Loader v-else />
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/377660.html
標籤：javascript Vue.js Vuex Vue路由器
下一篇：如何在影像前面添加一個維度？