Vue.js: элемент показывается на мгновение, несмотря на условный рендеринг

Question

У меня есть навигация с кнопкой, которая переключает меню, и кнопкой входа.

Когда пользователь не авторизован, он может видеть только кнопку входа.Когда пользователь входит в систему, эта кнопка исчезает, и он / она видит кнопку гамбургера, которая переключает меню пользователя.

У меня есть условие на основе атрибута isLoaded, которое может быть ложным или истинным в зависимости от ответа API (загружены ли данные профиля или нет, что происходит после входа в систему).Он работает нормально, но кнопка Вход появляется на мгновение, когда я перезагружаю страницу и после перенаправления на главную страницу после процесса входа.Интересно, как мне этого избежать.

Я подозреваю, что эта кнопка отображается, когда приложение ожидает ответа API и, как только оно видит isLoaded: true, оно скрывает кнопку после проверки состояния.

Вот мой код:

<v-toolbar app fixed dark color="light-blue lighten-2">
  <user-nav-button v-if="getProfile.isLoaded"
                   @toggle-drawer="$refs.drawer.drawer = !$refs.drawer.drawer" />
  <v-toolbar-title v-if="getProfile.isLoaded">
    <router-link :to="{ name: '/' }"
                 class="white--text" >
      APP
    </router-link>
  </v-toolbar-title>
  <v-spacer></v-spacer>
  <router-link :to="{ name: 'login' }"
               class="sign-in-button"
               v-if="!getProfile.isLoaded">
    SIGNIN
  </router-link>
</v-toolbar>
<profile-sidebar v-if="getProfile.isLoaded"
                 ref="drawer" />

<script>
export default {
data() {
 return {
  drawer: '',
 };
},
components: {
  UserNavButton,
  ProfileSidebar,
  MainFooter,
 },
 created() {
  this.loadProfile();
 },
 computed: {
  ...mapGetters(['getProfile']),
 },
 methods: {
  ...mapActions(['loadProfile']),
 },
};
<script>

Мой магазин:

export default {
 state: {
 profile: {
  isLoaded: false,
  data: [],
  },
},
actions: {
 loadProfile({ commit }) {
  if (config.token !== '') {
    http
      .post('api')
      .then(({ data }) => {
        commit('SET_PROFILE', data);
      });
  }
 },
},
mutations: {
 SET_PROFILE(state, data) {
  state.profile = {
    isLoaded: true,
    data,
  };
 },
},
getters: {
 getProfile(state) {
  return state.profile;
  },
 },
};

Answer 1

Ваша кнопка делает именно то, что вы говорите.

  <router-link :to="{ name: 'login' }"
               class="sign-in-button"
               v-if="!getProfile.isLoaded">

Когда getProfile.isLoaded ложно, вы показываете это.И это также ваше состояние по умолчанию.

Лично я бы отделил isloaded от данных профиля.Используйте loadingfinished свойство данных (или $store свойство)

Что вы действительно хотите, чтобы эта кнопка отображалась только при соблюдении двух условий:

1. загрузказакончено

2. вы знаете, что пользователь НЕ вошел в систему.