Блог

У меня есть приложение, которое использует Vue-маршрутизатор и Vuex (магазин).

В компоненте панели мониторинга отображается информация о пользователе. Vue извлекает эту пользовательскую информацию из базы данных (асинхронно) и отправляет ее в Хранилище.

Теперь, в моих подкомпонентах, я получаю доступ к этой информации через Магазин. Проблема в том, что при начальной загрузке подкомпонента запись пользователя в хранилище пуста. TypeError: $setup.user is null . Теперь один из способов обойти это-поставить v-if букву » а » перед каждым элементом. Однако я нахожу это аккуратным.

Могу ли я обойти, вставляя a v-if в каждый html-элемент?

Пользователь.vue:

 lt;templategt;  lt;divgt;  lt;div id="profile_content"gt;  lt;UserNavbar /gt;  lt;router-view :key="$route.fullPath" /gt;  lt;/divgt;  lt;/divgt; lt;/templategt;  

Доска объявлений пользователей:

 lt;templategt; lt;divgt;  lt;ProfileInformationCardgt;  lt;span v-if="user"gt;{{ user.name }}lt;/spangt;  lt;span v-if="user"gt;{{ user.lastLogin }}lt;/spangt;  lt;/ProfileInformationCardgt; lt;/divgt; lt;/templategt;  lt;scriptgt; import _ from "lodash"; import { useStore } from "vuex"  import { watch } from "vue"   export default {  setup(){  const store = useStore()  const user = store.state.user.currentUser   watch(() =gt; _.cloneDeep(store.state.user.currentUser), () =gt; {  user.value = store.state.user.currentUser;  }  );  } } lt;/scriptgt;  

Было бы лучше, чтобы показывался какой-то компонент loading... или какой-то счетчик, а не целое ProfileInformationCard , как это:

 lt;divgt;  lt;ProfileInformationCard v-if="user"gt;  lt;spangt;{{ user.name }}lt;/spangt;  lt;spangt;{{ user.lastLogin }}lt;/spangt;  lt;/ProfileInformationCardgt;  lt;Loader v-else /gt; lt;/divgt;