使用 nuxtjs 刷新页面不更新视图

Question

我用这段代码创建了一个页面：

页面：\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-skelecton-loader，然后执行 fetch 方法，并更新我的页面，但是如果我重新加载我的页面（命令 + F5 或单击在按钮刷新中）v-skeleton-loader 显示，执行 fetch 方法（我在我的 api 中看到）但是 v-skeleton-loader 仍然存在，如果我放入我的模板 {{isLoading}} 他首先显示为真，然后显示 false 但页面对更改没有反应，我需要返回页面并再次输入以重新加载页面。

为什么会这样？在 nuxtjs 中正确吗？

tks

Answer 1

您可能应该只使用$fetchState.pending 而不是isLoading 状态。因为它是重复的，并且 fetch() 钩子只是自己处理它。

另外，你为什么不在fetch() 钩子中写下你的整个逻辑呢？设置为async/await，它会很好用（你的代码中没有await，你在某个地方使用then）！

下面是一个示例，说明如何在通过 fetch 挂钩获取 API 时处理加载状态：https://codesandbox.io/s/use-nuxt-fetch-hook-on-api-5ymdz?file=/pages/index.vue