Блог

Я создаю одну страницу с этим кодом:

страница: session_id.vue

 <template>
  <div>
    <v-skeleton-loader v-if="isLoading" boilerplate type="article, actions"> </v-skeleton-loader>
    <v-container v-else fluid>
      <v-row>
        <v-col cols="12">
          <v-btn icon color="black" @click="voltar">
            <v-icon>mdi-undo</v-icon>
          </v-btn>
        </v-col>
      </v-row>
      <v-row align="center">
        <v-col cols="12" sm="1">
          <v-avatar tile>
            <v-img :src="'data:image/png;base64,'   sessao.usuario.avatar"></v-img>
          </v-avatar>
        </v-col>
        <v-col cols="12" xl="7" lg="7" md="7" sm="7">
          <span class="ml-2">{{ sessao.usuario.nome }}</span>
        </v-col>
        <v-col sm="4" class="d-flex justify-end">
          <v-btn icon>
            <v-icon>
              {{ iconeFotografo }}
            </v-icon>
          </v-btn>
          <v-btn icon class="ml-2">
            <v-icon>
              mdi-account-search-outline
            </v-icon>
          </v-btn>
          <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn icon color="blue" v-bind="attrs" v-on="on">
                <v-icon>mdi-share</v-icon>
              </v-btn>
            </template>
            <span>{{$t('compartilhar.fotografo')}}</span>
          </v-tooltip>
        </v-col>
      </v-row>
      <v-row align="center">
        <v-col cols="12" sm="1">
          <v-avatar tile>
            <v-icon>
              mdi-beach
            </v-icon>
          </v-avatar>
        </v-col>
        <v-col cols="12" xl="7" lg="7" md="7" sm="7">
          <span class="ml-2">
            {{ sessao.praia.nome }} - {{ sessao.praia.cidade }} / {{ sessao.praia.uf }} -
            {{
              new Date(sessao.inicio).toLocaleDateString('pt-Br', {
                weekday: 'long',
                year: '2-digit',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
              })  
                ' ate '  
                new Date(sessao.fim).getHours()  
                ':'  
                new Date(sessao.fim).getMinutes()
            }}
          </span>
        </v-col>
        <v-col sm="4" class="d-flex justify-end">
          <v-btn icon>
            <v-icon>
              {{ iconePraia }}
            </v-icon>
          </v-btn>
          <v-btn icon class="ml-2">
            <v-icon>
              mdi-account-search-outline
            </v-icon>
          </v-btn>
        </v-col>
      </v-row>
      <Fotos :sessao="sessao" />
    </v-container>
  </div>
</template>

<script>
export default {
    data() {
        return {
            sessao: null,
            isLoading: true,
            iconeFotografo: null,
            iconePraia: null
        }
    },
    async fetch() {
        this.fetchFotos();
    },
    methods: {
        fetchFotos(){
          this.isLoading = true;
            this.$api.get(`/sessao/${this.$route.params.id}`).then(response => {
                this.sessao = response.data;
                this.isLoading = false;;
            });
        },
        voltar() {
            this.$router.go(-1);
        }
    }
};
</script>
 

Итак, если я перехожу на страницу (/ session / 1), он показывает v-skeleton-loader, затем выполняется выборка метода, и моя страница обновляется, но если я перезагружаю свою страницу (command F5 или нажимаю кнопку обновить), v-skeleton-loader показывает,выполняется метод выборки (я вижу в моем api), но там есть загрузчик v-skelecton’а, если я добавлю в свой шаблон {{isLoading}}, он сначала покажет true, затем покажет false, но страница не реагирует на это изменение, мне нужно создать резервную копию страницы и снова войти, чтобы перезагрузитьстраница.

почему это происходит? Это правильно в nuxtjs?

tks

Вероятно, вам следует просто использовать $fetchState.pending , а не ваше isLoading состояние. Поскольку это дубликат, и fetch() хук просто обрабатывает его сам по себе.

Кроме того, почему вы не записываете всю свою логику в fetch() хук? Сделайте это async/await , и это будет отлично работать ( await в вашем коде нет, вы используете then в месте)!

Вот пример того, как обрабатывать состояние загрузки при извлечении API благодаря перехвату выборки: https://codesandbox.io/s/use-nuxt-fetch-hook-on-api-5ymdz?file=/pages/index.vue